PagerSlidingTabStrip介紹及使用，讓ViewPager更絢麗，viewpager

PagerSlidingTabStrip介紹及使用，讓ViewPager更絢麗，viewpager

轉載請註明出處http://blog.csdn.net/harryweasley/article/details/42290595，謝謝。

以前一直想著，ViewPager中間的那個橫線怎麼跟著螢幕的滑動而滑動，如所示：

我們可以看到中間的那個紅線在跟著螢幕滑動而滑動

現在github上已經有了這個開源項目，所以我們可以直接拿來用，很方便很實用。文章末尾我將放上資源，可以直接下載。

官網地址：https://github.com/astuetz/PagerSlidingTabStrip

關於怎麼匯入包，怎麼匯入程式，這裡不再進行贅述，你可以看我之前的一個文章，有詳細步驟：

http://blog.csdn.net/harryweasley/article/details/41413547

我簡單翻譯一下官網上的內容：

互動式頁面指標控制項，完美配合ViewPager控制項（來自Android Support Library）

注意：這裡的ViewPager的適配器必須是繼承的FragmentPagerAdapter，並重寫getPageIconResId(int position)或者getPageTitle(int position)方法

用法

在sample/檔案夾下有一個現成的可運行工程

1.加入library作為當地套件工程，或者加入依賴在build.gradle（我對gradle不是很瞭解，所以用前面那個匯入包的方法）

dependencies {    compile 'com.astuetz:pagerslidingtabstrip:1.0.1'}

2.在你的layout裡加入PagerSlidingTabStrip控制項，它通常要在ViewPager控制項之上

<com.astuetz.PagerSlidingTabStrip    android:id="@+id/tabs"    android:layout_width="match_parent"    android:layout_height="48dip" />

3.在你的onCreate方法（或者onCreateView對於一個fragment），綁定PagerSlidingTabStrip控制項到ViewPager上

// 初始化ViewPager並且添加適配器 ViewPager pager = (ViewPager) findViewById(R.id.pager); pager.setAdapter(new TestAdapter(getSupportFragmentManager())); //向ViewPager綁定PagerSlidingTabStrip   PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs); tabs.setViewPager(pager);

4.（可選的）如果你想在你的ViewPager用到onPageChangeListener監聽方法，你應該如下設定，而不是直接用ViewPager設定

// 從上面繼續 tabs.setOnPageChangeListener(mPageChangeListener);

個人化

為了讓你的app不像另一個 Play Store上面的app，你可以添加這些屬性來做出自己獨具一格的應用。

• pstsIndicatorColor Color of the sliding indicator  滑動條的顏色
• pstsUnderlineColor Color of the full-width line on the bottom of the view  滑動條所在的那個全寬線的顏色
• pstsDividerColor Color of the dividers between tabs   每個標籤的分割線的顏色
• pstsIndicatorHeightHeight of the sliding indicator       滑動條的高度
• pstsUnderlineHeight Height of the full-width line on the bottom of the view    滑動條所在的那個全寬線的高度
• pstsDividerPadding Top and bottom padding of the dividers   分割線底部和頂部的填充寬度
• pstsTabPaddingLeftRight Left and right padding of each tab   每個標籤左右填充寬度
• pstsScrollOffset Scroll offset of the selected tab
• pstsTabBackground Background drawable of each tab, should be a StateListDrawable  每個標籤的背景，應該是一個StateListDrawable  
• pstsShouldExpand If set to true, each tab is given the same weight, default false   如果設定為true，每個標籤是相同的控制項，均勻平分整個螢幕，預設是false
• pstsTextAllCaps If true, all tab titles will be upper case, default true   如果為true，所有標籤都是大寫字母，預設為true

所有的屬性都有他們自己的getter和setter方法來隨時改變他們

接下來，我將寫下我自己的小demo，總結自己遇到的問題，來記錄一下關於這個控制項的問題。

先看下

首先是activity_main.xml檔案

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    tools:context=".MainActivity" xmlns:app="http://schemas.android.com/apk/res/com.example.viewfragment">    <com.astuetz.PagerSlidingTabStrip        android:id="@+id/tabs"        android:layout_width="match_parent"        android:layout_height="48dip"        app:pstsShouldExpand="true"        />    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_below="@id/tabs"        android:layout_width="fill_parent"        android:layout_height="fill_parent" /></RelativeLayout>

其中，1.android:layout_below="@id/tabs"一定要記得寫上，是讓ViewPager控制項在tabs之  

2.   xmlns:app="http://schemas.android.com/apk/res/com.example.viewfragment， 這句話是我的理解是，如果你想要用PagerSlidingTabStrip，就必須加上，不過他會自動加，不需要你來管他。

接下來是三個fragment，都是很簡單的設定了不同的顏色背景而已，我這裡就不再貼出代碼了，稍後會放上自己的小demo

