TabLayout基本使用

前言

Tablayout繼承自HorizontalScrollView，可以用作頂部標簽效果、底部導航欄效果。一般多與ViewPager一起使用。

想直接了解如何實現短下滑效果的請看：TabLayout的高級用法

首先上幾個效果圖。

圖：

使用方法

下面我們來看如何使用，

第一步，先在gradle引入支持包

implementation 'com.android.support:design:26.0.0'

第二步，在布局文件中添加布局

<android.support.design.widget.TabLayout
        android:id="@+id/tab_normal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorHeight="2dp"
        app:tabMode="fixed"
        app:tabIndicatorColor="#0a0"
        app:tabTextColor="#bbb"
        app:tabSelectedTextColor="#0a0"
        />

屬性解釋：

tabIndicatorHeight：這里是設置標簽橫線的高度，如果不需要橫線，可以設置為0dp
tabIndicatorColor：是用來設置標簽被選中時，顯示的顏色的。
tabTextColor：標簽顯示的默認顏色
tabSelectedTextColor：標簽被選中的時候的顏色
tabMode：這個屬性有兩個取值，一個是fixed，不管tab標簽字多字少，平分當前tablayout寬度的空間大小。一般最多折兩行，還顯示不開的部分，用省略號代替。
　　　　　　　　　　　　　　另一個是scrollable，從左到右依次顯示標簽，顯示不開的，可以滾動顯示

圖

上代碼

java代碼：

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.design.widget.TabLayout;
import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.tab_normal)
    TabLayout tabNormal;
    @BindView(R.id.tab_icon)
    TabLayout tabIcon;
    @BindView(R.id.tab_more)
    TabLayout tabMore;
    @BindView(R.id.tab_customer)
    TabLayout tabCustomer;
    @BindView(R.id.vp_all)
    ViewPager vpAll;

    List<PageFragment> fgList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);//此處是用的是butterKnife框架，等同於findviewbyid獲取各個控件。
        initViewPager();
        initTabNormal();
    }

    /**
     * 初始化ViewPager，方便后期與tabLayout關聯
     */
    private void initViewPager() {
        fgList = new ArrayList<>();
        for (int i = 0; i < 4; i++) {
            fgList.add(PageFragment.newInstance("我是標題"+i,"我是內容欄目"+i));
        }
        vpAll.setAdapter(new ViewPagerAdapter(getSupportFragmentManager(), fgList) );
    }

    /**
     * 初始化頂部標簽
     */
    private void initTabNormal() {
        tabNormal.setupWithViewPager(vpAll);
    }

    /**
     * ViewPager的適配器。
     */
    class ViewPagerAdapter extends FragmentPagerAdapter{

        List<PageFragment> fragmentList;
        public ViewPagerAdapter(FragmentManager fm, List<PageFragment> fragmentList) {
            super(fm);
            this.fragmentList=fragmentList;
        }

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

        @Override
        public int getCount() {
            return fragmentList.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return fragmentList.get(position).getTitle();
        }
    }
}

fragment代碼，fragment的布局文件，就一個ID為tv_content的textview，此處就不在貼代碼了。

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.Unbinder;

public class PageFragment extends Fragment {
    String title, content;
    @BindView(R.id.tv_content)
    TextView tvContent;
    Unbinder unbinder;

    public PageFragment() {
    }

    public static PageFragment newInstance(String title, String content) {
        PageFragment fragment = new PageFragment();
        fragment.title = title;
        fragment.content = content;
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_page, container, false);
        unbinder = ButterKnife.bind(this, view);
        tvContent.setText(content);
        return view;
    }

    public String getTitle() {
        return title;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }
}

通過tabLayout方法的setupWithViewPager()方法綁定ViewPager控件的。tab標簽獲取顯示文字，是通過FragmentPagerAdapter的getPageTitle（）方法。所以需要對FragmentPagerAdapter的getPageTitle方法進行重寫。

然而，原生控件有很多的呆笨性。比如很多的UI和場景需求都是要求文字下面的短線是一個小於文字的固定值。再比如我們說的作為底部導航欄，如果直接設置tab的icon,會出現icon變形等問題。

所以我這里給一個終極的解決辦法。tab想做成什么樣子，就做成什么樣子。完全自定義。

傳送門：TabLayout的高級用法，自定義TabLayout