TShopping

標題: TabLayout+ViewPager 簡單實現app底部Tab佈局 [打印本頁]

作者: woff    時間: 2016-9-23 20:52
標題: TabLayout+ViewPager 簡單實現app底部Tab佈局
前言
  在谷歌發布Android Design Support Library之前,app底部tab佈局的實現方法就有很多種,其中有RadioGroup+FrameLayout、TabHost+Fragment、FragmentPagerAdapter+ViewPager等方法,雖然這些方法雖然能達到同樣的效果,但我個人總覺得有些繁瑣。然而,Google在2015的IO大會上,給開發者們帶來了全新的Android Design Support Library,裡麵包含了許多新控件,這些新控件有許多是把以前的一些第三方開源庫官方化,實現起來更為簡便,簡直是開發者的福音。其中的TabLayout控件讓我想到了app底部的tab佈局,而且TabLayout用法更加簡單,為何不試試用TabLayout實現簡單的實現呢?好了,話不多說,先看看效果:



是不是和以前的方法實現的效果一樣呢?下面我們來看看怎麼簡單實現。

過程

  因為TabLayout和ViewPager分別是屬於design和v4包下的,所以我們先在app的build.gradle中添加:

  1. compile 'com.android.support:design:23.1.1'
  2. compile 'com.android.support:support-v4:23.1.1'
複製代碼

然後在主佈局文件activity_main.xml中添加佈局控件:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:tools="http://schemas.android.com/tools"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:orientation="vertical"
  8.     tools:context=".MainActivity">

  9.     <android.support.v4.view.ViewPager
  10.         android:id="@+id/viewpager"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="0dp"
  13.         android:layout_weight="1"
  14.         android:scrollbars="none">
  15.     </android.support.v4.view.ViewPager>

  16.     <android.support.design.widget.TabLayout
  17.         android:id="@+id/tabLayout"
  18.         android:layout_width="match_parent"
  19.         android:layout_height="50dp"
  20.         app:tabGravity="fill"
  21.         app:tabIndicatorHeight="0dp"
  22.         app:tabMode="fixed"
  23.         app:tabSelectedTextColor="#FF4081"
  24.         app:tabTextColor="#000">
  25.     </android.support.design.widget.TabLayout>

  26. </LinearLayout>
複製代碼


  就僅一個ViewPager和TabLayout就可以實現,是不是比以前的方法繁瑣的佈局簡便很多 ​​?上面TabLayout中app:tabIndicatorHeight="0dp"是為了不顯示tab底部的橫線,app:tabMode="fixed"是讓底部tab佈局不可滑動。

接下來就和往常一樣在MainActivity.java中初始化佈局,設置適配器:
   
  1. private void initViews() {

  2.         mTablayout= (TabLayout) findViewById(R.id.tabLayout);
  3.         mViewPager= (ViewPager) findViewById(R.id.viewPager);

  4.         mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

  5.             private String[] mTitles = new String[]{"唐僧", "大师兄", "二师兄","沙师弟"};

  6.             @Override
  7.             public Fragment getItem(int position) {
  8.                 if (position == 1) {
  9.                     return MainActivity.PlaceholderFragment.newInstance(position+1);
  10.                 } else if (position == 2) {
  11.                     return MainActivity.PlaceholderFragment.newInstance(position+1);
  12.                 }else if (position==3){
  13.                     return MainActivity.PlaceholderFragment.newInstance(position+1);
  14.                 }
  15.                 return MainActivity.PlaceholderFragment.newInstance(position+1);
  16.             }

  17.             @Override
  18.             public int getCount() {
  19.                 return mTitles.length;
  20.             }

  21.             @Override
  22.             public CharSequence getPageTitle(int position) {
  23.                 return mTitles[position];
  24.             }

  25.         });

  26.         mTablayout.setupWithViewPager(mViewPager);

  27.         one = mTablayout.getTabAt(0);
  28.         two = mTablayout.getTabAt(1);
  29.         three = mTablayout.getTabAt(2);
  30.         four = mTablayout.getTabAt(3);

  31.         one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  32.         two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  33.         three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  34.         four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));

  35.     }
