Android使用TabLayout、ViewPage和Fragment实现导航条的效果

1.TabLayout简介：

TabLayout来自design兼容包，从源码来看其继承HorizontalScrollView。在使用的过程中需添加依赖，Android studio添加依赖如下：

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.2.0'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:25.2.0'
}

2.接下来看主要的代码

Activity的布局文件如下：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.zhoujp.tablayoutviewpage.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/colorAccent"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="@color/colorAccent"
        app:tabTextColor="@color/colorPrimaryDark" />

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

这是导航栏在头部的布局方式，通过tabMode可以设置Tab是否滑动，目前是支持滑动的模式，如果不需要支持滑动，只需将tabMode的值设为fixed即可。

Activity中代码，创建每个Tab对应的Fragment，因为ViewPage是v4包下的控件，故在创建Fragment是需继承V4包下的Fragment，Fragment的数量要和Tab标题的数量要保持一致。

package com.zhoujp.tablayoutviewpage;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private TabLayout m_tab_main;
    private ViewPager m_vp_main;
    private List<Fragment> m_fragment=new ArrayList<>();
    private List<String> m_title=new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        ViewPageFragAdapter adapter=new ViewPageFragAdapter(getSupportFragmentManager(),m_title,m_fragment);
        m_vp_main.setAdapter(adapter);
        //为TabLayout设置ViewPager
        m_tab_main.setupWithViewPager(m_vp_main,true);

    }

    private void initView() {
        m_tab_main= (TabLayout) findViewById(R.id.tab_main);
        m_vp_main= (ViewPager) findViewById(R.id.vp_main);
        m_fragment.add(new TabOneFragment());
        m_fragment.add(new TabTwoFragment());
        m_fragment.add(new TabThreeFragment());
        m_fragment.add(new TabFourFragment());
        m_fragment.add(new TabFiveFragment());
        m_fragment.add(new TabSixFragment());

        m_title.add("热门新闻");
        m_title.add("热门推荐");
        m_title.add("热门娱乐");
        m_title.add("本月热榜");
        m_title.add("本周热榜");
        m_title.add("今日热播");

    }
}

ViewPageFragAdapter中代码：

package com.zhoujp.tablayoutviewpage;

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

import java.util.List;

/**
 * Created by Administrator on 2017/3/14.
 * 适配器
 */

public class ViewPageFragAdapter extends FragmentPagerAdapter {
    private List<String> title;
    private List<Fragment> views;

    public ViewPageFragAdapter(FragmentManager fm, List<String> title, List<Fragment> views) {
        super(fm);
        this.title=title;
        this.views=views;
    }

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

    @Override
    public int getCount() {
        return views!=null?views.size():0;
    }
    //设置标题
    @Override
    public CharSequence getPageTitle(int position) {
        return title.get(position);
    }
}

以上代码是实现效果的主要代码。

效果静态图：