【FastDev4Android框架开发】Android Design支持库TabLayout打造仿网易新闻Tab标签效果(三十七)

转载请标明出处：

http://blog.csdn.net/developer_jiangqq/article/details/50158985

本文出自:【江清清的博客】

(一).前言:

仿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一下。

FastDev4Android框架项目地址:https://github.com/jiangqqlmj/FastDev4Android

(二).使用方式:

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创建一个布局文件如下:

<?xmlversion="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"android:layout_width="match_parent"
   android:layout_height="match_parent">
    <!--顶部tab标签容器-->
    <android.support.design.widget.TabLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
        android:id="@+id/tab_layout"
       android:background="@color/white"
       app:tabIndicatorColor="@color/color_selected"
       app:tabSelectedTextColor="@color/color_selected"
       app:tabTextColor="@color/color_unselected"

       ></android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
       android:id="@+id/info_viewpager"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
        />
</LinearLayout>

该布局主要为两个控件:第一部分为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<Fragment> 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<Fragment> getFragments(){
        return fragments;
    }
    public void setFragments(List<Fragment> 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<Fragment> 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每一项我们需要定义一个布局文件:

<?xmlversion="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
    android:orientation="vertical"
    >
    <ImageView
       android:src="@mipmap/ic_launcher"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:id="@+id/imageView"
       android:layout_gravity="center_horizontal"
        />
    <TextView
        android:text="Item 01"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        android:id="@+id/textView"
       android:layout_gravity="center_horizontal"
        />
</LinearLayout>

该布局文件很简单，上下布局图标和标题

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

https://github.com/jiangqqlmj/FastDev4Android

尊重原创，转载请注明：From Sky丶清（http://blog.csdn.net/developer_jiangqq） 侵权必究！

关注我的微博，可以获得更多精彩内容

时间： 2024-12-23 14:06:21

【FastDev4Android框架开发】Android Design支持库TabLayout打造仿网易新闻Tab标签效果(三十七)的相关文章

Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻clientTab标签

之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻clientTab标签的功能,ActionBarSherlock是在3.0下面的机器支持ActionBar的功能,有兴趣的能够看看开源框架ActionBarSherlock 和 ViewPager 仿网易新闻client,今天用到的是JakeWharton的还有一开源控件ViewPageIndicator.ViewPager想必大家都知道,Indicator指示器的意思,所以ViewPag

【FastDev4Android框架开发】RecyclerView完全解析之打造新版类Gallery效果(二十九)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49946589 本文出自:[江清清的博客] (一).前言: 话说RecyclerView已经面市很久,也在很多应用中得到广泛的使用,在整个开发者圈子里面也拥有很不错的口碑,那说明RecyclerView拥有比ListView,GridView之类控件有很多的优点,例如:数据绑定,Item View创建,View的回收以及重用等机制.本系列文章会包括到以下三个部分: R

【FastDev4Android框架开发】RecyclerView完全解析之下拉刷新与上拉加载SwipeRefreshLayout(三十一)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49992269 本文出自:[江清清的博客] (一).前言: [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 话说RecyclerView已经面市很久,也在很多应用中得到广泛的使用,在整个开发者圈子里面也拥有很不错的口碑,那说明RecyclerView拥有比ListView,GridVi

Android 测试支持库介绍

测试支持库 Android的测试支持库为测试Android应用提供了大量框架.该库提供了一组API快速构建和运行测试代码,包括JUnit4和功能用户界面(UI)测试.可以从Android Studio IDE中或命令行这执行. Android的测试支持库可通过Android SDK管理器获取. 测试支持库特性 AndroidJUnitRunner:兼容JUnit 4测试运行器. Espresso:UI测试框架;适合在单个应用的功能UI测试. UI Automator:UI测试框架;适用于跨应用的

【FastDev4Android框架开发】HorizontalScrollView,Fragment,FragmentStatePagerAdapter打造网易新闻Tab及滑动页面效果(三十六)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50145759 本文出自:[江清清的博客] (一).前言: 仿36Kr客户端开发过程中,因为他们网站上面的新闻文章分类比较多,所以我这边还是打算模仿网易新闻APP的主界面新闻标签Tab以及页面滑动效果来进行实现.要实现的顶部的Tab标签的效果有很多方法例如采用开源项目ViewPagerIndicator中的TabPageIndicator就可以实现,不过查看了源码发现

Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻客户端Tab标签的功能,ActionBarSherlock是在3.0以下的机器支持ActionBar的功能,有兴趣的可以看看开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端,今天用到的是JakeWharton的另一开源控件ViewPageIndicator,ViewPager想必大家都知道,Indicator指示器的意思,所以ViewPageIndica

Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端

转载请注明出处:http://blog.csdn.net/xiaanming/article/details/9971721 大家都知道Android的ActionBar是在3.0以上才有的,那么在3.0以下呢,google并没有给我提供在3.0以下支持ActionBar的包,但是外国的大牛JakeWharton实现了在3.0以下使用ActionBar, JakeWharton这位大牛是ActionBarSherlock,Android-ViewPagerIndicator ,NineOldAn

Android应用经典主界面框架之二:仿网易新闻客户端、CSDN 客户端 (Fragment ViewPager)

第二种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表,使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View,而是Fragment.所以适配器不能继承PagerAdapter,而要继承FragmentPagerAdapter,这是在android.support.v4.app.FragmentPagerAdapter包里的.有点奇葩的是,FragmentPagerAdapter只在这个包里有,在android.app.*这个包下面么

Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)

另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所以适配器不能继承PagerAdapter,而要继承FragmentPagerAdapter,这是在android.support.v4.app.FragmentPagerAdapter包里的.有点奇葩的是,FragmentPagerAdapter仅仅在这个包里有,在android.app.*这个包以