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包里的。