Android Design支援庫TabLayout打造仿網易新聞Tab標籤效果(三十七)

Android Design支援庫TabLayout打造仿網易新聞Tab標籤效果(三十七)

 

(一).前言:

仿36Kr用戶端開發過程中，因為他們網站上面的新聞文章分類比較多，所以我這邊還是打算模仿網易新聞APP的主介面新聞標籤Tab以及頁面滑動效果來進行實現。要實現的頂部的Tab標籤的效果有很多方法例如採用開源項目ViewPagerIndicator中的TabPageIndicator就可以實現。不過我們今天不講ViewPagerIndicator,我們來講一下Google今年發布的TabLayout組件。在2015年的Google大會上，google發布的新的Android Support Design庫，裡面也包含了幾個新的控制項，那麼TabLayout就是其中一個。使用該組件我們可以很輕鬆的實現TabPageIndicator效果，並且該為官方的，可以向下相容很多版本而且可以更加統一Material Design效果。不過查看TabLayout的源碼發現該組件也是繼承自HorizontalScrollView實現。

使用HorizontalScrollView打造仿網易tab標籤效果,點擊進入...

本例子具體代碼已經上傳到下面的項目中，歡迎各位去star和fork一下。

 

(二).使用方式:

2.1.我這邊的項目採用Android Studio進行開發的，所以首先要引入TabLayout的依賴庫,如下:

 

compile'com.android.support:design:23.1.1'compile'com.android.support:appcompat-v7:23.1.1'

 

(三).效果實現:

我們現在需要仿照網易新聞(36Kr用戶端)的Tab標籤切換以及底部新聞頁面切換的效果。Tab標籤實現採用TabLayout組件，底部頁面切換採用Fragment+ViewPager+FragmentStatePagerAdapter實現。

[注]:承載Fragment的Activity這邊就不講解了，具體可以看上一篇文章和本項目的代碼即可。那我們直接從Fragment開始講起。

3.1.首先我們需要給Fragment建立一個布局檔案如下:

 

 

該布局主要為兩個控制項:第一部分為TableLayout組件該為Tab標籤的容器，第二部分為ViewPager組件主要用於顯示若干個Fragment進行頁面切換。大家在TabLayout組件中應該已經注意到了三個自訂屬性如下:

 

app:tabIndicatorColor=@color/white                 // 下方滾動的底線顏色 app:tabSelectedTextColor=@color/gray               // tab被選中後，文字的顏色 app:tabTextColor=@color/white                      // tab預設的文字顏色 

 

這三個自訂屬性是TabLayout提供的，我們可以任意修改標題顏色以及指標的顏色，除此之外還提供了以下一些風格設定方法:

• tabMaxWidth
• tabIndicatorColor
• tabIndicatorHeight
• tabPaddingStart
• tabPaddingEnd
• tabBackground
• tabTextAppearance
• 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 * 郵箱：jiangqqlmj@163.com * 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瀏覽整個開源快速開發架構項目~