TabLayout实现仿今日头条顶部tab导航效果

今日头条的顶部tab导航效果的实现，我们一般会用RadioGroup+Fragment+ViewPager来实现，适配器繁多，代码量大，今天我们来介绍TabLayout的使用。TabLayout为Android的Design库中的一个控件。首先我们来看一下运行的效果图：

源码demo下载：http://download.csdn.net/detail/qq_30000411/9693921
整体的思路为，TabLayout+ViewPager来实现效果的布局
接下来我们看一下源码的具体实现：

主界面的XML布局为：TabLayout+ViewPager

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns: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"
    android:background="#ffffff">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="49dp"
        android:background="@mipmap/search_background"/>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:background="#eeeeee">

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout_shouye"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            app:tabMode="scrollable"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="@color/radiobuttonzhong">

        </android.support.design.widget.TabLayout>

    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_ShouYe"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

</LinearLayout>

紧着我们来实现TabLayout的适配器的代码实现：

package com.xyliwp.tablayoutdemo;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by lwp940118 on 2016/11/25.
 */
public class TabFragmentShouYeAdapter extends FragmentPagerAdapter {
    private Context context;
    private List<Fragment> fragments;
    private List<String> strings;
    public TabFragmentShouYeAdapter(List<Fragment> fragments, List<String> strings, FragmentManager fragmentManager, Context context){
        super(fragmentManager);
        this.strings = strings;
        this.context = context;
        this.fragments = fragments;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return strings.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return strings.get(position);
    }
}

然后就是MainActivity的代码实现：

package com.xyliwp.tablayoutdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;

import java.util.ArrayList;
import java.util.List;
import android.support.design.widget.TabLayout;
import android.widget.RadioGroup;

public class MainActivity extends FragmentActivity {


    private TabLayout tabLayout_shouye;
    private ViewPager viewPager_shouye;
    private List<String> strings = new ArrayList<String>();;
    private List<Fragment> fragments = new ArrayList<Fragment>();;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initdate();
        initView();
    }

    private void initView(){
        tabLayout_shouye = (TabLayout)findViewById(R.id.tablayout_shouye);
        viewPager_shouye = (ViewPager)findViewById(R.id.viewpager_ShouYe);
        viewPager_shouye.setAdapter(new TabFragmentShouYeAdapter(fragments,strings,
                getSupportFragmentManager(),this));
        tabLayout_shouye.setupWithViewPager(viewPager_shouye);
        tabLayout_shouye.setTabTextColors(getResources().getColor(R.color.radiobutton)
                ,getResources().getColor(R.color.radiobuttonzhong));
    }

    private void initdate(){
        Fragment1 fragment1 = new Fragment1();
        fragments.add(fragment1);
        strings.add("推荐");
        Fragement2 fragment2 = new Fragement2();
        fragments.add(fragment2);
        strings.add("热点");

        Fragement3 fragment3 = new Fragement3();
        fragments.add(fragment3);
        strings.add("视频");
        Fragment4 fragment4 = new Fragment4();
        fragments.add(fragment4);
        strings.add("西安");
        Fragment5 fragment5 = new Fragment5();
        fragments.add(fragment5);
        strings.add("社会");
        Fragment6 fragment6 = new Fragment6();
        fragments.add(fragment6);
        strings.add("娱乐");
        Fragment7 fragment7 = new Fragment7();
        fragments.add(fragment7);
        strings.add("图片");
    }

}

其中ViewPager中加入的是Fragment，7个Fragment的实现可以参照一个Fragment来实现。Fragment及其XML的代码为：

package com.xyliwp.tablayoutdemo;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by lwp940118 on 2016/11/25.
 */
public class Fragment1 extends Fragment {

    private View rootView;

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        rootView = (View) inflater.inflate(R.layout.fragement1, container, false);

        return rootView;
    }
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="24sp"
        android:gravity="center"
        android:text="推荐"/>

</LinearLayout>

代码及其简单这样就完成了今日头条顶部tab导航效果。