複製代碼

上面要注意的地方是別忘了在FragmentPagerAdapter中手動添加:

           
  1. @Override
  2.             public CharSequence getPageTitle(int position) {
  3.                 return mTitles[position];
  4.             }
複製代碼

不然不顯示底部的文字。
mTablayout.setupWithViewPager(mViewPager);將TabLayout和ViewPager關聯起來。
one = mTablayout.getTabAt(0);獲取底部單個tab,用來添加初始化圖片,注意下標都是從0開始的。

初始化監聽事件
   
  1. private void initEvents() {

  2.         mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
  3.             @Override
  4.             public void onTabSelected(TabLayout.Tab tab) {
  5.                 if (tab == mTablayout.getTabAt(0)) {
  6.                     one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
  7.                     mViewPager.setCurrentItem(0);
  8.                 } else if (tab == mTablayout.getTabAt(1)) {
  9.                     two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
  10.                     mViewPager.setCurrentItem(1);
  11.                 } else if (tab == mTablayout.getTabAt(2)) {
  12.                     three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
  13.                     mViewPager.setCurrentItem(2);
  14.                 }else if (tab == mTablayout.getTabAt(3)){
  15.                     four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));
  16.                     mViewPager.setCurrentItem(3);
  17.                 }

  18.             }

  19.             @Override
  20.             public void onTabUnselected(TabLayout.Tab tab) {
  21.                 if (tab == mTablayout.getTabAt(0)) {
  22.                     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  23.                 } else if (tab == mTablayout.getTabAt(1)) {
  24.                     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  25.                 } else if (tab == mTablayout.getTabAt(2)) {
  26.                     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  27.                 }else if (tab == mTablayout.getTabAt(3)){
  28.                     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  29.                 }
  30.             }

  31.             @Override
  32.             public void onTabReselected(TabLayout.Tab tab) {

  33.             }
  34.         });

  35.     }
複製代碼

  在onTabSelected中設置選中tab時切換的圖片,onTabUnselected中設置沒有被選中時的圖片。別忘了mViewPager.setCurrentItem(0);這句,這是用來點擊tab時切換ViewPager,如果不加這一句的話滑動ViewPager底部tab可以切換,但是點擊tab而ViewPager不會切換。

Fragment中的簡單佈局
viewpager.xml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical">

  6.     <TextView
  7.         android:layout_width="wrap_content"
  8.         android:layout_height="wrap_content"
  9.         android:text="唐僧"
  10.         android:layout_marginTop="100dp"
  11.         android:layout_gravity="center"
  12.         android:textSize="30sp"/>

  13. </LinearLayout>
複製代碼

OneFragment.java
  1. public class OneFragment extends Fragment{

  2.     @Nullable
  3.     @Override
  4.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
  5.         return inflater.inflate(R.layout.fragment_one,container,false);
  6.     }

  7.     @Override
  8.     public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
  9.         super.onViewCreated(view, savedInstanceState);
  10.     }
  11. }
複製代碼

