使用滚动的标签指示器和滑动的内容页面，是手机应用经常出现的一种设计风格，常见的比较出名的应用有：微信（首页）、网易新闻、今日头条和知乎等。有过几年安卓开发经验的朋友肯定知道，在GitHub上，实现这种功能有两个比较出名的开源项目：PagerSlidingTabStrip 和 JakeWharton大神的ViewPagerIndicator，特别是后者，估计大家或多或少都曾今在自己的项目中使用到过。当然，现在也能使用这两个开源库，只是我们有了更多的选择，比如本文给大家介绍的TabLayout。
自2014年I/O结束后，Google在Support Design包中发布了一些列新的控件，其中就包括TabLayout。配合着ViewPager和Fragment的使用，TabLayout可以帮助开发者们分分钟打造一个滑动标签页，非常方便。本文作为Material Design系列学习的第一篇，将介绍TabLayout的两种常见使用场景：顶部标签页（如知乎），底部菜单栏（如微信）。先看一下最终能够实现的效果：
顶部标签.gif
底部菜单.gif
基础介绍
我们可以在代码中定义TabLayout的每一个Tab项，也可以通过TabLayout对象调用newTab（）方法创建，比如：
TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
TabLayout的宽度分配模式、Indicator下划线的高度、字体颜色、选择监听事件等这些方法都可以在官网看到，本文主要讲TabLayout的常见应用场景，所以各属性的设置就不碎碎念了，大家可以自行查阅。
顶部标签页
TabLayout的使用需要借助Android Design包，所以我们需要在 build.gradle中引入design包：
compile 'com.android.support:design:23.3.0'
在布局文件 fragment_page.xml 中加入TabLayout和ViewPager控件：
<?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">
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#80B3FF" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
然后我们看一下 MainActivity 中的代码：
package com.lid.tablayout.main;
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.content.ContextCompat;
import android.support.v4.view.ViewCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.lid.tablayout.R;
import com.lid.tablayout.main.fragment.TabContentFragment;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabLayout mTabTl;
private ViewPager mContentVp;
private List<String> tabIndicators; // 指示器标题
private List<Fragment> tabFragments; // 存放Fragment的容器
private ContentPagerAdapter contentAdapter; // ViewPager的适配器
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mTabTl = findViewById(R.id.tablayout);
mContentVp = findViewById(R.id.viewpager);
initTab(); // 初始化 TabLayout
initContent(); // 初始化 ViewPager
}
private void initTab() // 初始化 TabLayout
{
// mTabTl.setTabMode(TabLayout.MODE_SCROLLABLE); // 设置 TabLayout 模式
mTabTl.setTabMode(TabLayout.MODE_FIXED); // 设置 TabLayout 模式
mTabTl.setTabTextColors(ContextCompat.getColor(this, R.color.gray), ContextCompat.getColor(this, R.color.white)); // 设置 TabLayout 的 Title 的 Text 颜色
mTabTl.setSelectedTabIndicatorColor(ContextCompat.getColor(this, R.color.white)); // 设置选中后的 Text 颜色
ViewCompat.setElevation(mTabTl, 10); // 设置 阴影
// 下面这句代码很关键!!! 是这句代码起到了 使 TabLayout 与 ViewPager 相关联的作用
mTabTl.setupWithViewPager(mContentVp); // 设置 TabLayout 的 ViewPager(相关联)
}
private void initContent() // 初始化 ViewPager
{
tabIndicators = new ArrayList<>(); // 创建盛放 Title 的容器(List)
for (int i = 0; i < 3; i++) // 填充 List 用 Title
{
tabIndicators.add("Tab " + i);
}
tabFragments = new ArrayList<>(); // 创建盛放 Fragment 的容器 (List)
for (String s : tabIndicators) {
TabContentFragment fragment = new TabContentFragment();
Bundle bundle = new Bundle();
bundle.putString("content", s); // 给PagerFragment加点料,用Bundle传递个String给新创建的PagerFragment 让五个PagerFragment区分开来
fragment.setArguments(bundle);
tabFragments.add(fragment);
}
contentAdapter = new ContentPagerAdapter(getSupportFragmentManager());
mContentVp.setAdapter(contentAdapter);
}
class ContentPagerAdapter extends FragmentPagerAdapter // ViewPager 的适配器 这里用的匿名类 FragmentStatePagerAdapter
{
ContentPagerAdapter(FragmentManager fm) // 构造器
{
super(fm);
}
@Override
public Fragment getItem(int position) // 按照 position 从 List 中依次取出 PagerFragment
{
return tabFragments.get(position);
}
@Override
public int getCount() // 返回 ViewPager 中 页面的总数
{
return tabIndicators.size();
}
@Override
public CharSequence getPageTitle(int position) // TabLayout 的 Title 就是从这个函数取到的
{
return tabIndicators.get(position);
}
}
}
核心代码有两个地方，第一个是 setupWithViewPager 方法将TabLayout和ViewPager绑定在一起，使双方各自的改变都能直接影响另一方，解放了开发人员对双方变动事件的监听；第二个是在ViewPager的Adapter适配器中重写 getPageTitle 方法，在这个方法中设置标签指示器的标题。
码云:
https://gitee.com/giraffer/TabLayout001
底部菜单栏
上面我们使用了系统定义好的View做了一个纯文字加下划线组合的标签指示器。其实，我们也能自定义一个布局，然后赋值给TabLayout的Tab视图，比如做一个微信首页界面。
相比顶部标签指示器，底部菜单栏只是将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">
<include layout="@layout/include_toolbar" />
<android.support.v4.view.ViewPager
android:id="@+id/vp_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
android:id="@+id/tl_tab"
android:layout_width="match_parent"
android:layout_height="@dimen/dp_56"
android:background="@color/white">
</android.support.design.widget.TabLayout>
</LinearLayout>
在Activity代码中，设置TabLayout的指示器高度为0，即达到了隐藏Indicator的目的，然后通过getTabAt（position）的方法获取TabLayout的每一个Tab，并赋值为自定义布局视图，代码也很简单：
import android.os.Bundle;
import android.support.annotation.Nullable;
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.ViewCompat;
import android.support.v4.view.ViewPager;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;
/**
* Created by yifeng on 16/8/3. *
*/
public class TabLayoutBottomActivity extends BaseActivity {
private TabLayout mTabTl;
private ViewPager mContentVp;
private List<String> tabIndicators;
private List<Fragment> tabFragments;
private ContentPagerAdapter contentAdapter;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout_bottom);
mTabTl = (TabLayout) findViewById(R.id.tl_tab);
mContentVp = (ViewPager) findViewById(R.id.vp_content);
initContent();
initTab();
}
private void initTab() {
mTabTl.setTabMode(TabLayout.MODE_FIXED);
mTabTl.setSelectedTabIndicatorHeight(0);
ViewCompat.setElevation(mTabTl, 10);
mTabTl.setupWithViewPager(mContentVp);
for (int i = 0; i < tabIndicators.size(); i++) {
TabLayout.Tab itemTab = mTabTl.getTabAt(i);
if (itemTab != null) {
itemTab.setCustomView(R.layout.item_tab_layout_custom);
TextView itemTv = (TextView) itemTab.getCustomView().findViewById(R.id.tv_menu_item);
itemTv.setText(tabIndicators.get(i));
}
}
mTabTl.getTabAt(0).getCustomView().setSelected(true);
}
private void initContent() {
tabIndicators = new ArrayList<>();
for (int i = 0; i < 4; i++) {
tabIndicators.add("Tab " + i);
}
tabFragments = new ArrayList<>();
for (String s : tabIndicators) {
tabFragments.add(TabContentFragment.newInstance(s));
}
contentAdapter = new ContentPagerAdapter(getSupportFragmentManager());
mContentVp.setAdapter(contentAdapter);
}
class ContentPagerAdapter extends FragmentPagerAdapter {
public ContentPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return tabFragments.get(position);
}
@Override
public int getCount() {
return tabIndicators.size();
}
@Override
public CharSequence getPageTitle(int position) {
return tabIndicators.get(position);
}
}
}
从这两种使用场景可以看出，利用TabLayout做一个滑动标签页或者底部菜单栏，实现起来非常方便，代码量也不多，极大地减少了我们的开发量。但是，TabLayout也不是万能的，如果想做出更多地特效还是需要我们自己去开发。所以，如果你想自己做一个滑动标签指示器，强烈推荐大家去看看TabLayout的源码，相信对你一定有所启发。
网友评论