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