ViewPager 詳解（三）---PagerTabStrip與PagerTitleStrip添加標題欄的異同

時間  2019-11-17
標籤 viewpager 詳解 pagertabstrip pagertitlestrip 添加 標題欄 異同 欄目 Android 简体版
原文   原文鏈接

http://blog.csdn.net/harvic880925/article/details/38521865html

前言：在前兩篇文章中，咱們講解了滑動頁面的的實現方法與四大函數的意義，但有時，僅僅實現頁面滑動是不夠的，還要有標題欄纔會顯得更友好。因此在這篇文章中，我將會向你們展現在android.support.v4包中的兩個控件PagerTabStrip與PagerTitleStrip，他們都是用來實現標題欄的，但各自有些不一樣，在這篇文章中，咱們就講講它們各自都能實現怎樣的功能，又有哪些異同點。java

 

1、PagerTitleStrip

先看個簡單的，先上個效果圖，吸引你們一下眼球。android

三個頁面間的滑動，此時是帶着上面的標題一塊滑動的。數組

  

看一下android 對於PagerTitleStrip的官方解釋：app

 

Class Overview

 

PagerTitleStrip is a non-interactive indicator of the current, next, and previous pages of a ViewPager. It is intended to be used as a child view of a ViewPager widget in your XML layout. Add it as a child of a ViewPager in your layout file and set its android:layout_gravity to TOP or BOTTOM to pin it to the top or bottom of the ViewPager. The title from each page is supplied by the methodgetPageTitle(int) in the adapter supplied to the ViewPager.ide

For an interactive indicator, see PagerTabStrip.函數

翻譯：佈局

PagerTitleStrip是ViewPager的一個關於當前頁面、上一個頁面和下一個頁面的一個非交互的指示器。它常常做爲ViewPager控件的一個子控件被被添加在XML佈局文件中。在你的佈局文件中，將它做爲子控件添加在ViewPager中。並且要將它的 android:layout_gravity 屬性設置爲TOP或BOTTOM來將它顯示在ViewPager的頂部或底部。每一個頁面的標題是經過適配器的getPageTitle(int)函數提供給ViewPager的。字體

 

我可能譯的不大通順，這裏英文也難度不大，你們應該也能看得懂，但我仍是着重講兩點：ui

一、首先，文中提到：在你的佈局文件中，將它做爲子控件添加在ViewPager中。

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

 

根據這兩點，咱們就能夠看代碼了：

一、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。將標題欄顯示在頂部或底部。

 

 

二、重寫適配器的getPageTitle（）函數

便於你們有個總體認識，先貼全局代碼，而後再逐個講，這段代碼是在《ViewPager 詳解（二）---詳解四大函數》 直接更改來的，若是不太明白，先看看這篇文章。

 

 

package com.example.testviewpage_2;
/**
 * @author  harvic
 * @date 2014.8.12
 */
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數組
	private ViewPager viewPager; // 對應的viewPager
	
	private List<String> titleList;  //標題列表數組
	
	@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裝入數組中
		viewList.add(view1);
		viewList.add(view2);
		viewList.add(view3);
		
		titleList = new ArrayList<String>();// 每一個頁面的Title數據
		titleList.add("王鵬");
		titleList.add("姜語");
		titleList.add("結婚");

		PagerAdapter pagerAdapter = new PagerAdapter() {

			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				//根據傳來的key，找到view,判斷與傳來的參數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);

	}

}

相比較《ViewPager 詳解（二）---詳解四大函數》這裏做了一點更改：

 

一、變量

 

private List<String> titleList;  //標題列表數組

申請了一個String數組，用來存儲三個頁面所對應的標題的

二、初始化

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

在初始化階段增長了這麼一段初始化數組的代碼。

三、重寫CharSequence getPageTitle(int )函數

 

 

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

根據位置返回當前所對應的標題。

 

 

你們能夠看到，其實這裏僅僅只重寫了getPageTitle（）函數，將其根據不一樣的位置返回不一樣的字符串就能夠實現上面的標題欄功能。第一和第二步有關數組和初始化，其實都是這了這一步，其實咱們徹底能夠用下面這個代碼來取代它們：

 

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

	default:
		return "";
	}
}

這樣效果是同樣同樣的，只是代碼很差維護而已。好了，有關PagerTabStrip的問題，咱們就先說到這。

2、PagerTabStrip

一樣，先看個PagerTabStrip作出來的效果是怎樣的。

此例是以《ViewPager 詳解（一）---基本入門》爲基礎，更改而成；

    

可能看不出太大區別，其實這兩個實現的效果基本差很少，但有兩點不一樣：

一、PagerTabStrip在當前頁面下，會有一個下劃線條來提示當前頁面的Tab是哪一個。

二、PagerTabStrip的Tab是能夠點擊的，當用戶點擊某一個Tab時，當前頁面就會跳轉到這個頁面，而PagerTitleStrip則沒這個功能。

 

一樣，先看看官方對PagerTabStrip的解釋：

 

Class Overview

 

PagerTabStrip is an interactive indicator of the current, next, and previous pages of a ViewPager. It is intended to be used as a child view of a ViewPager widget in your XML layout. Add it as a child of a ViewPager in your layout file and set its android:layout_gravity to TOP or BOTTOM to pin it to the top or bottom of the ViewPager. The title from each page is supplied by the methodgetPageTitle(int) in the adapter supplied to the ViewPager.

