频道栏目
首页 > 程序开发 > 移动开发 > Android > 正文
Android Design支持库TabLayout打造仿网易新闻Tab标签效果(三十七)
2015-12-04 10:37:28         来源:专注移动开发,项目管理。jiangqqlmj  
收藏   我要投稿

 

(一).前言:

仿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浏览整个开源快速开发框架项目~

     

     

点击复制链接 与好友分享!回本站首页
上一篇:C语言:使用malloc开辟一个3*4的二维数组,并将内容初始化为1-12.
下一篇:最老程序员创业开发实训13---Android---网络请求与异步任务
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站