《Android》『TabLayout、ViewPager』- 利用 TabLayout 搭配 ViewPager 實作 Fragment 之頁籤切換
《Android Developers 參考文獻》
《簡單介紹》
在之前我們已經介紹過如何使用 ViewPager 來實作使用者導覽頁面，在這邊，我們同樣要利用 ViewPager 可以儲存多個 View 的特性，搭配一個新的元件叫做 TabLayout，來實作頁籤的點擊與左右滑動切換，其中每個頁籤都代表一個 Fragment，看起來很難，但其實實作起來意外的簡單！
《實作方法》
這邊直接來說明實作方式，首先我們必須在介面佈局檔中加入 ViewPager 以及 TabLayout。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:orientation="vertical" tools:context="com.example.xylon.toolbarexp.MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/appbar_padding_top" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" app:tabGravity="fill"/> </android.support.design.widget.AppBarLayout> <android.support.v4.view.ViewPager android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> |
activity_main.xml
接著，我們建立兩個簡單的 Fragment，分別取名為 ViewFragment1 與 ViewFragment2，用來當作我們要放入 ViewPager 中的 Fragment。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package ... import ... public class ViewFragment1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, false); TextView textView = (TextView) rootView.findViewById(R.id.txt_label); textView.setText("ViewFragment1"); return rootView; } } |
ViewFragment1.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
package ... import ... public class ViewFragment2 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main, container, false); TextView textView = (TextView) rootView.findViewById(R.id.txt_label); textView.setText("ViewFragment2"); return rootView; } } |
ViewFragment2.java
這邊為了方便，我們將兩個 Fragment 用了相同的介面佈局檔，取名為 fragment_main.xml。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <TextView android:id="@+id/txt_label" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> |
fragment_main.xml
定義好所需的 Fragment 以後，就可以在 MainActivity 中實作啦，程式碼如下 –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
package ... import ... public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private TabLayout mTabLayout; public static int lastPosition = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager = (ViewPager) findViewById(R.id.container); mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {} @Override public void onPageSelected(int position) { lastPosition = position; } @Override public void onPageScrollStateChanged(int state) {} }); setupViewPager(mViewPager); mTabLayout = (TabLayout) findViewById(R.id.tabs); mTabLayout.setupWithViewPager(mViewPager); } private void setupViewPager(ViewPager viewPager) { ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager()); adapter.addFragment(new ViewFragment1(), "Title 1"); adapter.addFragment(new ViewFragment2(), "Title 2"); viewPager.setAdapter(adapter); } class ViewPagerAdapter extends FragmentPagerAdapter { private final List<Fragment> mFragmentList = new ArrayList<>(); private final List<String> mFragmentTitleList = new ArrayList<>(); public ViewPagerAdapter(FragmentManager manager) { super(manager); } @Override public Fragment getItem(int position) { return mFragmentList.get(position); } @Override public int getCount() { return mFragmentList.size(); } public void addFragment(Fragment fragment, String title) { mFragmentList.add(fragment); mFragmentTitleList.add(title); } @Override public CharSequence getPageTitle(int position) { return mFragmentTitleList.get(position); } } } |
MainActivity.java
在 MainActivity 中，我們宣告了名為 mViewPager 與 mTabLaout 的兩個物件，並透過 mViewPager.addOnPageChangeListener() 的方式定義頁面滑動時會觸發的事件，並在其中儲存 lastPosition 的位置(這參數在此範例中沒有作用，但在 Fragment 導向別的頁面時，可以記錄目前頁籤所在位置)。接著，我們宣告了一個繼承 FragmentPagerAdapter 的 Apapter，取名為 ViewPagerAdapter，在這個 Adapter 中自訂了一個 addFragment 方法，用來加入所需的 Fragment 以及頁籤標題資訊，最後再將此 Adapter 設定給 viewPager。
當 viewPager 設定完畢以後，我們才可以將 TabLayout 與 ViewPager 作連動，連動的方式很簡單，直接執行 tabLayout.setupWithViewPager(viewPager) 方法即可。
介面顯示如下 –
臉書留言
一般留言