MainActivity.java完整代碼:

  1. public class MainActivity extends AppCompatActivity {

  2.     private TabLayout mTablayout;
  3.     private ViewPager mViewPager;
  4.     private TabLayout.Tab one;
  5.     private TabLayout.Tab two;
  6.     private TabLayout.Tab three;
  7.     private TabLayout.Tab four;


  8.     @Override
  9.     protected void onCreate(Bundle savedInstanceState) {
  10.         super.onCreate(savedInstanceState);
  11.         setContentView(R.layout.activity_main);
  12.         initViews();
  13.         initEvents();
  14.     }

  15.     private void initEvents() {
  16.         mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
  17.             @Override
  18.             public void onTabSelected(TabLayout.Tab tab) {
  19.                 if (tab == mTablayout.getTabAt(0)) {

  20.                     mViewPager.setCurrentItem(0);
  21.                 } else if (tab == mTablayout.getTabAt(1)) {

  22.                     mViewPager.setCurrentItem(1);
  23.                 } else if (tab == mTablayout.getTabAt(2)) {

  24.                     mViewPager.setCurrentItem(2);
  25.                 }else if (tab == mTablayout.getTabAt(3)){

  26.                     mViewPager.setCurrentItem(3);
  27.                 }
  28.             }
  29.             @Override
  30.             public void onTabUnselected(TabLayout.Tab tab) {
  31.                 if (tab == mTablayout.getTabAt(0)) {
  32.                     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  33.                 } else if (tab == mTablayout.getTabAt(1)) {
  34.                     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  35.                 } else if (tab == mTablayout.getTabAt(2)) {
  36.                     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  37.                 }else if (tab == mTablayout.getTabAt(3)){
  38.                     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  39.                 }
  40.             }

  41.             @Override
  42.             public void onTabReselected(TabLayout.Tab tab) {

  43.             }
  44.         });
  45.     }

  46.     private void initViews() {

  47.         mTablayout= (TabLayout) findViewById(R.id.tabLayout);
  48.         mViewPager= (ViewPager) findViewById(R.id.viewPager);

  49.         mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {

  50.             private String[] mTitles = new String[]{"唐僧", "大师兄", "二师兄","沙师弟"};

  51.             @Override
  52.             public Fragment getItem(int position) {
  53.                 if (position == 1) {
  54.                     return MainActivity.PlaceholderFragment.newInstance(position+1);
  55.                 } else if (position == 2) {
  56.                     return MainActivity.PlaceholderFragment.newInstance(position+1);
  57.                 }else if (position==3){
  58.                     return MainActivity.PlaceholderFragment.newInstance(position+1);
  59.                 }
  60.                 return MainActivity.PlaceholderFragment.newInstance(position+1);
  61.             }

  62.             @Override
  63.             public int getCount() {
  64.                 return mTitles.length;
  65.             }

  66.             @Override
  67.             public CharSequence getPageTitle(int position) {
  68.                 return mTitles[position];
  69.             }

  70.         });

  71.         mTablayout.setupWithViewPager(mViewPager);

  72.         one = mTablayout.getTabAt(0);
  73.         two = mTablayout.getTabAt(1);
  74.         three = mTablayout.getTabAt(2);
  75.         four = mTablayout.getTabAt(3);

  76.         one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  77.         two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  78.         three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));
  79.         four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));

  80.     }

  81.     /**
  82.      * A placeholder fragment containing a simple view.
  83.      */
  84.     public static class PlaceholderFragment extends Fragment {
  85.         /**
  86.          * The fragment argument representing the section number for this
  87.          * fragment.
  88.          */
  89.         private static final String ARG_SECTION_NUMBER = "section_number";

  90.         public PlaceholderFragment() {
  91.         }

  92.         /**
  93.          * Returns a new instance of this fragment for the given section
  94.          * number.
  95.          */
  96.         public static PlaceholderFragment newInstance(int sectionNumber) {
  97.             PlaceholderFragment fragment = new PlaceholderFragment();
  98.             Bundle args = new Bundle();
  99.             args.putInt(ARG_SECTION_NUMBER, sectionNumber);
  100.             fragment.setArguments(args);
  101.             return fragment;
  102.         }

  103.         @Override
  104.         public View onCreateView(LayoutInflater inflater, ViewGroup container,
  105.                                  Bundle savedInstanceState) {
  106.             View rootView = inflater.inflate(R.layout.fragment_main, container, false);
  107.             TextView textView = (TextView) rootView.findViewById(R.id.section_label);
  108.             textView.setText(getString(R.string.section_format, getArguments().getInt(ARG_SECTION_NUMBER)));
  109.             return rootView;
  110.         }
  111.     }

  112. }
複製代碼

結束語
  以上就是簡單用TabLayout+ViewPager實現app底部Tab佈局的整個過程,如果你有更好的方法,或者文章中存在錯誤或不足的地方,歡迎在文章下面評論交流!

參考文章:http://www.jianshu.com/p/adf7a994613a






歡迎光臨 TShopping (http://www.tshopping.com.tw/) Powered by Discuz! X3.2