For a non-interactive indicator, see PagerTitleStrip.

翻譯：

PagerTabStrip是ViewPager的一個關於當前頁面、上一個頁面和下一個頁面的一個可交互的指示器。它常常做爲ViewPager控件的一個子控件被被添加在XML佈局文件中。在你的佈局文件中，將它做爲子控件添加在ViewPager中。並且要將它的 android:layout_gravity 屬性設置爲TOP或BOTTOM來將它顯示在ViewPager的頂部或底部。每一個頁面的標題是經過適配器的getPageTitle(int)函數提供給ViewPager的。

能夠看到，除了第一句之外的其它句與PagerTitleStrip的解釋徹底相同。即用法也是相同的。只是PagerTabStrip是可交互的，而PagerTitleStrip是不可交互的區別。對於區別在哪些位置，便是上面的兩點（是否可點擊與下劃線指示條）。

 

用法與PagerTitleStrip徹底相同，即：

 

一、首先，文中提到：在你的佈局文件中，將它做爲子控件添加在ViewPager中。

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

看看實例：

一、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="wrap_content"
        android:layout_gravity="center">
        
                <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagertab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:layout_gravity="top"/>
        
    </android.support.v4.view.ViewPager>

</RelativeLayout>

能夠看到，一樣，是將PagerTabStrip做爲ViewPager的一個子控件直接插入其中，固然android:layout_gravity=""的值同樣要設置爲top或bottom。

 

二、重寫適配器的getPageTitle（）函數

所有代碼：

 

package com.example.testviewpage_2;

/**
 * @author  harvic
 * @date 2014.8.13
 */
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.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數組
	private ViewPager viewPager; // 對應的viewPager

	private List<String> titleList;

	@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裝入數組中
		viewList.add(view1);
		viewList.add(view2);
		viewList.add(view3);

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

		PagerAdapter pagerAdapter = new PagerAdapter() {

			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				return arg0 == arg1;
			}

			@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));

				return viewList.get(position);
			}

			@Override
			public CharSequence getPageTitle(int position) {
				
				return titleList.get(position);
			}
		};

		viewPager.setAdapter(pagerAdapter);

	}

}

這裏的代碼與PagerTitleStrip的徹底相同，就再也不講解了。

 

就這樣，咱們就講完了有關PagerTabStrip的簡單使用方法。下面講一講PagerTabStrip的擴展。

 

三、擴展：PagerTabStrip屬性更改

在源碼中，你們能夠看到有個工程叫TestViewPage_PagerTabStrip_extension，運行一下，效果是這樣的：

    

在上面兩個圖中能夠看到，我更改了兩個地方：

一、下劃線顏色，原生是黑色，我變成了綠色；

二、在Tab標題前加了一個圖片；

下面說說是如何更改的：

一、更改下劃線顏色：

主要靠PagerTabStrip的setTabIndicatorColorResource方法；

代碼以下：

 

pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab);
pagerTabStrip.setTabIndicatorColorResource(R.color.green);

二、添加標題——重寫適配器CharSequence getPageTitle(int)方法

在CharSequence getPageTitle(int position)方法返回值是，咱們不返回String對象，而採用SpannableStringBuilder來構造了下包含圖片的擴展String對像；

 

具體代碼以下，再也不細講，你們能夠看看SpannableStringBuilder的使用方法，就可理解了。

 

@Override
public CharSequence getPageTitle(int position) {

	SpannableStringBuilder ssb = new SpannableStringBuilder("  "+titleList.get(position)); // space added before text
										// for
	Drawable myDrawable = getResources().getDrawable(
			R.drawable.ic_launcher);
	myDrawable.setBounds(0, 0, myDrawable.getIntrinsicWidth(),
			myDrawable.getIntrinsicHeight());
	ImageSpan span = new ImageSpan(myDrawable,
			ImageSpan.ALIGN_BASELINE);

	ForegroundColorSpan fcs = new ForegroundColorSpan(Color.GREEN);// 字體顏色設置爲綠色
	ssb.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 設置圖標
	ssb.setSpan(fcs, 1, ssb.length(),
			Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 設置字體顏色
	ssb.setSpan(new RelativeSizeSpan(1.2f), 1, ssb.length(),
			Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
	return ssb;
}

 

3、總結

 

經過前面的講解，咱們應該清楚的認識到PagerTabStrip與PagerTitleStrip在添加標題欄的異同，但他們實現的標題欄效果很很差，不能指定一個頁面一次顯示一個，或者所有顯示，並且標題還滑動。因此註定主流的App都沒有用這個玩意的。因此這裏也只是一個過渡，在開發中，咱們也不建議使用這兩個東東。

 

爲何沒法改變PagerTabStrip的滑動特性，看這個貼子：《Fixed Tabs with android.support.v4.view.PagerTabStrip or ViewPagerIndicator》

 

參考文章：

《Android多屏滑動:ViewPager基礎使用及PagerTabStrip先天缺陷(附源碼)》

《android:修改PagerTabStrip中的背景顏色，標題字體的樣式、顏色和圖標以及指示條的顏色》

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程