示例代码中的 SlidingTabLayout 简单使用（一）

在程序中为侧向屏幕导航提供可选的选项卡。Google 已经淘汰了以前的许多选项卡，如 TabWiget，ActionBar，但是SlidingTabLayout 符合当前选项卡的设计模式。

SlidingTabLayout 旨在与 ViewPager 密切协作，因为选项卡设计模式的一部分是允许在每个视图之间轻扫。轻扫 ViewPager 时，当前选项卡自动滚动以同时显示出来。

效果如下 （AndroidStudio 1.5）：



复制 android-sdk-windows\samples\android-23_1\ui\SlidingTabsBasic\Application\src\main\java\com\example\android\common\view 目录（Android 的示例目录）下的 SlidingTabLayout.java 和 SlidingTabStrip.java 两个类到自己项目的 java 包目录下。

content_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.crazy.tabs.MainActivity"
tools:showIn="@layout/activity_main">

<com.crazy.tabs.SlidingTabLayout
android:id="@+id/tabs"
android:background="#0ff"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>

</LinearLayout>

MainActivity.java :

package com.crazy.tabs;

import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.view.Menu;
import android.view.MenuItem;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

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.MAGENTA;
}

@Override
public int getDividerColor(int position) {
// 透明以隐藏分隔线
return 0;
}
});

}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

private static class TabsPagerAdapter extends PagerAdapter{

private Context mContext;
private static final int[] IMAGES = {
R.drawable.bg_01, R.drawable.bg_02, R.drawable.bg_03,
R.drawable.bg_04, R.drawable.bg_05, R.drawable.bg_06,
R.drawable.bg_07
};

public TabsPagerAdapter(Context context){
mContext = context;
}

/**
*  SlidingTabLayout 要求此方法定义每个选项卡将显示的文本
*/
@Override
public CharSequence getPageTitle(int position) {
switch (position) {
case 0:
return "Monday";
case 1:
return "Tuesday";
case 2:
return "Wednesday";
case 3:
return "Thursday";
case 4:
return "Friday";
case 5:
return "Saturday";
case 6:
return "Sunday";
default:
return "";
}
}

@Override
public int getCount() {
return 7;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView pageView = new ImageView(mContext);
pageView.setScaleType(ImageView.ScaleType.CENTER);

pageView.setImageResource(IMAGES[position]);

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);
}
}
}