Android TabLayout的使用

效果如上，可点击翻页和滑动翻页，当前页面标签变色。

布局文件

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context="com.zhang.tablelayoutdemo.MainActivity">

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

    <!--可能需要在Module setting 中引入com.android.support:design库-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.05"
        app:tabIndicatorColor="@android:color/transparent" />
    <!--去掉标签栏下方的颜色-->
</LinearLayout>

自定义TabLayout布局

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center_vertical" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center_vertical"
        android:textColor="@drawable/tab_text_color" />
        <!--自定义字体颜色-->
</LinearLayout>

标签的图片和字体在选中时会变色，这里需要用xml文件配置一下

 

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:drawable="@drawable/note1" />
    <item android:drawable="@drawable/note2"/>
</selector>

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_selected="true" android:color="#0000CD" />
    <item android:color= "#000000"/>

</selector>

ViewPager适配器

 

 

package com.zhang.tablelayoutdemo;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Mr.Z on 2016/8/29 0029.
 */
public class ViewPagerAdapter extends FragmentPagerAdapter {

    private Context context;

    private int[] imgId = {
            R.drawable.note,
            R.drawable.note,
            R.drawable.note
    };

    public ViewPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    public View getTableView(int position) {
        View tableView = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) tableView.findViewById(R.id.tv);
        tv.setText(getPageTitle(position));
        ImageView img = (ImageView) tableView.findViewById(R.id.image);
        img.setImageResource(imgId[position]);
        return tableView;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position){
            case 0:
                return new FragmentOne();
            case 1:
                return new FragmentTwo();
            case 2:
                return new FragmentThree();
        }
        return null;
    }

    @Override
    public int getCount() {
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position){
            case 0:
                return "One";
            case 1:
                return "Two";
            case 2:
                return "Three";
        }
        return null;
    }
}

主Activity

 

 

package com.zhang.tablelayoutdemo;

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

public class MainActivity extends AppCompatActivity {

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

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
        viewPager.setAdapter(adapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);

        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if (tab != null) {
                tab.setCustomView(adapter.getTableView(i));
            }
        }
        tabLayout.getTabAt(0).getCustomView().setSelected(true);//设置选中状态
    }
}

 

 

设置AppCompatActivity下的全屏

 

<!--自定义全屏无标题主题-->
    <style name="FullscreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>