在前面的文章中，我們使用支援包裡面的PagerTabStrip實現了有滑動標籤的viewPager效果，今天，再給大家介紹另外一種開源專案，來實現類似的效果。

    在這篇文章中，我們將使用第三方開源專案ViewPagerExtensions實現。

    先看效果

    ViewPagerExtensions的github地址：https://github.com/astuetz/ViewPagerExtensions

    首先給出整個專案的目錄結構

在這個demo之中，我直接把資原始檔全部放在了專案之中，方便使用。

    首先，我們看一下佈局檔案activity_main.xml。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/com.heli17.tradeshowcloud"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.astuetz.viewpager.extensions.ScrollingTabsView
        android:id="@+id/scrolling_tabs"
        android:layout_width="fill_parent"
        android:layout_height="38dp"
        android:background="@drawable/tab_unselected_holo"
        app:dividerDrawable="@android:color/white" />

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

</LinearLayout>
 

    佈局寫好了之後，我們就可以在程式碼裡面設定介面卡了。

    程式碼如下：

package com.example.scrollingtabsdemo;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.Button;

import com.astuetz.viewpager.extensions.ScrollingTabsView;
import com.astuetz.viewpager.extensions.TabsAdapter;

public class MainActivity extends FragmentActivity {

	private ViewPager viewPager;
	private ScrollingTabsAdapter scrollingTabsAdapter;
	private ScrollingTabsView scrollingTabs;
	private FragsAdapter pagerAdapter;

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

		viewPager = (ViewPager) findViewById(R.id.pager);
		// 設定介面卡
		pagerAdapter = new FragsAdapter(getSupportFragmentManager());
		viewPager.setAdapter(pagerAdapter);

		// 設定快取fragment的數量
		viewPager.setOffscreenPageLimit(2);
		viewPager.setCurrentItem(0);
		viewPager.setPageMargin(4);

		scrollingTabsAdapter = new ScrollingTabsAdapter(this);
		// 設定滑動標籤的介面卡和宿主ViewPager
		scrollingTabs = (ScrollingTabsView) findViewById(R.id.scrolling_tabs);
		scrollingTabs.setAdapter(scrollingTabsAdapter);
		scrollingTabs.setViewPager(viewPager);

	}

	/**
	 * ViewPager介面卡
	 * 
	 * @author zhaokaiqiang
	 * 
	 */
	private class FragsAdapter extends FragmentStatePagerAdapter {

		private ArrayList<Fragment> fragments;

		public FragsAdapter(FragmentManager fm) {
			super(fm);

			fragments = new ArrayList<Fragment>();
			for (int i = 0; i < scrollingTabsAdapter.mTitles.length; i++) {
				fragments.add(new MyFragment(i));
			}

		}

		@Override
		public int getCount() {
			return fragments.size();
		}

		@Override
		public Fragment getItem(int position) {
			return fragments.get(position);
		}
	}

	/**
	 * 滑動標籤介面卡
	 * 
	 * @author zhaokaiqiang
	 * 
	 */
	private class ScrollingTabsAdapter implements TabsAdapter {

		private Activity mContext;
		public String[] mTitles = { "首頁", "推薦", "最新", "娛樂", "設定" };

		public ScrollingTabsAdapter(Activity ctx) {
			this.mContext = ctx;
		}

		@Override
		public View getView(int position) {

			Button tab = (Button) mContext.getLayoutInflater().inflate(
					R.layout.tab_scrolling, null);
			tab.setText(mTitles[position]);
			return tab;
		}

	}

}
 

    這裡的R.layout.tab_scrolling是自定義的一個佈局，程式碼如下：

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:background="@drawable/tab_holo"
    android:gravity="center"
    android:paddingBottom="8dp"
    android:paddingLeft="30dip"
    android:paddingRight="30dip"
    android:paddingTop="8dp"
    android:textColor="@android:color/holo_blue_light"
    android:textSize="16sp" />

    這種滑動的tab適合介面比較多的情況，所以在Viewpagr的介面卡的選擇上使用的是FragmentPagerStateAdapter，如果滑動的介面在3個或者3個以下，推薦使用FixedTabsView，使用方法和這個完全一樣，另外，ViewPager的介面卡換成FragmentPagerAdapter比較合適。