最後，我們來看看MainActivity中都進行了什麼處理吧，

package com.example.viewfragment;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.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import com.astuetz.PagerSlidingTabStrip;public class MainActivity extends FragmentActivity {ViewPager viewPager;PagerSlidingTabStrip tabs;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);viewPager = (ViewPager) findViewById(R.id.viewPager);viewPager.setAdapter(new myPagerAdapter(getSupportFragmentManager()));tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);tabs.setViewPager(viewPager);}class myPagerAdapter extends FragmentPagerAdapter {String[] title = { "項目一", "項目二", "項目三" };Fragment1 fragment1;Fragment2 fragment2;Fragment3 fragment3;public myPagerAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int position) {switch (position) {case 0:fragment1 = new Fragment1();return fragment1;case 1:fragment2 = new Fragment2();return fragment2;case 2:fragment3 = new Fragment3();return fragment3;default:return null;}}@Overridepublic int getCount() {return title.length;}@Overridepublic CharSequence getPageTitle(int position) {return title[position];}}}

接下來是補充內容：

1.MainActivity繼承的是FragmentActivity，因為想要用到getSupportFragmentManager()來構造適配器

2.

public Fragment getItem(int position) {switch (position) {case 0:fragment1 = new Fragment1();return fragment1;case 1:fragment2 = new Fragment2();return fragment2;case 2:fragment3 = new Fragment3();return fragment3;default:return null;}}

在做這個方法的時候，出現了cannot convert from Fragment1 to Fragment這個錯誤，關於這個錯誤，你可以點擊

http://blog.csdn.net/jason0539/article/details/9712273進行查看。

3.如果是重寫的getPageTitle(int position)這個方法，則tabs是文字標題；如果是重寫的getPageIconResId(int position)，則tabs是表徵圖顯示。

：

上面四個標籤就是重寫的getPageIconResId(int position)

private final int[] ICONS = { R.drawable.ic_launcher_gplus, R.drawable.ic_launcher_gmail,R.drawable.ic_launcher_gmaps, R.drawable.ic_launcher_chrome };@Overridepublic int getPageIconResId(int position) {return ICONS[position];}

4.關於官網上的demo上fragment是這樣給出的

/* * Copyright (C) 2013 Andreas Stuetz <andreas.stuetz@gmail.com> * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * *      http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */package com.astuetz.viewpager.extensions.sample;import android.os.Bundle;import android.support.v4.app.Fragment;import android.util.TypedValue;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.FrameLayout;import android.widget.FrameLayout.LayoutParams;import android.widget.TextView;public class SuperAwesomeCardFragment extends Fragment {private static final String ARG_POSITION = "position";private int position;public static SuperAwesomeCardFragment newInstance(int position) {SuperAwesomeCardFragment f = new SuperAwesomeCardFragment();Bundle b = new Bundle();b.putInt(ARG_POSITION, position);f.setArguments(b);return f;}@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);position = getArguments().getInt(ARG_POSITION);}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);FrameLayout fl = new FrameLayout(getActivity());fl.setLayoutParams(params);final int margin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 8, getResources().getDisplayMetrics());TextView v = new TextView(getActivity());params.setMargins(margin, margin, margin, margin);v.setLayoutParams(params);v.setLayoutParams(params);v.setGravity(Gravity.CENTER);v.setBackgroundResource(R.drawable.background_card);v.setText("CARD " + (position + 1));fl.addView(v);return fl;}}

關於TypedValue.applyDimension（）這個方法，你可以查看http://blog.csdn.net/harryweasley/article/details/42172321

關於params.setMargins(margin, margin, margin, margin);你可以查看http://www.itnose.net/detail/6038494.html

我這裡就不在解釋了

好了，關於PagerSlidingTabStrip我已經基本寫完了，收穫還是很大的。

接下來總結一下，我這個文章的其他連結地址：

1.關於cannot convert from Fragment1 to Fragment這個錯誤，你可以查看http://blog.csdn.net/jason0539/article/details/9712273

2.關於TypedValue.applyDimension（）這個方法，你可以查看http://blog.csdn.net/harryweasley/article/details/42172321
3.關於params.setMargins(margin, margin, margin, margin);你可以查看http://www.itnose.net/detail/6038494.html
4.本篇部落格地址：。。。。。。。。。。

5.PagerSlidingTabStrip在github上的地址  ，https://github.com/astuetz/PagerSlidingTabStrip

6.自己應用的http://download.csdn.net/detail/harryweasley/8314811

7.官網的PagerSlidingTabStrip  http://download.csdn.net/detail/harryweasley/8314807

8.關於怎麼匯入包，怎麼匯入程式，你可以查看  http://blog.csdn.net/harryweasley/article/details/41413547