浅谈TabLayout(ViewPager+Tab联动)

google发布了的Android Support Design库中提供了TabLayout

 

通过TabLayout+ViewPager实现导航栏效果,点击Tab ，ViewPager跟随变化，滑动ViewPager，Tab跟随变化

看效果图：

通过一个Demo来了解TabLayout的简单使用（Android Studio开发）,代码中都有注释了 ，很简单

1、build.gradle文件中加入

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

 

2、写Xml文件，注意TabLayout的三个属性

app:tabIndicatorColor="#0f0"                每个tab下方的下划线的颜色    
app:tabSelectedTextColor="#00f"             被选中的tab的文本颜色
app:tabTextColor="#f00"                     未被选中的tab的文本颜色

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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="#777"
        app:tabIndicatorColor="#0f0"
        app:tabSelectedTextColor="#00f"
        app:tabTextColor="#f00"
        />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#cccc"
        />

</LinearLayout>

 

3、创建4个fragment

这里只创建一个，其他三个类似

package com.xqx.com.tablayoutdemo;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


/**
 * A simple {@link Fragment} subclass.
 */
public class OneFragment extends Fragment {


    public OneFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_one, container, false);
    }


}

<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"
    android:orientation="vertical"
    tools:context="com.xqx.com.tablayoutdemo.OneFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="第一个fragment界面" />

</LinearLayout>

 

4、创建ViewPager的适配器

package com.xqx.com.tablayoutdemo;

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

import java.util.List;


public class MyAdapter extends FragmentPagerAdapter{

    private List<Fragment> fragments;           //fragment集合
    private List<String> titles;                //tab标题集合

    public MyAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
        super(fm);
        this.fragments = fragments;
        this.titles = titles;
    }

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

    @Override
    public int getCount() {
        int ret = 0;
        if (fragments!=null && fragments.size()!=0){
            ret = fragments.size();
        }
        return ret;
    }

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


}

 

5、MainActivity.java

package com.xqx.com.tablayoutdemo;

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 android.os.Bundle;

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

public class MainActivity extends FragmentActivity {

    private TabLayout tabLayout;
    private ViewPager viewPager;

    //四个fragment
    private OneFragment oneFragment;
    private TwoFragment twoFragment;
    private ThreeFragment threeFragment;
    private FourFragment fourFragment;

    //适配器
    private MyAdapter adapter;

    private List<Fragment> fragments;           //fragment集合
    private List<String> titles;                //tab标题集合
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewPager = (ViewPager) findViewById(R.id.viewpager);

        //创建四个Fragment对象
        oneFragment = new OneFragment();
        twoFragment = new TwoFragment();
        threeFragment = new ThreeFragment();
        fourFragment = new FourFragment();

        //将四个Fragment对象添加到集合中
        fragments = new ArrayList<>();
        fragments.add(oneFragment);
        fragments.add(twoFragment);
        fragments.add(threeFragment);
        fragments.add(fourFragment);

        //给Tab添加标题
        titles = new ArrayList<>();
        titles.add("one");
        titles.add("two");
        titles.add("three");
        titles.add("four");

        //创建适配器
        adapter = new MyAdapter(getSupportFragmentManager(),fragments,titles);
        //viewpager绑定适配器
        viewPager.setAdapter(adapter);
        //tabLayout绑定viewpager
        tabLayout.setupWithViewPager(viewPager);

    }

}

 

-------------------------------------------------------------------------------------------------

其他相关：

浅谈FloatingActionButton(悬浮按钮)

浅谈DrawerLayout(抽屉效果)

浅谈GridLayout（网格布局）

浅谈RecyclerView(完美替代ListView,GridView)