TabLayout實現頂部導航(一)

代碼地址以下：<br>http://www.demodashi.com/demo/14552.html

###前言 頂部導航欄，是咱們在開發中比較常見的一種顯示佈局，它的實現能夠有多種方式，那麼今天咱們就來說講 TabLayout 對它的實現 今天涉及的內容有：

1. 實現導航欄的幾種方式
2. 庫的導入
3. TabLayout的具體使用
4. 效果圖

####一.實現導航欄的幾種方式及解析 咱們在實現頂部導航的時候，能夠有多種選擇：

1. ViewPagerIndicator + Fragment + ViewPager
2. ActionBar + Fragment + ViewPager
3. 自定義一個View實現

基於第一種須要和activity的主題相結合，對activity主題的限制比較高，第二種 actionBar耦合也高，第三種自定義view會比較繁瑣。 因此今天咱們介紹TabLayout的使用 ####二.庫的導入 TabLayout是android中Material Design庫中控件，所以須要作如下庫導入：

//TabLayout
    compile 'com.android.support:design:27.1.1'
    compile 'com.android.support:support-v4:27.1.1'

####三.TabLayout的具體使用 #####3.1 先展現在mainActivity中的xml代碼 實現頂部導航，因此TabLayout要結合ViewPager使用，xml代碼以下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context="com.android.testdemo.main.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="0dp"
        android:layout_height="@dimen/dp_40"
        app:tabIndicatorColor="@color/green"
        app:layout_constraintEnd_toStartOf="@+id/button1"
        app:layout_constraintStart_toStartOf="parent"
        app:tabMode="scrollable">
    </android.support.design.widget.TabLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="測試"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints"/>


    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="5dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tablayout" />
</android.support.constraint.ConstraintLayout>

這裏須要注意的是 app:tabIndicatorColor="@color/green" 設置的是每一個item切換時下面短橫線的顏色，爲了適應導航欄中項目較多，能夠滑動顯示的需求，須要設置 app:tabMode="scrollable" #####3.2 展現Viewpager的適配器 使用到ViewPager，確定少不了其對應的適配器，如今給出TabFragmentAdapter類的代碼：

package com.android.testdemo.function;

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;

/**
 * Title:
 * Description:
 * <p>
 * Created by pei
 * Date: 2018/9/20
 */
public class TabFragmentAdapter extends FragmentPagerAdapter {

    private String[] mTitles;
    private Context mContext;
    private List<Fragment> mFragments;

    public TabFragmentAdapter(List<Fragment> fragments,String[] titles, FragmentManager fm, Context context) {
        super(fm);
        this.mContext = context;
        this.mFragments = fragments;
        this.mTitles = titles;
    }

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

    @Override
    public int getCount() {
        return mTitles.length;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mTitles[position];
    }
}

其中 getPageTitle(int position) 返回的是每一個頁面的導航標題。 #####3.3 ViewPager中須要加載的Fragment ViewPager滑動時會切換不一樣的Fragemnt，如今爲了簡潔展現起見，就讓加載同一個Fragment，而後展現不一樣的導航標題 下面給出MyFragment的代碼：

public class MyFragment extends AppFragment {

    @BindView(R.id.tv_name)
    TextView mTvName;

    private String mName;

    @Override
    public void onCreate(@Nullable Bundle bundle) {
        super.onCreate(bundle);
        if(getArguments()!=null){
            mName = getArguments().getString("text");
        }
    }

    @Override
    public int getContentViewId() {
        return R.layout.fragment_my;
    }

    @Override
    public void initData() {
         mTvName.setText(mName);
    }

    @Override
    public void setListener() {

    }

    @Override
    protected void onVisible(boolean isFirstTimeLoad) {

    }

    @Override
    protected void onInvisible() {

    }
}

其中 mName = getArguments().getString("text"); 用於接收並在fragment中展現導航標題 #####3.4 TabLayout在mainActivity的使用 在mainActivity中須要先聲明一個導航欄數組：

private String mTitles[] = {
            "上海", "頭條推薦", "生活", "娛樂八卦", "體育",
            "段子", "美食", "電影", "科技", "搞笑",
            "社會", "財經", "時尚", "汽車", "軍事",
            "小說", "育兒", "職場", "萌寵", "遊戲",
            "健康", "動漫", "互聯網"};

而後加載導航對應的fragment:

private List<Fragment> mFragments;

        mFragments = new ArrayList<>();

        for (int i = 0; i < mTitles.length; i++) {
            Fragment fragment = new MyFragment();
            Bundle bundle = new Bundle();
            bundle.putString("text", mTitles[i]);
            fragment.setArguments(bundle);
            mFragments.add(fragment);
        }

再次是加載fragment對應的adapter：

mTabFragmentAdapter = new TabFragmentAdapter(mFragments, mTitles, getSupportFragmentManager(), mContext);
//        mViewPager.setOffscreenPageLimit(mFragments.size());// 設置預加載Fragment個數
        mViewPager.setOffscreenPageLimit(6);// 設置預加載Fragment個數
        mViewPager.setAdapter(mTabFragmentAdapter);
        mViewPager.setCurrentItem(0);// 設置當前顯示標籤頁爲第一頁

最後再TabLayout綁定到ViewPager上，並設置TabLayout滑動選中和未選中時導航的文字顏色，在默認狀況下，導航條是與導航文字寬度一致的，爲了保持美觀，通常要設置導航條與兩邊的間隙，這時別忘了調用方法

public void reflex(final TabLayout tabLayout)

具體的demo中都有詳細介紹，這裏就不作大篇幅講解了。 ####四.項目結構圖和效果圖

項目結構圖以下

運行效果圖以下：

TabLayout實現頂部導航(一)

代碼地址以下：<br>http://www.demodashi.com/demo/14552.html

注：本文著做權歸做者，由demo大師代發，拒絕轉載，轉載須要做者受權