android M 新控件TabLayout 方便快捷實現選項卡功能

1、概述

TabLayout是在2015年的google大會上，google發布了新的Android Support Design庫的新組件之一，以此來全面支持Material Design

設計風格的UI效果，為了可以使用這些新穎MD組件首先必須要在Android Studio的SDK的EXTRA支持庫安裝Android Support Library支持庫，如下所示

該組件在design庫中因此還需要在AS中添加依賴庫

FILE——project struct

右鍵app選擇Library dependancy

 

選擇design庫

然後AS會自動幫我們在APP的build.gradle文件下添加依賴如下圖，由於

TabLayout配合V ierPager，因此還需要導入viewerpager的依賴庫 support-v4包，（就是上圖的正數第二個庫）

到此，准備工作已經搞定！

本例主要通過tablayout實現選項卡切換功能，這裡實現了一個框架，比較簡單，效果圖如下，可以直接拿去加點擴展使用

2. 使用過程

首先要在布局文件中引入Tablayout和viewpager，然後在Activity通過adapter聯動 vierpager，內部每個頁面通常是個fragment

2.1 布局文件

引入倆個組件，

常用屬性如下（需要引入xmlns:app=http://schemas.android.com/apk/res-auto ）
app:tabSelectedTextColor：Tab被選中字體的顏色
app:tabTextColor：Tab未被選中字體的顏色
app:tabIndicatorColor：Tab指示器下標的顏色

 

 

2.2、每個vierpager對應各自的fragment

這裡是倆個選項卡，因此實現倆個fragment，省略下面有整個demo代碼

2.3、viewPager+fragment 與Tablayout的聯動

一般TabLayout都是和ViewPager共同使用才發揮它的優勢

 

package com.elvis.tablayout_demo;

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

import com.elvis.tablayout_demo.fragment.FragmenthotRec;
import com.elvis.tablayout_demo.fragment.Fragmenthotpot;

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

public class MainActivity extends AppCompatActivity {
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private List list_fragment;
    private Fragmenthotpot mHotpot;
    private FragmenthotRec mHotRec;
    //tablayout的標題
    private String[] mTitles = new String[]{今日熱點,熱門推薦};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }

    private void initViews() {
        mTabLayout = (TabLayout) findViewById(R.id.id_tablayout);
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
        mHotpot = new Fragmenthotpot();
        mHotRec = new FragmenthotRec();
        list_fragment = new ArrayList<>();
        list_fragment.add(mHotpot);
        list_fragment.add(mHotRec);
        /*viewPager通過適配器與fragment關聯*/

        mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return list_fragment.get(position);
            }

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

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitles[position];
            }
        });
        //TabLayout和ViewPager的關聯
        mTabLayout.setupWithViewPager(mViewPager);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

這裡Tablayout很多屬性在xml文件設置了，在代碼中也可通過其方法自己設置，常用方法如下
- addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加選項卡到 layout 中
- addTab(TabLayout.Tab tab, boolean setSelected) 同上
- addTab(TabLayout.Tab tab) 同上
- getTabAt(int index) 得到選項卡
- getTabCount() 得到選項卡的總個數
- getTabGravity() 得到 tab 的 Gravity
- getTabMode() 得到 tab 的模式
- getTabTextColors() 得到 tab 中文本的顏色
- newTab() 新建個 tab
- removeAllTabs() 移除所有的 tab
- removeTab(TabLayout.Tab tab) 移除指定的 tab
- removeTabAt(int position) 移除指定位置的 tab
- setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 為每個 tab 增加選擇監聽器
- setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 設置滾動位置
- setTabGravity(int gravity) 設置 Gravity
- setTabMode(int mode) 設置 Mode,有兩種值：TabLayout.MODE_SCROLLABLE和TabLayout.MODE_FIXED分別表示當tab的內容超過屏幕寬度是否支持橫向水平滑動，第一種支持滑動，第二種不支持，默認不支持水平滑動。
- setTabTextColors(ColorStateList textColor) 設置 tab 中文本的顏色
- setTabTextColors(int normalColor, int selectedColor) 設置 tab 中文本的顏色 默認 選中
- setTabsFromPagerAdapter(PagerAdapter adapter) 設置 PagerAdapter
- setupWithViewPager(ViewPager viewPager) 和 ViewPager 聯動