Android高级UI开发（十六）TabLayout

      TabLayout是Material Design设计原则中推出的一个新型标题栏，最常见的例子就是结合Viewpager来使用，当滑动Viewpager时，标题栏会跟随着切换，反过来当选中某一个标题栏时Viewpager页面也会跟随着切换到指定内容。 拒绝所谓的民间高手的自定义Tablayout滑动效果，让我们接受谷歌大牛的稳定控件吧。

下面是Tablayout的运行效果：

 

1.  布局文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabTextColor="@color/colorPrimary"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabMode="scrollable"
        app:tabGravity="fill"
        />
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />

</LinearLayout>

       这里提一下这两个属性：

        app:tabMode="scrollable"
        app:tabGravity="fill"

      表示tab页很多的时候，可以滚动。fill表示让TAB标签占满屏幕宽度。

       如果你只有少数几个TAB，

      想让各TAB平分宽度，你可以设置app:tabMode:= "fixed", app:tabGravity="fill".

      想让各TAB居中，则设置app:tabMode ="fixed", app:tabGravity="center"

2. 实现TabLayout与Viewpager的滑动联动：

有两种方法，第一种方法1行代码就能把两者的切换关联起来，MainActivity.java代码如下：

package com.example.administrator.tablayout;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Build;
import android.os.Bundle;
import android.renderscript.Sampler;
import android.support.annotation.RequiresApi;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private String[] title = {
            "推荐",
            "分类",
            "排行榜",
            "必备",
            "福利",
            "应用圈",
            "娱乐",
            "汽车",
            "房子",
            "科技"
    };

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

        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
        tabLayout = (TabLayout)findViewById(R.id.tablayout);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());
        viewPager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // TODO Auto-generated method stub
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            Fragment f = new DetailFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", title[position]);
            f.setArguments(bundle);
            return f;
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return title.length;
        }
    }
}

 

核心代码就这是以下这1行代码，其余的我们都没必要在这里解释了，因为这里是高级进阶：

        tabLayout.setupWithViewPager(viewPager);

 就是这1行代码将TabLayout与Viewpager关联了起来，达到了我们所要的滑动关联效果。

 

第二种方法，MainActivity代码如下：

package com.example.administrator.tablayout;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.os.Build;
import android.os.Bundle;
import android.renderscript.Sampler;
import android.support.annotation.RequiresApi;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;
    private String[] title = {
            "头条",
            "新闻",
            "娱乐",
            "体育",
            "科技",
            "美女",
            "财经",
            "汽车",
            "房子",
            "头条"
    };

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

        final ViewPager viewPager = (ViewPager) findViewById(R.id.vp);
        tabLayout = (TabLayout)findViewById(R.id.tablayout);
        MyPagerAdapter adapter = new MyPagerAdapter(getSupportFragmentManager());

       //1.TabLayout和Viewpager关联
        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

            @Override
            public void onTabUnselected(TabLayout.Tab arg0) {
                // TODO Auto-generated method stub

            }

            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                // 被选中的时候回调
                viewPager.setCurrentItem(tab.getPosition(),true);
            }

            @Override
            public void onTabReselected(TabLayout.Tab arg0) {
                // TODO Auto-generated method stub

            }
        });
        //2.ViewPager滑动关联tabLayout
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));


        //设置tabLayout的标签来自于PagerAdapter
        tabLayout.setTabsFromPagerAdapter(adapter);
        viewPager.setAdapter(adapter);


    }

    class MyPagerAdapter extends FragmentPagerAdapter{

        public MyPagerAdapter(FragmentManager fm) {
            super(fm);
            // TODO Auto-generated constructor stub
        }

        @Override
        public CharSequence getPageTitle(int position) {
            // TODO Auto-generated method stub
            return title[position];
        }

        @Override
        public Fragment getItem(int position) {
            Fragment f = new DetailFragment();
            Bundle bundle = new Bundle();
            bundle.putString("title", title[position]);
            f.setArguments(bundle);
            return f;
        }

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return title.length;
        }

    }



}

tabLayout.setOnTabSelectedListener中重写了以下函数：

@Override
public void onTabSelected(TabLayout.Tab tab) {
    // 被选中的时候回调
    viewPager.setCurrentItem(tab.getPosition(),true);
}

当选中TAB表签时，根据TAB的位置切换ViewPager对应的页面，因为Viewpager的页面内容与Tab标签是一 一对应的。

那么反过来，滑动ViewPager如何让TAB标签跟着关联切换呢，以下1行代码可以搞定：

//2.ViewPager滑动关联tabLayout
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

//设置tabLayout的标签来自于FragmentPagerAdapter中的getPageTitle
tabLayout.setTabsFromPagerAdapter(adapter);
viewPager.setAdapter(adapter);

至此，Tablayout+viewpager滑动联动的 讲解就到这里，其实相比较我们从网上搜到的开源项目简单多了，GOOGLE为我们在Material design设计中推出的这些好用的控件，我们要知道它，运用它。必定谷歌工程师比民间的那些程序员水平高多了，开发 出的控件也稳定多了。

 

最后源码下载地址：https://download.csdn.net/download/gaoxiaoweiandy/10821642