android.support.design.widget.TabLayout 使用

最近入职新公司，看到项目Tab标签用的是  Android Design Support Library 中的TabLayout 以前也没用过~趁机学习一波。

先来看看效果：

首先sdk的版本必须是22，要想使用这个控件，你必须下载或更新sdk的版本，你要更新的22也就是5.1的版本，才会有这个控件的出现。

一.对应的项目gradle下引入

compile 'com.android.support:design:23.4.0'

二.先来看看TabLayout的各个属性：

⒈app:tabIndicatorColor：下划线的颜色。

⒉app:tabSelectedTextColor：选中菜单项后字体的颜色。

⒊app:tabTextColor：未选中是的字体颜色

⒋app:tabMode：取值有两个属性，TabLayout.MODE_FIXED与TabLayout.MODE_SCROLLABLE

TabLayout.MODE_FIXED：固定的选项卡，在选项卡较少的情况下使用（选项卡的总宽度和不会大于屏幕宽,不然就是被挤压）

                TabLayout.MODE_SCROLLABLE:在未确定选项卡数量的情况下使用，不会被挤压，同时屏幕外的选项卡需要滑动才能显示。

⒌app:tabGravity：两个值，fill与center。

center：在选项卡较少的情况下使用，居中。

fill ：选项卡较多情况下使用，填充。

⒍app:tabContentStart：控件对于左边的距离，可看成marginLeft;

⒎app:tabBackground：选项卡的背景色，不设置的情况其颜色与标题栏一样。

⒏app:tabIndicatorHeight：下划线的高度

⒐app:tabMaxWidth：选项卡的最大宽度

⒑app:tabMinWidth：选项卡的最小宽度

⒒app:tabTextAppearance：使用该属性设置样式可以为标签的头部设置图片。当你在viewpager适配器中getPagerTitle中设置了图片，如果不设置TextAppearance.Design.Tab中textAllCaps设置为false。图片是不会显示的。

⒓app:tabPadding：于padding一样。

三. 看看布局中如何使用

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.mytablayout.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@android:color/white"
        app:tabContentStart="0dp"
        app:tabGravity="center"
        app:tabIndicatorColor="#ad2d2fda"
        app:tabIndicatorHeight="3dp"
        app:tabMaxWidth="100dp"
        app:tabMinWidth="50dp"
        app:tabMode="scrollable"
        app:tabSelectedTextColor="#4360df"
        app:tabTextColor="#FF000000"/>

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

1.TabLayout+ViewPager+Fragment 官方标配。

下面是Activity中的代码

package com.example.mytablayout;


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


import com.example.mytablayout.adapter.YrbFragmentAdapter;
import com.example.mytablayout.fragment.BaseFragment;
import com.example.mytablayout.fragment.YrbFragment;

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

public class MainActivity extends AppCompatActivity {
    private List<String> mStrings = new ArrayList<>();
    private List<BaseFragment> mFragments = new ArrayList<>();
    private ViewPager mPager;
    private TabLayout mTabLayout;
    private YrbFragmentAdapter mYrbFragmentAdapter;

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

private void initView() {
    mTabLayout = (TabLayout) findViewById(R.id.tablayout);
    mPager = (ViewPager) findViewById(R.id.pager);
}

private void initData() {

    mStrings.add("首页");
    mStrings.add("新闻");
    mStrings.add("游戏");
    mStrings.add("ANDROID");
    mStrings.add("IOS");
    mStrings.add("PHP");
    mStrings.add("视频");
    mStrings.add("个人");
    for (int i = 0; i < mStrings.size(); i++) {
        mFragments.add(new YrbFragment(mStrings.get(i), i));
        mTabLayout.addTab(this.mTabLayout.newTab().setText(mStrings.get(i)));
    }
    mYrbFragmentAdapter = new YrbFragmentAdapter(getSupportFragmentManager());
    mYrbFragmentAdapter.setFragments(mFragments);
    mYrbFragmentAdapter.setTitles(mStrings);
}

private void initEvent() {
    mPager.setAdapter(mYrbFragmentAdapter);//设置ViewPager的Adapter
    mTabLayout.setupWithViewPager(mPager);//TabLayout绑定ViewPager
    mTabLayout.setTabsFromPagerAdapter(mYrbFragmentAdapter);//TabLayout的标签从Adapter中获取
}

 
 

  
  

 
 

前面两段呢，都是常规的查找控件~和设置假数据。

关键在于  initEvent();中的三行代码

四：Adapter的代码

package com.example.mytablayout.adapter;

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

import android.support.v4.app.FragmentStatePagerAdapter;

import com.example.mytablayout.fragment.BaseFragment;

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

/**
 * Created by Administrator on 2017/1/10.
 */

public class YrbFragmentAdapter extends FragmentStatePagerAdapter {
    private List<BaseFragment> mBaseFragments;
    private List<String> titles;

    public YrbFragmentAdapter(FragmentManager fm) {
        super(fm);
        this.mBaseFragments=new ArrayList<>();
        this.titles = new ArrayList<>();
    }

    public void setFragments(List<BaseFragment> fragments) {
        if (fragments != null) {
            mBaseFragments.addAll(fragments);
            notifyDataSetChanged();
        }
    }

    public void setTitles(List<String> titles) {
        if (titles != null) {
            this.titles.addAll(titles);
            notifyDataSetChanged();
        }
    }

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return this.titles.get(position);
    }
}

这里我使用的Adapter继承的是FragmentStatePagerAdapter，而不是FragmentPagerAdapter,两者的区别请自行百度。