问题
需要在应用程序中为侧向屏幕导航提供可选的选项卡，但Google没有在框架或支持库中提供选项卡小部件。
解决方案
（API Level 7）
我们可以通过Google提供为SDK样本的SlidingTabLayout进行构建来实现选项卡导航。Google已完全淘汰以前的各种Android选项卡，例如TabWidget和ActionBar.Tab，但SlidingTabLayout符合当前的选项卡设计模式。
SlidingTabLayout旨在与ViewPager密切协作，因为选项卡设计模式的一部分是允许在每个视图之间轻扫。因此，没有用于手动添加选项卡条目的API。相反，从附加的ViewPager返回的页面标题中派生选项卡。如果选项卡内容延伸超出屏幕宽度，用户可以向左或向右滚动选项卡。轻扫ViewPager时，当前选项卡自动滚动以同时显示出来。
在编写本书时，SlidingTabLayout的设计采用了以前的Holo设计语言。在接下来的示例中，我们将对布局做一些调整，从而更好地支持Material设计。
注意：
这些小部件未来可能移入支持库中，但目前它们仅示例代码提供。
实现机制
在开始编写自己的代码之前，我们需要将滑动选项卡示例代码引入项目中。我们需要从SlidingTabsBasicSDK示例项目复制两个类，将其放入项目中src/main/java下的包目录：SlidingTabLayout和SlidingTabStrip。
注意：
可以在如下网址找到SlidingTabsBasic SDK 示例：/samples/android-xx/ui/SlidingTabsBasic/。
Google提供了如何构建该例的说明，因此我们在这儿不会深入讨论此选项卡小部件的细节。我们将其视为来自任何其他库的小部件。完成此例时，我们将获得如下图所示的效果。
请注意，选项卡位于Action Bar的下方，并且匹配Action Bar的背景以提供它们是单个元素的外观。以下两段代码定义了构造选项卡的Activity和布局。
res/layout/activity_tabs
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.android.common.view.SlidingTabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/primaryGreen"/>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
滑动选项卡Activity
public class ActionTabsActivity extends ActionBarActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tabs);
ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
SlidingTabLayout tabLayout = (SlidingTabLayout) findViewById(R.id.tabs);
viewPager.setAdapter(new TabsPagerAdapter(this));
/*
* SlidingTabLayout 与 ViewPager关联, 继承选项卡标题和滚动跟踪行为
*/
tabLayout.setViewPager(viewPager);
tabLayout.setCustomTabColorizer(new SlidingTabLayout.TabColorizer() {
@Override
public int getIndicatorColor(int position) {
//显示在每个选项卡位置下方的颜色
return Color.WHITE;
}
@Override
public int getDividerColor(int position) {
//透明以隐藏分隔线
return 0;
}
});
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.tabs, menu);
return true;
}
/*
* 简单的PagerAdapter，用于显示带有静态图片的页面视图
*/
private static class TabsPagerAdapter extends PagerAdapter {
private Context mContext;
public TabsPagerAdapter(Context context) {
mContext = context;
}
/*
* SlidingTabLayout 要求此方法定义每个选项卡将显示的文本
*/
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Primary";
case 1:
return "Secondary";
case 2:
return "Tertiary";
case 3:
return "Quaternary";
case 4:
return "Quinary";
default:
return "";
}
}
@Override
public int getCount() {
return 5;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView pageView = new ImageView(mContext);
pageView.setScaleType(ImageView.ScaleType.CENTER);
pageView.setImageResource(R.drawable.ic_launcher);
container.addView(pageView);
return pageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return (view == object);
}
}
}
在onCreate()内部，我们必须通过向setViewPager()传递一个引用来将ViewPager附加到SlidingTabLayout。在内部，布局将跟踪ViewPager中的滚动事件，并且通过滚动对应选项卡下方的选择器栏来反映当前所选页面中的改动。
从主题中提取选项卡的默认颜色，该颜色通常是不正确的。可以使用TabColorizer实例为选项卡选择器和选项卡之间的分隔线提供颜色。我们将前者设置为纯白色，并且（上图所示）隐藏了分隔线以符合Material设计外观。
SlidingTabLayout从附加的PagerAdapter派生其内容。适配器实现必须重写getPageTitle()以提供将显示在每个页面选项卡上的名称。
样式调整
如果运行目前为止的代码，选项卡仍然看起来与上图稍有不同。我们需要对SlidingTabLayout作如下调整，使其符合Material设计：
- 将选择器高度降低到2dp。
- 移除底部的阴影边框。
- 移除默认的加粗文本。
- 添加对已选择和未选择选项卡上不同文本颜色的支持。
注意：
还可以使用在本书示例代码中提供的不同版本的SlidingTabLayout和SlidingTabStrip查看已应用的这些调整。
在SlidingTabStrip.java内部，更新如下常量值：
private static final int DEFAULT_BOTTOM_BORDER_THICKNESS_DIPS = 0;
……
private static final int SELECTED_INDICATOR_THICKNESS_DIPS = 2;
这会降低选择器高度并移除阴影。在SlidingTabStrip.java内部，我们需要使用以下代码中版本替换createDefaultTabView()：
SlidingTabLayout的文本修正
这会移除Holo的默认背景强调以及选项卡的粗体文本。最后，我们需要添加到两种选项卡颜色的支持。以下代码清单指出了添加的相关代码。
SlidingTabLayout的文本颜色
添加的这些代码用于在应用程序的主题中定义两种文本颜色属性，该主题将应用于选择的选项卡和其他未选择的选项卡。在每个选项卡选择事件中，新的updateSelectedTitle()方法基于新的选项设置所有选项卡的文本颜色。目标这些属性不存在。以下三段代码清单分别是在应用程序资源中定义这些属性，对当前主题中的每个样式应用颜色，定义使用的颜色值。
res/values/attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 为选项卡颜色自定义属性-->
<declare-styleable name="SlidingTabLayout">
<attr name="android:textColorPrimary" />
<attr name="textColorTabDefault" format="color"/>
<attr name="textColorTabSelected" format="color"/>
</declare-styleable>
</resources>
res/values/styles.xml
<resources>
<!-- 基础应用程序主题 -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!--提供装饰主题颜色 -->
<item name="colorPrimary">@color/primaryGreen</item>
<item name="colorPrimaryDark">@color/darkGreen</item>
<item name="colorAccent">@color/accentGreen</item>
<!-- 移除Action Bar的阴影 -->
<item name="android:windowContentOverlay">@null</item>
<!--选项卡的颜色属性-->
<item name="textColorTabDefault">@color/tabTextDefault</item>
<item name="textColorTabSelected">@color/tabTextSelected</item>
</style>
</resources>
res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primaryGreen">#259b24</color>
<color name="darkGreen">#0a7e07</color>
<color name="accentGreen">#d0f8ce</color>
<color name="tabTextDefault">#99ffffff</color>
<color name="tabTextSelected">#ffffff</color>
</resources>
目前在主题中可以看到对已选择的选项卡应用了纯白色，而对其他的选项卡应用了60%的白色。