舉例講解Android中ViewPager中的PagerTitleStrip子控件

更新時間：2016年03月23日 14:31:00 作者：匆忙擁擠repeat

這篇文章主要介紹了Android中ViewPager中的PagerTitleStrip子控件使用例子,講解了PagerTitleStrip子控件的嵌入與設置標題的用法,需要的朋友可以參考下

先看個簡單的，先上個效果圖，吸引大家一下眼球。

2016323142630338.png (300×500) 2016323142717616.png (300×500)

三個頁面間的滑動，此時是帶著上面的標題一塊滑動的。
看一下android 對于PagerTitleStrip的官方解釋：

PagerTitleStrip是ViewPager的一個關于當前頁面、上一個頁面和下一個頁面的一個非交互的指示器。它經常作為ViewPager控件的一個子控件被被添加在XML布局文件中。在你的布局文件中，將它作為子控件添加在ViewPager中。而且要將它的 android:layout_gravity 屬性設置為TOP或BOTTOM來將它顯示在ViewPager的頂部或底部。每個頁面的標題是通過適配器的getPageTitle(int)函數(shù)提供給ViewPager的。
著重講兩點：

1、首先，文中提到：在你的布局文件中，將它作為子控件添加在ViewPager中。

2、第二，標題的獲取，是重寫適配器的getPageTitle(int)函數(shù)來獲取的。

根據(jù)這兩點，我們就可以看代碼了：

1、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="com.example.testviewpage_2.MainActivity" > 
 
 <android.support.v4.view.ViewPager 
  android:id="@+id/viewpager" 
  android:layout_width="wrap_content" 
  android:layout_height="200dip" 
  android:layout_gravity="center"> 
   
  <android.support.v4.view.PagerTitleStrip 
   android:id="@+id/pagertitle" 
   android:layout_width="wrap_content" 
   android:layout_height="wrap_content" 
   android:layout_gravity="top" 
   /> 
   
 </android.support.v4.view.ViewPager> 
 
</RelativeLayout>

清楚的看到我們將.PagerTitleStrip將其作為ViewPager的子控件直接嵌入其中；這是第一步；當然android:layout_gravity=""的值要設置為top或bottom。將標題欄顯示在頂部或底部。
2、重寫適配器的getPageTitle（）函數(shù)
便于大家有個整體認識，先貼全局代碼，然后再逐個講：

package com.example.testviewpage_2; 

import java.util.ArrayList; 
import java.util.List; 
import android.app.Activity; 
import android.os.Bundle; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.PagerTitleStrip; 
import android.support.v4.view.ViewPager; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class MainActivity extends Activity { 
 
 private View view1, view2, view3; 
 private List<View> viewList;// view數(shù)組 
 private ViewPager viewPager; // 對應的viewPager 
  
 private List<String> titleList; //標題列表數(shù)組 
  
 @Override 
 protected void onCreate(Bundle savedInstanceState) { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_main); 
  viewPager = (ViewPager) findViewById(R.id.viewpager); 
  LayoutInflater inflater = getLayoutInflater(); 
  view1 = inflater.inflate(R.layout.layout1, null); 
  view2 = inflater.inflate(R.layout.layout2, null); 
  view3 = inflater.inflate(R.layout.layout3, null); 
 
  viewList = new ArrayList<View>();// 將要分頁顯示的View裝入數(shù)組中 
  viewList.add(view1); 
  viewList.add(view2); 
  viewList.add(view3); 
   
  titleList = new ArrayList<String>();// 每個頁面的Title數(shù)據(jù) 
  titleList.add("王鵬"); 
  titleList.add("姜語"); 
  titleList.add("結婚"); 
 
  PagerAdapter pagerAdapter = new PagerAdapter() { 
 
   @Override 
   public boolean isViewFromObject(View arg0, Object arg1) { 
    // TODO Auto-generated method stub 
    //根據(jù)傳來的key，找到view,判斷與傳來的參數(shù)View arg0是不是同一個視圖 
    return arg0 == viewList.get((int)Integer.parseInt(arg1.toString())); 
   } 
 
   @Override 
   public int getCount() { 
    // TODO Auto-generated method stub 
    return viewList.size(); 
   } 
 
   @Override 
   public void destroyItem(ViewGroup container, int position, 
     Object object) { 
    // TODO Auto-generated method stub 
    container.removeView(viewList.get(position)); 
   } 
 
   @Override 
   public Object instantiateItem(ViewGroup container, int position) { 
    // TODO Auto-generated method stub 
    container.addView(viewList.get(position)); 
     
    //把當前新增視圖的位置（position）作為Key傳過去 
    return position; 
   } 
    
   @Override 
   public CharSequence getPageTitle(int position) { 
    // TODO Auto-generated method stub 
    return titleList.get(position); 
   } 
  }; 
 
  viewPager.setAdapter(pagerAdapter); 
 
 } 
 
}

3、變量

private List<String> titleList; //標題列表數(shù)組

申請了一個String數(shù)組，用來存儲三個頁面所對應的標題的
4、初始化

titleList = new ArrayList<String>();// 每個頁面的Title數(shù)據(jù) 
titleList.add("王鵬"); 
titleList.add("姜語"); 
titleList.add("結婚");

在初始化階段增加了這么一段初始化數(shù)組的代碼。
5、重寫CharSequence getPageTitle(int )函數(shù)

