Android SlidingTab

Bài đăng này đã không được cập nhật trong 9 năm

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.** public class MainActivity extends FragmentActivity implements 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_width="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

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <ImageView android:layout_width="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_width="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_width="match_parent" android:layout_height="50dp" android:orientation="horizontal"> <ImageView android:layout_width="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_width="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=<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 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.

Android

Mục lục