tabSelectedTextColor
3.2.接著是是CNKFixedPagerAdapter，該為ViewPager的自定義適配器，在ViewPager中的每一項采用Fragment實現，所以傳入了得Fragment的頁面的集合，同時還定義了Tab顯示標題的數組。
package com.chinaztt.fda.adapter;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import com.chinaztt.fda.application.FDApplication;
import com.chinaztt.fda.ui.R;
import java.util.List;
/**
* 當前類注釋:Fragment，Viewpager的自定義適配器
* 項目名：FastDev4Android
* 包名：com.chinaztt.fda.adapter
* 作者：江清清 on 15/12/2 10:08
* 郵箱：[email protected]
* QQ： 781931404
* 公司：江蘇中天科技軟件技術有限公司
*/
public class CNKFixedPagerAdapter extends FragmentStatePagerAdapter {
private String[] titles;
private LayoutInflater mInflater;
public void setTitles(String[] titles) {
this.titles = titles;
}
private List fragments;
public CNKFixedPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return this.fragments.get(position);
}
@Override
public int getCount() {
return this.fragments.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
Fragment fragment=null;
try {
fragment=(Fragment)super.instantiateItem(container,position);
}catch (Exception e){
}
return fragment;
}
@Override
public void destroyItem(ViewGroupcontainer, int position, Object object) {
}
//此方法用來顯示tab上的名字
@Override
public CharSequence getPageTitle(intposition) {
return titles[position %titles.length];
}
public List getFragments(){
return fragments;
}
public void setFragments(List fragments) {
this.fragments = fragments;
}
}
該Adapter中我們重寫了getPageTitle()方法，用來顯示Tab的標題。
3.3.下面就是具體的Fragment(TabInfoFragment)了，該Fragment中，我們初始化ViewPager，TabLayout以及自定義器適配器，Fragment頁面和顯示的Tab標題。
最終我們把適配器和ViewPager進行綁定，TabLayout和ViewPager進行綁定即可。
public class TabInfoFragment extends Fragment {
private String[]titles=new String[]{全部,氪TV,O2O,新硬件,Fun!!,企業服務,Fit&Health,在線教育,互聯網金融,大公司,專欄,新產品};
private View mView;
private TabLayout tab_layout;
private ViewPager info_viewpager;
private List fragments;
private CNKFixedPagerAdapter mPagerAdater;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
if(mView==null){
mView=inflater.inflate(R.layout.tab_info_fragment_layout,container,false);
initViews();
initValidata();
}
return mView;
}
private void initViews(){
tab_layout=(TabLayout)mView.findViewById(R.id.tab_layout);
info_viewpager=(ViewPager)mView.findViewById(R.id.info_viewpager);
}
private void initValidata(){
fragments=new ArrayList<>();
for(int i=0;i<12;i++){
OneFragment oneFragment=new OneFragment();
Bundle bundle=new Bundle();
bundle.putString(extra,titles[i]);
oneFragment.setArguments(bundle);
fragments.add(oneFragment);
}
//創建Fragment的 ViewPager 自定義適配器
mPagerAdater=new CNKFixedPagerAdapter(getChildFragmentManager());
//設置顯示的標題
mPagerAdater.setTitles(titles);
//設置需要進行滑動的頁面Fragment
mPagerAdater.setFragments(fragments);
info_viewpager.setAdapter(mPagerAdater);
tab_layout.setupWithViewPager(info_viewpager);
//設置Tablayout
//設置TabLayout模式 -該使用Tab數量比較多的情況
tab_layout.setTabMode(TabLayout.MODE_SCROLLABLE);
}
}
相信大家已經看到該代碼的最後有一句:
tab_layout.setTabMode(TabLayout.MODE_SCROLLABLE);
該用來設置Tablayout的模式，除了上面的默認之外還有一個模式如下:
tab_layout.setTabMode(TabLayout.MODE_FIXED);
兩者的區別如下，如果Tab數量比較多的情況下，最少用上面那個，Tab標簽可以左右滑動顯示。
3.4.運行效果如下:
(四).Tab升級版改造:
上面的效果是屬於基礎版本直接Tab顯示標題就結束了，有時候不會達到我們的要求Tab標簽上面顯示圖標。那麼現在我們對其進行改造一下可以讓TabLayout打造的Tab既能顯示圖標又能顯示文字標題信息。該主要采用Tab的以下方法實現:
tab.setCustomView(view); tab添加的自定義布局
4.1.首先對於Tab Item每一項我們需要定義一個布局文件:
該布局文件很簡單，上下布局圖標和標題
4.2.然後我們需要在CNKFixedPagerAdapter中進行以下修改：先前我們是通過重寫public CharSequence getPageTitle(int position)該方法來顯示標題的，那麼現在我們需要刪掉或者注釋掉該方法，然後新增一個getTabView()方法來實時創建Tab Item的布局然後綁定數據:
/**
* 添加getTabView的方法，來進行自定義Tab的布局View
* @param position
* @return
*/
public View getTabView(int position){
mInflater=LayoutInflater.from(FDApplication.getInstance());
Viewview=mInflater.inflate(R.layout.tab_item_layout,null);
TextView tv= (TextView)view.findViewById(R.id.textView);
tv.setText(titles[position]);
ImageView img = (ImageView)view.findViewById(R.id.imageView);
img.setImageResource(R.mipmap.ic_launcher);
return view;
}
4.3.這些步驟做完了之後，在主Fragment(TabInfoFragment)中對Tablayout中每一項Tab作如下設置即可:獲取到每一項Tab，然後給該Tab設置自定義布局調用tab.setCustomView()方法。
//設置自定義Tab--加入圖標的demo
for(int i=0;i<12;i++){
TabLayout.Tab tab =tab_layout.getTabAt(i);
tab.setCustomView(mPagerAdater.getTabView(i));
}
4.4.運行結果如下:
(五).最後總結
今天我們通過Android Design支持庫TabLayout組件實現了仿照網易新聞客戶端首頁的頁面滑動和頂部Tab效果。希望對大家有所幫助使用以前的方式雖然也可以顯示這樣的效果，不過技術在發展嘛，緊跟時代潮流吧~嘿嘿。
本次實例代碼因為比較多，重點核心代碼已經貼出來。不過實例注釋過的全部代碼已經上傳到Github項目中了。同時歡迎大家去Github站點進行clone或者fork浏覽整個開源快速開發框架項目~
