Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android Design支持庫TabLayout打造仿網易新聞Tab標簽效果(三十七)

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

編輯:關於Android編程

 

(一).前言:

仿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
     * 郵箱:[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浏覽整個開源快速開發框架項目~

     

     

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved