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

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

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

先看個(gè)簡(jiǎn)單的，先上個(gè)效果圖，吸引大家一下眼球。

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

三個(gè)頁(yè)面間的滑動(dòng)，此時(shí)是帶著上面的標(biāo)題一塊滑動(dòng)的。
看一下android 對(duì)于PagerTitleStrip的官方解釋：

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

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

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

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

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的子控件直接嵌入其中；這是第一步；當(dāng)然android:layout_gravity=""的值要設(shè)置為top或bottom。將標(biāo)題欄顯示在頂部或底部。
2、重寫適配器的getPageTitle（）函數(shù)
便于大家有個(gè)整體認(rèn)識(shí)，先貼全局代碼，然后再逐個(gè)講：

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; // 對(duì)應(yīng)的viewPager 
  
 private List<String> titleList; //標(biāo)題列表數(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>();// 將要分頁(yè)顯示的View裝入數(shù)組中 
  viewList.add(view1); 
  viewList.add(view2); 
  viewList.add(view3); 
   
  titleList = new ArrayList<String>();// 每個(gè)頁(yè)面的Title數(shù)據(jù) 
  titleList.add("王鵬"); 
  titleList.add("姜語(yǔ)"); 
  titleList.add("結(jié)婚"); 
 
  PagerAdapter pagerAdapter = new PagerAdapter() { 
 
   @Override 
   public boolean isViewFromObject(View arg0, Object arg1) { 
    // TODO Auto-generated method stub 
    //根據(jù)傳來(lái)的key，找到view,判斷與傳來(lái)的參數(shù)View arg0是不是同一個(gè)視圖 
    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)); 
     
    //把當(dāng)前新增視圖的位置（position）作為Key傳過(guò)去 
    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; //標(biāo)題列表數(shù)組

申請(qǐng)了一個(gè)String數(shù)組，用來(lái)存儲(chǔ)三個(gè)頁(yè)面所對(duì)應(yīng)的標(biāo)題的
4、初始化

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

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

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

根據(jù)位置返回當(dāng)前所對(duì)應(yīng)的標(biāo)題。

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

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

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

設(shè)置標(biāo)題
將Page的Title分離出來(lái)的一個(gè)自定義View，這樣可以靈活的設(shè)置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 控制標(biāo)題的位置一般取值為 bottom或top

看到開源項(xiàng)目ImageLoader中使用了這個(gè)，找了半天沒(méi)看到哪里findbyid的，
原來(lái)在它的源碼里就把它想成是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()時(shí)，直接找出parent-view，如果是ViewPager才能使用，否則直接拋出異常。

設(shè)置title值：
PagerAdapter 里有一個(gè)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()源碼里，調(diào)用了viewPager的adapter.getPageTitle，拿到title并設(shè)置。

您可能感興趣的文章: