Android SlidingTab

Trong bài viết này tôi sẽ chỉ cho các bạn cách tạo một sliding tab đơn giản trong android bằng cách sử dụng fragment và viewpager. Ngoài ra, bạn có thể swipe giữa các tab  đó như là chức năng  của viewpager điều đó là không thể khi sử dụng TabHost.Nếu bạn chưa quen với việc sử dụng với ViewPager or Fragment  thì bạn đừng lo lắng. Bạn sẽ nhận được làm sao sử dụng những thành phần đó trong bài viết này. Vậy chúng ta sẽ bắt đầu bằng việc tạo ra 1 project . Ở đây tôi sử dụng Android Studio để tạo ra sample này.Dưới dây là các bước thực hiện

Video demo: AndVroid SlidingTab

1.Tạo Project  (lưu ý lựa chọn Theme của Project với ActionBar). 2. Chúng ta dự định sẽ sử dụng Fragments, hãy mở rộng MainActivity từ** FragmentActivity . Cũng  implement lớp này từ ActionBar.TabListener.**

}```

**3. mở file layout của mainactivity và thêm thành phần ViewPager (file layout của tôi là activity_main.xlm).**

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/viewpager" android:layout_awidth="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager>

**4. tạo một package riêng biệt cho lớp adapter.**
Tạo lớp Fragmenpageradapter cung cấp view tới các tab fragment.
Tạo một lớp TabsPagerAdapter.java dưới pakage adapter. Adapter này cũng cấp các fragment view tới các tab.

package com.android.sample.sampletabswipe.adapter; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import com.android.sample.sampletabswipe.AppFragment; import com.android.sample.sampletabswipe.GameFragment; import com.android.sample.sampletabswipe.MovieFragment; /**

• Created by Admin on 9/28/14. */ public class TabPagerAdapter extends FragmentPagerAdapter { public TabPagerAdapter(FragmentManager mFragmentManager){ super(mFragmentManager); } @Override public Fragment getItem(int index) { switch (index){ case 0: return new GameFragment(); case 1: return new MovieFragment(); case 2: return new AppFragment(); } return null; } @Override public int getCount() { // get item count - equal to number of tabs return 3; } }

**5. Add Tabs tới Actionbar**
Để hiển thị Tab, chúng ta không sử dụng bất kỳ thành phần UI nào khác giống như tabhost.  Actionbar đã có khẳ năng  add các Tab.  Chỉ cần enable phương thức

mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

mở file MainActivity.java của bạn và thêm những  những đoạn code như bên dưới;

public class MainActivity extends FragmentActivity implements ActionBar.TabListener { private ViewPager mViewPager; private TabPagerAdapter mAdapter; private ActionBar mActionBar; // Tabs title private String[] tabs = {"Games", "Movies", "Apps"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Initialization mViewPager = (ViewPager)findViewById(R.id.viewpager); mActionBar  = getActionBar(); mAdapter      = new TabPagerAdapter(getSupportFragmentManager()); mViewPager.setAdapter(mAdapter); mActionBar.setHomeButtonEnabled(false); mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Adding Tabs for (String tab: tabs){ mActionBar.addTab(mActionBar.newTab().setText(tab).setTabListener(this)); }

Nếu bạn chậy project bây giờ, bạn có thể nhiền thấy những tab bên dưới actionbar
**6. Add những view cho các Tab**
Chúng tôi đã trả về  những fragment tương ứng cho các tab trong lớp adater. Để làm cho nó đơn giản, ở đây chúng tôi tạo ra những file layout tương đối đơn giản cho mỗi tab. Trong ứng dụng thực tế, file layout sẽ phụ thuộc trên yêu cầu của bạn.
Tạo view cho  Tab Game: Tạo 1 file layout với tên là fragment_game.xml như đoạn code bên dưới

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_awidth="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_awidth="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <ImageView android:layout_awidth="40dp" android:layout_height="40dp" android:layout_marginLeft="8dp" android:layout_marginRight="12dp" android:scaleType="fitCenter" android:layout_gravity="center_vertical" android:src="@drawable/ic_game_1" android:background="@drawable/round_shape" /> <TextView android:layout_height="match_parent" android:layout_awidth="wrap_content" android:textSize="18sp" android:textColor="#000000" android:singleLine="true" android:gravity="center_vertical|left" android:layout_weight="1" android:textStyle="bold" android:text="GEARS OF WARS"/> </LinearLayout> <View style="@style/LineDivider"/> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_awidth="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <ImageView android:layout_awidth="40dp" android:layout_height="40dp" android:layout_marginLeft="8dp" android:layout_marginRight="12dp" android:scaleType="fitCenter" android:layout_gravity="center_vertical" android:src="@drawable/icon_game_2" android:background="@drawable/round_shape"/> <TextView android:layout_height="match_parent" android:layout_awidth="wrap_content" android:textSize="18sp" android:textColor="#000000" android:singleLine="true" android:gravity="center_vertical|left" android:layout_weight="1" android:textStyle="bold" android:text="SUPPER MAN"/> </LinearLayout> <View style="@style/LineDivider"/> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_awidth="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <ImageView android:layout_awidth="40dp" android:layout_height="40dp" android:layout_marginLeft="8dp" android:layout_marginRight="12dp" android:scaleType="fitCenter" android:layout_gravity="center_vertical" android:src="@drawable/ic_game4" android:background="@drawable/round_shape"/> <TextView android:layout_height="match_parent" android:layout_awidth="wrap_content" android:textSize="18sp" android:textColor="#000000" android:singleLine="true" android:gravity="center_vertical|left" android:layout_weight="1" android:textStyle="bold" android:text="SUPER MARIO"/> </LinearLayout> <View style="@style/LineDivider"/> </LinearLayout>

Tạo một lớp FragmentGame.class tương ứng cho view nay. Như đoạn code bên dưới

public class GameFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_game, container, false); return rootView; } }

Tương tự như trên, bạn sẽ tạo ra các file layout và các file Fragment tương ứng cho các tab còn lại( tham khảo trong source code).
**7. Tab change listener**
Trong class MainActivity.java thêm vào đoạn code như bên dưới.

@Override public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { // On tab selected show respected fragment view mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) { } @Override public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) { } }

**8. View change listener**
Trong Mainactivity.java chúng ta sẽ thêm sử lý cho** viewpager.setonpagerchangelistener().**

mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i2) { } @Override public void onPageSelected(int position) { // On Changing the Page make respected tab selected mActionBar.setSelectedNavigationItem(position); } @Override public void onPageScrollStateChanged(int i) { } });

**9. Complete code**
Bên dưới là code đầy đủ của lớp
mainactivity.java.

package com.android.sample.sampletabswipe; import android.app.ActionBar; import android.app.FragmentTransaction; import android.os.Bundle; import android.support.v4.app.FragmentActivity; import android.support.v4.view.ViewPager; import android.view.Menu; import android.view.MenuItem; import com.android.sample.sampletabswipe.adapter.TabPagerAdapter; public class MainActivity extends FragmentActivity implements ActionBar.TabListener { private ViewPager mViewPager; private TabPagerAdapter mAdapter; private ActionBar mActionBar; // Tabs title private String[] tabs = {"Games", "Movies", "Apps"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Initialization mViewPager = (ViewPager)findViewById(R.id.viewpager); mActionBar  = getActionBar(); mAdapter     = new TabPagerAdapter(getSupportFragmentManager()); mViewPager.setAdapter(mAdapter); mActionBar.setHomeButtonEnabled(false); mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Adding Tabs for (String tab: tabs){ mActionBar.addTab(mActionBar.newTab().setText(tab).setTabListener(this)); } /**

• On Swiping the viewpager make respective tab selected
• */ mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int i, float v, int i2) { } @Override public void onPageSelected(int position) { // On Changing the Page make respected tab selected mActionBar.setSelectedNavigationItem(position); } @Override public void onPageScrollStateChanged(int i) { } }); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.my, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. The action bar will // automatically handle clicks on the Home/Up button, so long // as you specify a parent activity in AndroidManifest.xml. int id = item.getItemId(); if (id == R.id.action_settings) { return true; } return super.onOptionsItemSelected(item); } @Override public void onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { // On tab selected show respected fragment view mViewPager.setCurrentItem(tab.getPosition()); } @Override public void onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) { } @Override public void onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) { } }

Các bạn có thể download đầy đủ mã nguồn [tại đây](http://www.mediafire.com/download/4sohbds65skkzxw/SampleTabSwipe.zip).