PagerSlidingTabStrip製作Android標籤的多介面滑動切換

這裡我們用到了兩個函式庫，一個是Android SDK裡自帶的android-support-v4，另一個是PagerSlidingTabStrip，開源專案位址是https://github.com/astuetz/PagerSlidingTabStrip
用v4是需要用到他的ViewPager以及Fragment，而PagerSlidingTabStrip就是套用上邊的標籤。

成果預覽：

下面，開工~
佈局

創建Activity什麼的就不說了，喜歡ActionBar就創建一個ActionBarActivity，需要v7 support包。
這裡直接給出此Activity的版面：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  <com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabstrip"
    android:layout_height="48dp"
    android:layout_width="match_parent" />
  <android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:overScrollMode="never"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:layout_below="@id/tabstrip" />
</RelativeLayout>

com.astuetz.PagerSlidingTabStrip這貨就是介面上方那幾個標籤。這裡我指定了高度為48dp，這個高度也是Android Design裡強烈建議的可回饋區域的高度。
之前有同事在合作開發App的時候看到他使用RadioGroup做這幾個標籤，又要再加一個View來做下邊的能活動的Indicator，容易出錯不說，代碼複雜度絕對比我下邊要貼出的高很多了。並非是我懶，不願意自己去實現，而是我覺得世上已經有了那麼多別人已經好心好意幫你做完了等你來用的美好的東西，非要自己扭自己搞一套的話，未免有些得不償失。人人都想牛逼，都想做出些比別人更牛逼的東西，但是我認為，如果能把現有的一些好東西完美的結合到一起就已經很不易了。

說了一些無關的觀點，回到正題。很簡單的上下結構佈局，不用多說。至於ViewPager中android:overScrollMode="never"是一個小tip，我是不太喜歡ViewPager的越界效果的（fadingEdge="none"並不能生效），這個layout parameter可以使ViewPager的越界效果失效。

程式碼

眾所周知，ViewPager中的成員必須是Fragment，所以在設定ViewPager以及PagerSlidingTabStrip之前需要先建立一個簡單的Fragment做ViewPager中的顯示。

package com.airk.myapplication.viewdemo.app.fragments;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import com.airk.myapplication.simplechat.app.widget.MyTextView; //我自定义的TextView，只是修改了默认字体，最近觉得Roboto-Light/Thin特别好看
/**
 * Simple Fragment which only has one TextView
 */
public class NumberFragment extends Fragment {
  private String content; //Fragment中显示的内容
  public static NumberFragment newInstance(String content) { //对外提供创建实例的方法，你给我需要显示的内容，我给你Fragment实例
    return new NumberFragment(content);
  }
  private NumberFragment(String content) {
    this.content = content;
  }
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    MyTextView tv = new MyTextView(getActivity());
    tv.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.MATCH_PARENT));
    tv.setGravity(Gravity.CENTER);
    tv.setTextSize(26.0f);
    tv.setText(this.content);
    return tv; //只有一个全屏显示、居中的Roboto字体的TextView
  }
}

Fragment創建完了，註解都寫到了程式碼裡邊，淺顯易懂，非常簡單。下邊是Activity的程式碼：

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main_activity);
  getSupportActionBar().setDisplayShowHomeEnabled(false); //ActionBar不显示应用Icon
  ViewPager viewpager = (ViewPager) findViewById(R.id.viewpager); //获取ViewPager
  viewpager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) { //简单创建一个FragmentPagerAdapter
    @Override
    public CharSequence getPageTitle(int position) { //必须复写这个方法，开源控件PagerSlidingTabStrip需要通过它获取标签标题
      return "Title " + (position + 1);
    }
    @Override
    public Fragment getItem(int i) {
      return NumberFragment.newInstance("Content " + (i + 1)); //返回刚刚我们创建的那个Fragment，显示内容为Content X
    }
    @Override
    public int getCount() {
      return 3; //测试只用3个标签
    }
  });
  PagerSlidingTabStrip strip = (PagerSlidingTabStrip) findViewById(R.id.tabstrip); //获取PagerSlidingTabStrip控件对象
  strip.setShouldExpand(true); //设置标签自动扩展——当标签们的总宽度不够屏幕宽度时，自动扩展使每个标签宽度递增匹配屏幕宽度，注意！这一条代码必须在setViewPager前方可生效
  strip.setViewPager(viewpager); //这是其所handle的ViewPager
  strip.setDividerColor(Color.TRANSPARENT); //设置每个标签之间的间隔线颜色 ->透明
  strip.setUnderlineHeight(3); //设置标签栏下边的间隔线高度，单位像素
  strip.setIndicatorHeight(6); //设置Indicator 游标 高度，单位像素
}

PagerSlidingTabStrip這個控制項有很多可自訂屬性，包括每個標籤的顏色，字元顏色，間隔的Drawable等等。如果大家有需求可以去仔細看看其github主頁以及官方給出的sample學習一下。

總結
結合開源控制項PagerSlidingTabStrip我們很方便的就做到了帶有標籤可滑動的多個介面開發，從程式碼量上看說實話已經很少了，而且邏輯上也淺顯易懂，甚至都沒有註冊什麼Listener就已經實現了標籤與每個介面的互動（點擊標籤切換介面or 滑動介面切換標籤），而Indicator遊標也已經被設計成了隨用戶滑動而滑動的，節省了許多開發時間。

更多PagerSlidingTabStrip製作Android帶標籤的多介面滑動切換相關文章請關注PHP中文網！