Android选项卡TabLayout简单使用

题外话：仅以此文记录自己的学习历程，如有不足请多指教。

我们在使用微信的时候，会发现下面的一栏菜单栏有4个选项，而且可以滑动切换，每个选项卡有自己对应的功能，很多app都采用的这个模式，我们也来简单的做一个项目，可以切换页面。

TabLayout 可以帮助我们实现。下面，通过一个简单的例子，来实现选项卡的切换。

1.在app的build.gradle中添加库

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

2.创建选项卡的页面布局最上方为Toolbar

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TabLayoutActivity"
    android:orientation="vertical">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="#ADBE107E"
            />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

</LinearLayout>

Toolbar 可以忽略，以后学习了再写。

app:tabIndicatorColor="#ADBE107E"  //选项卡下方下划线的颜色

更多属性自行百度吧（tab选中的文字颜色、tab默认文字颜色、整个选中tab的背景颜色等）

3.给ViewPager设置Adapter

FragmentAdapter.java

package com.example.wjy329.ufo;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.List;

public class FragmentAdapter extends FragmentStatePagerAdapter {
    private List<Fragment> mFragments;
    private List<String> mTitles;

    public FragmentAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm);
        mFragments = fragments;
        mTitles = titles;
    }

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

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

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

4.主程序的代码

TabLayoutActivity.java

package com.example.wjy329.ufo;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

import com.example.wjy329.ufo.fragment.BbsFragment;
import com.example.wjy329.ufo.fragment.FirstFragment;
import com.example.wjy329.ufo.fragment.HiddenFragment;
import com.example.wjy329.ufo.fragment.SecretFragment;

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

public class TabLayoutActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private ViewPager mViewPager;
    private TabLayout mTabLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("UFO");
        setSupportActionBar(toolbar);
        mViewPager = (ViewPager) findViewById(R.id.viewpager);
        initViewPager();
    }

    private void initViewPager() {
        mTabLayout = (TabLayout) findViewById(R.id.tabs);

        //定义tab的标题数组，存放tab的名字，本例子创建4个，分别如下。        List<String> titles = new ArrayList<>();        titles.add("头条");        titles.add("灵异事件");        titles.add("未解之谜");        titles.add("社区");        //将所有title显示出来        for(int i=0;i<titles.size();i++){            mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));        }

        //4个tab分别对应的4个fragment（自行定义）        List<Fragment> fragments = new ArrayList<>();        fragments.add(new FirstFragment());        fragments.add(new HiddenFragment());        fragments.add(new SecretFragment());        fragments.add(new BbsFragment());        FragmentAdapter mFragmentAdapteradapter =                new FragmentAdapter(getSupportFragmentManager(), fragments, titles);        //给ViewPager设置适配器        mViewPager.setAdapter(mFragmentAdapteradapter);        //将TabLayout和ViewPager关联起来。        mTabLayout.setupWithViewPager(mViewPager);        //给TabLayout设置适配器        mTabLayout.setTabsFromPagerAdapter(mFragmentAdapteradapter);    }}

以上是简单的使用方法和效果图，如有错误，请多包涵。

这也是本人学习的笔记，并不作为指导使用。

秒客网

Android选项卡TabLayout简单使用

相关文章