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<!--more-->

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.** <span style="color: #0000ff;">public class</span> MainActivity <span style="color: #0000ff;">extends</span> FragmentActivity<span style="color: #0000ff;"> implements</span> ActionBar.TabListener { } 3. mở file layout của mainactivity và thêm thành phần <span style="color: #ff0000;">ViewPager</span> (file layout của tôi là <span style="color: #3366ff;">activity_main.xlm</span>).<<span style="color: #0000ff;">android.support.v4.view.ViewPager</span> xmlns:android=<span style="color: #0000ff;">"http://schemas.android.com/apk/res/android" android:id="@+id/viewpager"</span> android:layout_width=<span style="color: #0000ff;">"match_parent"</span> android:layout_height=<span style="color: #0000ff;">"match_parent"</span>> </<span style="color: #0000ff;">android.support.v4.view.ViewPager</span>> 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 <span style="color: #3366ff;">TabsPagerAdapter.java</span> dưới pakage adapter. Adapter này cũng cấp các fragment view tới các tab. <span style="color: #0000ff;">package</span> com.android.sample.sampletabswipe.adapter; <span style="color: #0000ff;">import</span> android.support.v4.app.Fragment; <span style="color: #0000ff;">import</span> android.support.v4.app.FragmentManager; <span style="color: #0000ff;">import</span> android.support.v4.app.FragmentPagerAdapter; <span style="color: #0000ff;">import</span> com.android.sample.sampletabswipe.AppFragment; <span style="color: #0000ff;">import</span> com.android.sample.sampletabswipe.GameFragment; <span style="color: #0000ff;">import</span> com.android.sample.sampletabswipe.MovieFragment; /**

  • Created by Admin on 9/28/14. */ <span style="color: #0000ff;">public class</span> TabPagerAdapter <span style="color: #0000ff;">extends</span> FragmentPagerAdapter { <span style="color: #0000ff;">public</span> TabPagerAdapter(FragmentManager mFragmentManager){ <span style="color: #0000ff;">super</span>(mFragmentManager); } @Override <span style="color: #0000ff;">public</span> Fragment getItem<span style="color: #0000ff;">(int</span> index) { <span style="color: #0000ff;">switch</span> (index){ <span style="color: #0000ff;">case</span> 0: <span style="color: #0000ff;">return new</span> GameFragment(); <span style="color: #0000ff;">case</span> 1: <span style="color: #0000ff;">return new</span> MovieFragment(); <span style="color: #0000ff;">case</span> 2: <span style="color: #0000ff;">return new</span> AppFragment(); } <span style="color: #0000ff;">return null</span>; } @Override <span style="color: #0000ff;">public int</span> getCount() { // get item count - equal to number of tabs r<span style="color: #0000ff;">eturn</span> 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 <span style="color: #3366ff;">mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);</span> mở file <span style="color: #3366ff;">MainActivity.java</span> của bạn và thêm những  những đoạn code như bên dưới; <span style="color: #0000ff;">public class</span> MainActivity <span style="color: #0000ff;">extends</span> FragmentActivity <span style="color: #0000ff;">implements</span> ActionBar.TabListener { <span style="color: #0000ff;">private</span> ViewPager mViewPager; <span style="color: #0000ff;">private</span> TabPagerAdapter mAdapter; <span style="color: #0000ff;">private</span> ActionBar mActionBar; // Tabs title <span style="color: #0000ff;">private</span> String[] tabs = {<span style="color: #0000ff;">"Games", "Movies", "Apps"</span>}; @Override <span style="color: #0000ff;">protected void</span> onCreate(Bundle savedInstanceState) { <span style="color: #0000ff;">super</span>.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Initialization mViewPager = (ViewPager)findViewById(R.id.viewpager); mActionBar  = getActionBar(); mAdapter      =<span style="color: #0000ff;"> new</span> TabPagerAdapter(getSupportFragmentManager()); mViewPager.setAdapter(mAdapter); mActionBar.setHomeButtonEnabled(<span style="color: #0000ff;">false</span>); mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Adding Tabs <span style="color: #0000ff;">for</span> (String tab: tabs){ mActionBar.addTab(mActionBar.newTab().setText(tab).setTabListener(<span style="color: #0000ff;">this</span>)); } 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à <span style="color: #3366ff;">fragment_game.xml</span> như đoạn code bên dưới
<?xml version="1.0" encoding=<span style="color: #0000ff;">"utf-8"</span>?>

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

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

Tạo một lớp <span style="color: #3366ff;">FragmentGame.class</span> tương ứng cho view nay. Như đoạn code bên dưới <span style="color: #0000ff;">public class</span> GameFragment<span style="color: #0000ff;"> extends</span> Fragment { @Override <span style="color: #0000ff;">public</span> View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_game, container, false); <span style="color: #0000ff;">return</span> 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 <span style="color: #3366ff;">MainActivity.java</span> thêm vào đoạn code như bên dưới. @Override <span style="color: #0000ff;">public void</span> onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { // On tab selected show respected fragment view mViewPager.setCurrentItem(tab.getPosition()); } @Override <span style="color: #0000ff;">public void</span> onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) { } @Override <span style="color: #0000ff;">public void</span> onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) { } } 8. View change listener Trong <span style="color: #3366ff;">Mainactivity.java</span> chúng ta sẽ thêm sử lý cho** viewpager.setonpagerchangelistener().** mViewPager.setOnPageChangeListener(<span style="color: #3366ff;">new</span> ViewPager.OnPageChangeListener() { @Override <span style="color: #0000ff;">public void</span> 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 <span style="color: #0000ff;">public void</span> onPageScrollStateChanged(int i) { } }); 9. Complete code Bên dưới là code đầy đủ của lớp mainactivity.java. <span style="color: #0000ff;">package</span> com.android.sample.sampletabswipe; <span style="color: #0000ff;">import</span> android.app.ActionBar; <span style="color: #0000ff;">import</span> android.app.FragmentTransaction; <span style="color: #0000ff;">import</span> android.os.Bundle; <span style="color: #0000ff;">import</span> android.support.v4.app.FragmentActivity; <span style="color: #0000ff;">import</span> android.support.v4.view.ViewPager; <span style="color: #0000ff;">import</span> android.view.Menu; <span style="color: #0000ff;">import</span> android.view.MenuItem; <span style="color: #0000ff;">import</span> com.android.sample.sampletabswipe.adapter.TabPagerAdapter; <span style="color: #0000ff;">public class</span> MainActivity <span style="color: #0000ff;">extends</span> FragmentActivity implements ActionBar.TabListener { <span style="color: #0000ff;">private</span> ViewPager mViewPager; <span style="color: #0000ff;">private</span> TabPagerAdapter mAdapter; <span style="color: #0000ff;">private</span> ActionBar mActionBar; // Tabs title <span style="color: #0000ff;">private</span> String[] tabs = {<span style="color: #0000ff;">"Games", "Movies", "Apps"</span>}; @Override <span style="color: #0000ff;">protected void</span> onCreate(Bundle savedInstanceState) { <span style="color: #0000ff;">super</span>.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Initialization mViewPager = (ViewPager)findViewById(R.id.viewpager); mActionBar  = getActionBar(); mAdapter     = <span style="color: #0000ff;">new</span> TabPagerAdapter(getSupportFragmentManager()); mViewPager.setAdapter(mAdapter); mActionBar.setHomeButtonEnabled(<span style="color: #0000ff;">false</span>); mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); // Adding Tabs for (String tab: tabs){ mActionBar.addTab(mActionBar.newTab().setText(tab).setTabListener(<span style="color: #0000ff;">this</span>)); } /**

  • On Swiping the viewpager make respective tab selected
  • */ mViewPager.setOnPageChangeListener(<span style="color: #0000ff;">new</span> ViewPager.OnPageChangeListener() { @Override <span style="color: #0000ff;">public void</span> onPageScrolled(<span style="color: #0000ff;">int</span> i, <span style="color: #0000ff;">float</span> v, <span style="color: #0000ff;">int</span> i2) { } @Override <span style="color: #0000ff;">public void</span> onPageSelected(<span style="color: #0000ff;">int</span> position) { // On Changing the Page make respected tab selected mActionBar.setSelectedNavigationItem(position); } @Override <span style="color: #0000ff;">public void</span> onPageScrollStateChanged(<span style="color: #0000ff;">int</span> i) { } }); } @Override <span style="color: #0000ff;">public boolean</span> onCreateOptionsMenu(<span style="color: #0000ff;">Menu</span> menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(<span style="color: #0000ff;">R</span>.menu.my, menu); <span style="color: #0000ff;">return</span> true; } @Override <span style="color: #0000ff;">public boolean</span> onOptionsItemSelected(<span style="color: #0000ff;">MenuItem</span> 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 <span style="color: #3366ff;">AndroidManifest.xml</span>. <span style="color: #0000ff;">int</span> id = item.getItemId(); if (id == R.id.action_settings) { <span style="color: #0000ff;">return</span> true; } <span style="color: #3366ff;">return super</span>.onOptionsItemSelected(item); } @Override <span style="color: #3366ff;">public void</span> onTabSelected(ActionBar.Tab tab, FragmentTransaction ft) { // On tab selected show respected fragment view mViewPager.setCurrentItem(tab.getPosition()); } @Override <span style="color: #0000ff;">public void</span> onTabUnselected(ActionBar.Tab tab, FragmentTransaction ft) { } @Override <span style="color: #0000ff;">public void</span> onTabReselected(ActionBar.Tab tab, FragmentTransaction ft) { } } Các bạn có thể download đầy đủ mã nguồn tại đây.