@Override 
public CharSequence getPageTitle(int position) { 
 // TODO Auto-generated method stub 
 return titleList.get(position); 
}

根據(jù)位置返回當前所對應的標題。

大家可以看到，其實這里僅僅只重寫了getPageTitle（）函數(shù)，將其根據(jù)不同的位置返回不同的字符串就可以實現(xiàn)上面的標題欄功能。第一和第二步有關數(shù)組和初始化，其實都是這了這一步，其實我們完全可以用下面這個代碼來取代它們：

@Override 
public CharSequence getPageTitle(int position) { 
 // TODO Auto-generated method stub 
 switch (position) { 
 case 0: 
  return "王鵬"; 
 case 1: 
  return "姜語"; 
 case 2: 
  return "結婚"; 
 
 default: 
  return ""; 
 } 
}

這樣效果是一樣一樣的，只是代碼不好維護而已。

設置標題
將Page的Title分離出來的一個自定義View，這樣可以靈活的設置title的樣式、文本。

效果：

2016323142741204.jpg (1022×854)

2016323142803623.jpg (1034×834)

xml使用：

<android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android" 
 android:id="@+id/pager" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent"> 
 
 <android.support.v4.view.PagerTitleStrip 
  android:id="@+id/pager_title_strip" 
  android:layout_width="match_parent" 
  android:layout_height="30dp" 
  android:layout_gravity="bottom" 
  android:paddingTop="4dp" 
  android:paddingBottom="4dp" /> 
</android.support.v4.view.ViewPager>

android:layout_gravity 控制標題的位置一般取值為 bottom或top

看到開源項目ImageLoader中使用了這個，找了半天沒看到哪里findbyid的，
原來在它的源碼里就把它想成是ViewPager的子控件了。
部份源碼：

@Override 
 protected void onAttachedToWindow() { 
  super.onAttachedToWindow(); 
 
  final ViewParent parent = getParent(); 
  if (!(parent instanceof ViewPager)) { 
   throw new IllegalStateException( 
     "PagerTitleStrip must be a direct child of a ViewPager."); 
  } 
 
  final ViewPager pager = (ViewPager) parent; 
  final PagerAdapter adapter = pager.getAdapter(); 
 
  pager.setInternalPageChangeListener(mPageListener); 
  pager.setOnAdapterChangeListener(mPageListener); 
  mPager = pager; 
  updateAdapter(mWatchingAdapter != null ? mWatchingAdapter.get() : null, adapter); 
 }

分析：在onAttachedToWindow()時，直接找出parent-view，如果是ViewPager才能使用，否則直接拋出異常。

設置title值：
PagerAdapter 里有一個getPageTitle()，需要重寫它，然后可以根據(jù)不同的page返回不同的title。

@Override 
public CharSequence getPageTitle(int position) { 
 switch (position) { 
  case 0: 
   return getString(R.string.title_list); 
  case 1: 
   return getString(R.string.title_grid); 
  default: 
 return null; 
 } 
}

而在PageTitleStrip的updateText()源碼里，調用了viewPager的adapter.getPageTitle，拿到title并設置。

您可能感興趣的文章:

Android?實現(xiàn)卡片堆疊錢包管理動畫效果
這篇文章主要介紹了Android?實現(xiàn)卡片堆疊錢包管理動畫效果,實現(xiàn)思路是在動畫回調中requestLayout?實現(xiàn)動畫效果，用Bounds?對象記錄每一個CardView?對象的初始位置，當前位置，運動目標位置，需要的朋友可以參考下
2022-07-07
SpringBoot 打包文件名增加編譯時間
這篇文章主要為大家介紹了SpringBoot 打包編譯時間實現(xiàn)過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-08-08
Android 全局異常捕獲實例詳解
這篇文章主要介紹了 Android 全局異常捕獲實例詳解的相關資料,需要的朋友可以參考下
2017-06-06
android SQLite數(shù)據(jù)庫總結
本文主要介紹了android SQLite數(shù)據(jù)庫的相關知識。具有一定的參考價值，下面跟著小編一起來看下吧
2017-01-01
Android獲取聯(lián)系人頭像的方法
這篇文章主要介紹了Android獲取聯(lián)系人頭像的方法,結合實例形式分析了Android調用聯(lián)系人頭像的相關操作技巧,涉及Bitmap對象及ImageView的使用方法,需要的朋友可以參考下
2016-08-08
Android 讓自定義TextView的drawableLeft與文本一起居中
本文主要介紹Android 自定義控件TextView顯示居中問題,在開發(fā)過程中經常會遇到控件的重寫,這里主要介紹TextView的drawableLeft與文本一起居中的問題
2016-07-07
Android升級gradle 后引入aar包報錯解決
這篇文章主要為大家介紹了Android升級gradle 后引入aar包報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-04-04
android判斷動畫已結束示例代碼
添加一個動畫效果，發(fā)現(xiàn)動畫沒執(zhí)行完就直接跳轉或者finish掉，添加動畫監(jiān)聽事件即可，示例代碼如下
2014-10-10
如何利用Android Studio將moudle變成jar示例詳解
這篇文章主要給大家介紹了關于如何利用Android Studio將moudle變成jar的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來跟著小編一起學習學習吧。
2017-08-08
Android WebView 的簡單使用
這篇文章主要介紹了Android WebView 的簡單使用的相關資料,這里提供簡單實例及實現(xiàn)代碼，需要的朋友可以參考下
2016-12-12