TabLayout实现底部顶部导航栏

准备步骤：
1、在build.gradle文件下依赖库
compile ‘com.android.support:design:24.2.1’
效果图：

实现步骤
1、编写布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@color/windows_background"    android:orientation="vertical"    tools:context="com.eno.activity.launch.MainActivity">    <!--标题栏-->    <include layout="@layout/title_bar"/>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="0dp"        android:layout_weight="1" />    <android.support.design.widget.TabLayout        android:id="@+id/tabLayout"        android:layout_width="match_parent"        android:layout_height="@dimen/height_large"        android:background="@drawable/tab_bg_top_border"        app:tabTextAppearance="@style/tabtextstyle"        style="@style/CustomTab"        app:tabGravity="fill" /></LinearLayout>

style文件下的CustomTab

<resources>    <!--布局样式-->    <!--主页底部导航-->    <style name="CustomTab" parent="Widget.Design.TabLayout" >        <item name="tabTextColor">@color/text_color_black</item>        <item name="tabSelectedTextColor">@color/text_color_blue</item>        <item name="tabIndicatorHeight">0dp</item>    </style><style name="tabtextstyle">        <item name="android:textSize">@dimen/tabtextsize</item>    </style></resources>

tab的背景颜色添加了顶部的一条分割线在drawable文件下的tab_bg_top_border.xml

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <!-- 连框颜色值 -->    <item>        <shape>            <solid android:color="@color/view_background_gray" />        </shape>    </item>    <!-- 主体背景颜色值 -->    <item        android:top="1dp">        <!--边框里面背景颜色 白色-->        <shape>            <solid android:color="@color/view_background_white" />        </shape>    </item></layer-list>

布局写完了，下面编写主体代码
MainActivity.java

public class MainActivity extends BaseActivity {    @BindView(R.id.tv_topTitle)    TextView tv_topTitle;    @BindView(R.id.viewpager)    ViewPager mViewpager;    @BindView(R.id.tabLayout)    TabLayout mTabLayout;    private ViewPagerFragmentPagerAdapter adapter;    //tab文字    private final int[] TAB_TITLES = {R.string.home, R.string.market, R.string.trade, R.string.news, R.string.mine};    //Tab 图片选择器    private final int[] TAB_IMGS = new int[]{R.drawable.tab_home_drawable_selector, R.drawable.tab_market_drawable_selector, R.drawable.tab_trade_drawable_selector, R.drawable.tab_news_drawable_selector, R.drawable.tab_mine_drawable_selector};    //Fragment 数组    private final Fragment[] TAB_FRAGMENTS = new Fragment[]{FragmentMainHome.newInstance(), FragmentMainMarket.newInstance(), FragmentMainTrade.newInstance(), FragmentMainNews.newInstance(), FragmentMainMine.newInstance()};    @Override    protected void onCreate(Bundle savedInstanceState) {        setContentView(R.layout.activity_main);        super.onCreate(savedInstanceState);        ButterKnife.bind(this);        setTabs(mTabLayout, this.getLayoutInflater(), TAB_TITLES, TAB_IMGS);        //设置viewpager的适配器        adapter = new ViewPagerFragmentPagerAdapter(getSupportFragmentManager(), TAB_FRAGMENTS);        mViewpager.setAdapter(adapter);        mViewpager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));        mTabLayout.addOnTabSelectedListener(new MyOnTabSelectedListener(mViewpager,tv_topTitle));        //默认选中第一项        mViewpager.setCurrentItem(0);        tv_topTitle.setText(TAB_TITLES[0]);    }    /**     * 设置添加Tab     */    private void setTabs(TabLayout tabLayout, LayoutInflater inflater, int[] tabTitlees, int[] tabImgs) {        for (int i = 0; i < tabImgs.length; i++) {            TabLayout.Tab tab = tabLayout.newTab().setText(tabTitlees[i]);            View view = inflater.inflate(R.layout.tab_custom, null);            tab.setCustomView(view);            TextView tvTitle = (TextView) view.findViewById(R.id.tv_tab);            tvTitle.setText(tabTitlees[i]);            ImageView imgTab = (ImageView) view.findViewById(R.id.img_tab);            imgTab.setImageResource(tabImgs[i]);            tabLayout.addTab(tab);        }    }}

以上是底部导航栏结束。

下面讲解顶部导航栏的实现
效果图：
布局：fragment_main_market.xml
同样的是一个tablayout+viewpager

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    tools:context="com.eno.fragment.market.FragmentMainMarket">    <android.support.design.widget.TabLayout        android:id="@+id/tabLayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@android:color/holo_blue_bright"        app:tabIndicatorColor="@android:color/background_dark"        app:tabSelectedTextColor="@android:color/background_dark"        app:tabTextColor="@android:color/white" />    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent"/></LinearLayout>

主体代码的实现步骤：
一.初始化数据
1.数据适配器

ViewPagerFragmentListPagerAdapter adapter;//设置ViewPager的适配器        adapter = new ViewPagerFragmentListPagerAdapter(getFragmentManager(),fragments);

2.准备数据

ArrayList<MyFragment> fragments; //初始化数据 fragments = new ArrayList<>(); for (int i=0;i<12;i++){     fragments.add(new MyFragment("标题"+i,"内容"+i)); }

3.给viewpager设置数据适配器

viewPager.setAdapter(adapter);

二.关联viewpager

//关联ViewPagertabLayout.setupWithViewPager(viewPager);

三.设置导航条tab模式

//设置固定的//tabLayout.setTabMode(TabLayout.MODE_FIXED);tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

数据适配器ViewPagerFragmentListPagerAdapter.java

public class ViewPagerFragmentListPagerAdapter extends FragmentPagerAdapter {    private final ArrayList<MyFragment> fragments;    public ViewPagerFragmentListPagerAdapter(FragmentManager fm, ArrayList<MyFragment> fragments) {        super(fm);        this.fragments = fragments;    }    /**     * 根据位置返回对应的Fragment     * @param position     * @return     */    @Override    public Fragment getItem(int position) {        return fragments.get(position);    }    @Override    public int getCount() {        return fragments.size();    }    /**     * 得到页面的标题     * @param position     * @return     */    @Override    public CharSequence getPageTitle(int position) {        return fragments.get(position).getTitle();    }}

FragmentMainMarket.java

public class FragmentMainMarket extends BaseFragment {    @BindView(R.id.tabLayout)    TabLayout tabLayout;    @BindView(R.id.viewPager)    ViewPager viewPager;    private ArrayList<MyFragment> fragments;    private ViewPagerFragmentListPagerAdapter adapter;    public static FragmentMainMarket newInstance() {        FragmentMainMarket f = new FragmentMainMarket();        return f;    }    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_main_market, container, false);        ButterKnife.bind(this, view);        //初始化数据        fragments = new ArrayList<>();        for (int i=0;i<12;i++){            fragments.add(new MyFragment("标题"+i,"内容"+i));        }        //设置ViewPager的适配器        adapter = new ViewPagerFragmentListPagerAdapter(getFragmentManager(),fragments);        viewPager.setAdapter(adapter);        //关联ViewPager        tabLayout.setupWithViewPager(viewPager);        //设置固定的        //tabLayout.setTabMode(TabLayout.MODE_FIXED);        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);        return view;    }    @Override    public void fetchData() {        /**在这里请求网络 */    }}