Android中TabLayout+ViewPager 簡單實現app底部Tab導航欄

2019-12-12 03:37:09

字體：大中小

來源：轉載

供稿：網友

前言

在谷歌發布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中添加：

compile 'com.android.support:design:23.1.1'compile 'com.android.support:support-v4:23.1.1'

然后在主布局文件activity_main.xml中添加布局控件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <android.support.v4.view.ViewPager  android:id="@+id/viewPager"  android:layout_width="match_parent"  android:layout_height="0dp"  android:layout_weight="1"  android:scrollbars="none"> </android.support.v4.view.ViewPager> <android.support.design.widget.TabLayout  android:id="@+id/tabLayout"  android:layout_width="match_parent"  android:layout_height="50dp"  app:tabGravity="fill"  app:tabIndicatorHeight="0dp"  app:tabMode="fixed"  app:tabSelectedTextColor="#FF4081"  app:tabTextColor="#000"> </android.support.design.widget.TabLayout></LinearLayout>

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

接下來就和往常一樣在MainActivity.java中初始化布局，設置適配器：

 private void initViews() {  mTablayout= (TabLayout) findViewById(R.id.tabLayout);  mViewPager= (ViewPager) findViewById(R.id.viewPager);  mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {   private String[] mTitles = new String[]{"唐僧", "大師兄", "二師兄","沙師弟"};   @Override   public Fragment getItem(int position) {    if (position == 1) {     return new TwoFragment();    } else if (position == 2) {     return new ThreeFragment();    }else if (position==3){     return new FourFragment();    }    return new OneFragment();   }   @Override   public int getCount() {    return mTitles.length;   }   @Override   public CharSequence getPageTitle(int position) {    return mTitles[position];   }  });  mTablayout.setupWithViewPager(mViewPager);  one = mTablayout.getTabAt(0);  two = mTablayout.getTabAt(1);  three = mTablayout.getTabAt(2);  four = mTablayout.getTabAt(3);  one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));  two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));  three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));  four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher)); }

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

   @Override   public CharSequence getPageTitle(int position) {    return mTitles[position];   }

不然不顯示底部的文字。

mTablayout.setupWithViewPager(mViewPager);將TabLayout和ViewPager關聯起來。

one = mTablayout.getTabAt(0);獲取底部單個tab，用來添加初始化圖片，注意下標都是從0開始的。

初始化監聽事件

 private void initEvents() {  mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {   @Override   public void onTabSelected(TabLayout.Tab tab) {    if (tab == mTablayout.getTabAt(0)) {     one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mViewPager.setCurrentItem(0);    } else if (tab == mTablayout.getTabAt(1)) {     two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mViewPager.setCurrentItem(1);    } else if (tab == mTablayout.getTabAt(2)) {     three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mViewPager.setCurrentItem(2);    }else if (tab == mTablayout.getTabAt(3)){     four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mViewPager.setCurrentItem(3);    }   }   @Override   public void onTabUnselected(TabLayout.Tab tab) {    if (tab == mTablayout.getTabAt(0)) {     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    } else if (tab == mTablayout.getTabAt(1)) {     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    } else if (tab == mTablayout.getTabAt(2)) {     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    }else if (tab == mTablayout.getTabAt(3)){     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    }   }   @Override   public void onTabReselected(TabLayout.Tab tab) {   }  }); }

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

Fragment中的簡單布局

fragment_one.xml

<?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"> <TextView  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:text="唐僧"  android:layout_marginTop="100dp"  android:layout_gravity="center"  android:textSize="30sp"/></LinearLayout>

OneFragment.java

public class OneFragment extends Fragment{ @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  return inflater.inflate(R.layout.fragment_one,container,false); } @Override public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {  super.onViewCreated(view, savedInstanceState); }}

MainActivity.java完整代碼：

public class MainActivity extends AppCompatActivity { private TabLayout mTablayout; private ViewPager mViewPager; private TabLayout.Tab one; private TabLayout.Tab two; private TabLayout.Tab three; private TabLayout.Tab four; @Override protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  initViews();  initEvents(); } private void initEvents() {  mTablayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {   @Override   public void onTabSelected(TabLayout.Tab tab) {    if (tab == mTablayout.getTabAt(0)) {     one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mViewPager.setCurrentItem(0);    } else if (tab == mTablayout.getTabAt(1)) {     two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mViewPager.setCurrentItem(1);    } else if (tab == mTablayout.getTabAt(2)) {     three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mViewPager.setCurrentItem(2);    }else if (tab == mTablayout.getTabAt(3)){     four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mViewPager.setCurrentItem(3);    }   }   @Override   public void onTabUnselected(TabLayout.Tab tab) {    if (tab == mTablayout.getTabAt(0)) {     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    } else if (tab == mTablayout.getTabAt(1)) {     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    } else if (tab == mTablayout.getTabAt(2)) {     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    }else if (tab == mTablayout.getTabAt(3)){     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    }   }   @Override   public void onTabReselected(TabLayout.Tab tab) {   }  }); } private void initViews() {  mTablayout= (TabLayout) findViewById(R.id.tabLayout);  mViewPager= (ViewPager) findViewById(R.id.viewPager);  mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {   private String[] mTitles = new String[]{"唐僧", "大師兄", "二師兄","沙師弟"};   @Override   public Fragment getItem(int position) {    if (position == 1) {     return new TwoFragment();    } else if (position == 2) {     return new ThreeFragment();    }else if (position==3){     return new FourFragment();    }    return new OneFragment();   }   @Override   public int getCount() {    return mTitles.length;   }   @Override   public CharSequence getPageTitle(int position) {    return mTitles[position];   }  });  mTablayout.setupWithViewPager(mViewPager);  one = mTablayout.getTabAt(0);  two = mTablayout.getTabAt(1);  three = mTablayout.getTabAt(2);  four = mTablayout.getTabAt(3);  one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));  two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));  three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));  four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher)); }}

結束語

以上就是簡單用TabLayout+ViewPager實現app底部Tab布局的整個過程，希望對大家的學習有所幫助，也希望大家多多支持武林網。

上一篇：Android 歡迎全屏圖片詳解及實例代碼

下一篇：Android ScrollView顯示到底部或任意位置實現代碼