TabLayout的實現
安卓中實現以上選項卡的效果方式有很多種，TabHost，自定義控件（第三方庫），RadioGroup等等。這里主要介紹Android Design庫中的TabLayout的使用。TabLayout是安卓6.0之后出現的。
基本使用步驟：
一、
在Android Studio中可以直接引用design庫，第一步當然是先引入這個庫了，如下圖：
二、
在布局中加入TabLayout控件
<android.support.design.widget.TabLayout android:id="@+id/mytab" android:layout_width="match_parent" android:layout_height="wrap_content"
></android.support.design.widget.TabLayout>
三、
在java代碼中添加Tab實現選項卡效果
package com.contentprovide.liuliu.tablayout_demo; import android.os.Bundle; import android.support.design.widget.TabLayout; import android.support.v7.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { TabLayout mytab; @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mytab = (TabLayout) findViewById(R.id.mytab); mytab.addTab(mytab.newTab().setText("選項卡一").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡二").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡三").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡四").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡五").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡六").setIcon(R.mipmap.ic_launcher)); } }
這三步完成已經初步實現選項卡效果了
接下來進一步的使用就是給選項卡加一些效果，讓它看起來更好看
改變Tab顏色
設置字體默認顏色
app:tabTextColor="#ffffff"
設置字體被選中后的顏色
app:tabSelectedTextColor="#e40707"
設置指示器顏色
app:tabIndicatorColor="#30e407"
設置指示器高度（如果希望選項卡不顯示指示器效果只需要把指示器高度設置為0就行了）
app:tabIndicatorHeight="2dp"
設置Tab背景顏色（作用效果和Background一樣）
app:tabBackground="@color/colorye"
設置Tab滾動方式
可滾動
app:tabMode="scrollable"
固定
app:tabMode="fixed"
給Tab添加圖標，在Java代碼中實現
mytab.addTab(mytab.newTab().setText("選項卡一").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡二").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡三").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡四").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡五").setIcon(R.mipmap.ic_launcher)); mytab.addTab(mytab.newTab().setText("選項卡六").setIcon(R.mipmap.ic_launcher));
我設置完這些屬性后的效果是這樣的
TabLayout的監聽事件
選中了某個tab的監聽事件OnTabSelectedListener()：
setOnTabSelectedListener()這個方法已經被拋棄了，現在一般使用addOnTabSelectedListener
mytab.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { // 添加選中Tab的邏輯
} @Override public void onTabUnselected(TabLayout.Tab tab) { // 添加未選中Tab的邏輯
} @Override public void onTabReselected(TabLayout.Tab tab) { // 再次選中tab的邏輯
} });
最后實用性比較強的是將TabLayout和ViewPager關聯，這種使用方法比較靈活，在實際開發中一般都是這樣配合使用
關聯TabLayout和ViewPager只需要調用mytab.setupWithViewPager(mViewPager);
這里記錄一下通過使用Fragment作為ViewPager的內容，再將ViewPager關聯
步驟一、
在布局文件中TabLayout控件的下方添加ViewPager控件（如果需要選項卡位於底部實現類似QQ的那種效果，只需要把ViewPager控件放在TabLayout控件的上面就行了）
<android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:id="@+id/mViewPager"
></android.support.v4.view.ViewPager>
步驟二、
在Java代碼中定義兩個List集合，一個放TabLayout標題Title，一個放TabLayout內容Fragment
List<String> mTitle; List<Fragment> mFragment;
給這兩個集合添加內容
mTitle = new ArrayList<>(); mTitle.add("選項卡一"); mTitle.add("選項卡二"); mTitle.add("選項卡三"); mTitle.add("選項卡四"); mFragment = new ArrayList<>(); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mFragment.add(new Fragment());
步驟三、
給ViewPager創建適配器，將Title和Fragment添加進ViewPager中
mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return mFragment.get(position); } @Override public int getCount() { return mFragment.size(); } @Override public CharSequence getPageTitle(int position) { return mTitle.get(position); } });
步驟四、
最后一步當然是將ViewPager和TabLayout關聯起來了
mytab.setupWithViewPager(mViewPager);
全部代碼如下
public class MainActivity extends AppCompatActivity { TabLayout mytab; ViewPager mViewPager; List<String> mTitle; List<Fragment> mFragment; @Override protected void onCreate(final Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mytab = (TabLayout) findViewById(R.id.mytab); mViewPager = (ViewPager) findViewById(R.id.mViewPager); mTitle = new ArrayList<>(); mTitle.add("選項卡一"); mTitle.add("選項卡二"); mTitle.add("選項卡三"); mTitle.add("選項卡四"); mFragment = new ArrayList<>(); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mFragment.add(new Fragment()); mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) { return mFragment.get(position); } @Override public int getCount() { return mFragment.size(); } @Override public CharSequence getPageTitle(int position) { return mTitle.get(position); } }); mytab.setupWithViewPager(mViewPager); } }
最后補充一點：最好給ViewPager添加上預加載，這樣看起來的效果會好一點
預加載界面個數，表示你的預告加載的頁面數量的個數,假設我設置為2，當前顯示一個,預先加載兩個個.這樣你在移動前就已經加載了下一個界面,移動時就可以看到已經加載的界面了.
mViewPager.setOffscreenPageLimit(2);
今天做一個項目要實現選項卡的選項不但有文字還要有圖片，並且選中的選項中的文字和圖片要進行變色。
文字的相關用法上面都寫了，但是ViewPager的適配器FragmentPagerAdapter沒有和設置圖片相關的方法，下面我就記錄一下當TabLayout和Fragment和Viewpager進行綁定之后怎么給選項卡添加圖片。
我們都知道使用完下面的方法之后TabLayout和ViewPager的綁定就已經完成了，選項卡的效果也已經實現了
tab.setupWithViewPager(mViewPager);
所以在我們需要給選項卡設置圖片就需要把選項卡的內容給清空，使用下面的方法
tab.removeAllTabs();
現在我們有幾個選項就做幾個圖片選擇器（選擇器的作用是當我們選中當前選項時，當前的圖片會進行變色），做圖片選擇器的方法這里就不寫了，我另外一篇博客里面有。
然后把這些圖片選擇器都放到一個集合當中去。
接下來就可以給選項卡設置文字和圖片了，這里的方法和一開始寫的是一樣的。下面的tab是我自定義的TabLayout對象
TabLayout.Tab tt; for (int i = 0; i < 3; i++) { tt = tab.newTab(); tt.setText(Tab_title.get(i).toString()); tt.setIcon(getResources().getDrawable((Integer) Tab_Icon.get(i))); tab.addTab(tt, i); }
下面是實現效果
