TabLayout 簡單使用。

先上效果圖

 

在使用TabLayout 之前需要導入design包。 我使用的是android studio 只要在build.gradle中加入

compile 'com.android.support:design:24.2.0' 即可。

一、首先看一下布局文件

<?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=".MainActivity">


    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:tabIndicatorColor="@color/white"
        app:tabSelectedTextColor="@color/red"
        app:tabTextColor="@color/white"
        >
    </android.support.design.widget.TabLayout  >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpage"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

</LinearLayout>

布局很簡單，一個是TabLayout用來顯示文字的，一個是ViewPage 用來真是頁面內容的

其中
　　app:tabIndicatorColor="@color/white" 　　　　// 選中項下面的標線顏色
　　app:tabSelectedTextColor="@color/red"　　　　// 選中時標題字體顏色
　　app:tabTextColor="@color/white"　　　　　　　 // 標題字體默認顏色

 

二、 我們看看 TabLayout 的適配器，很簡單

package lyf.com.tablayoutdemo;

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

import java.util.List;

/**
 * lyf on 2016/9/24.
 * Fragment 適配器
 */
public class TabAdapter extends FragmentPagerAdapter {

    //Fragment集合
    private List<Fragment> listFragment;
    //Tab名稱集合
    private List<String> listTitle;

    public TabAdapter(FragmentManager fm,List<Fragment> listF,List<String> listS) {
        super(fm);
        listFragment = listF;
        listTitle = listS;
    }

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

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

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

 

三、看看我們的主布局界面

package lyf.com.tablayoutdemo;


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

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


/**
 * FragmentActivity 應該導入 android.support.v4.app.Fragment包
 */
public class MainActivity extends FragmentActivity {

    private List<Fragment> fragmentList = new ArrayList<>();
    private List<String> titleList = new ArrayList<>();

    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tabLayout = (TabLayout) this.findViewById(R.id.tablayout);
        viewPager = (ViewPager) this.findViewById(R.id.viewpage);
        initControls();
    }

    private void initControls() {

        fragmentList.add(new OneFragment());
        fragmentList.add(new TwoFragment());
        fragmentList.add(new ThreeFragment());
        fragmentList.add(new FourFragment());

        titleList.add("推薦");
        titleList.add("視頻");
        titleList.add("熱點");
        titleList.add("娛樂");

        //添加標簽選項布局樣式
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(0)));
        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(1)));
        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(2)));
        tabLayout.addTab(tabLayout.newTab().setText(titleList.get(3)));

        //設置頁面選項
        TabAdapter tabAdapter = new TabAdapter(this.getSupportFragmentManager(), fragmentList, titleList);
        viewPager.setAdapter(tabAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }
}

這里面的Fragment 就不貼出來了，大家可以用來展示自己的Fragment。這樣我們的Demo 就結束了。

 

注意：包的引用 ViewPage和Fragment 都是引用 support.V4.app包里的。