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導航效果。