Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實(shí)例
零、概覽
1.ViewPager說(shuō)白了就是個(gè)控件，在使用時(shí)包名要帶全是Android.support.v4.view.ViewPager。由于我的ADT-Bundle版本比較高，這個(gè)包默認(rèn)自帶了,且默認(rèn)是隨apk打包導(dǎo)出的。如下圖:
如果在Android Private Libraries里沒(méi)這個(gè)包，則要自己在屬性的Libraries里自己添加。添加后記得在上圖所示的Order and Export里將其打勾。
2.理論上說(shuō)要實(shí)現(xiàn)滑屏只要一個(gè)ViewPager就可以了，不需要再在里面嵌套如下:
<android.support.v4.view.PagerTabStrip android:id="@+id/pagertab" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom"/>
這個(gè)PagerTabStrip就是個(gè)橫線(xiàn)，如果想用它來(lái)標(biāo)識(shí)當(dāng)前在哪個(gè)View的話(huà)可以加它，當(dāng)然最后你會(huì)發(fā)現(xiàn)這就是個(gè)坑爹的玩意。除了PagerTabStrip，還有一個(gè)PagerTitleStrip，兩者的用法地位都是一樣的，均要嵌套在ViewPager里。區(qū)別是：
a、PagerTabStrip在效果上包含了PagerTitleStrip，如果只添加PagerTabStrip可以看到只有線(xiàn)，但是它占的布局是有一定高度的。默認(rèn)是不顯示標(biāo)題的，如果要顯示需在適配器里重寫(xiě)：
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return mTitles[position];
}
就會(huì)顯示標(biāo)題了。關(guān)于標(biāo)題及這個(gè)線(xiàn)的顏色，和整個(gè)標(biāo)識(shí)View的背景可以再代碼里設(shè)置，demo里有示例。
b、PagerTitleStrip只顯示標(biāo)題而沒(méi)有那個(gè)線(xiàn)。
c、PagerTabStrip可以點(diǎn)擊切換View，而PagerTitleStrip不能點(diǎn)擊。更多參見(jiàn)鏈接
兩者相對(duì)父親ViewPager的位置，也就是標(biāo)識(shí)是在View的上面還是下面，通過(guò)PagerTabStrip的屬性android:layout_gravity="bottom"來(lái)設(shè)置。
3、就像ListView的一樣，ViewPager的關(guān)鍵在于適配器，而要用正常使用需要至少重寫(xiě)以下四個(gè)方法:
@Override
public int getCount() {
// TODO Auto-generated method stub
return mListViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
// TODO Auto-generated method stub
return (arg0==arg1);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// TODO Auto-generated method stub
container.removeView(mListViews.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// TODO Auto-generated method stub
container.addView(mListViews.get(position), 0);
return mListViews.get(position);
}
下面這個(gè)方法是用來(lái)顯示標(biāo)題的，一般不重寫(xiě)，因?yàn)镻agerTabStrip是個(gè)中看不中用的玩意。
@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return mTitles[position];
}
4、在設(shè)置適配器后，通過(guò)viewPager.setCurrentItem(1);來(lái)設(shè)置默認(rèn)的ViewPager顯示哪一個(gè)View。1標(biāo)識(shí)第二個(gè)界面。
5、每個(gè)View里都用子控件，通過(guò)initBtns()來(lái)獲得，注意findViewById時(shí)一定要前面加上它的父親.如下：
btn1 = (Button)view1.findViewById(R.id.btn_in_first);
更為嚴(yán)謹(jǐn)?shù)淖龇ㄊ侵挥酗@示當(dāng)前View時(shí)，這個(gè)View里的控件才可以被監(jiān)聽(tīng)。
6、當(dāng)ViewPager的View發(fā)生變化時(shí)，設(shè)置監(jiān)聽(tīng):
//ViewPager滑動(dòng)監(jiān)聽(tīng)
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
showToast("切換至:" + mTitles[arg0]);
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
});
7、PagerTabStrip里的很多方法都是沒(méi)有效果的如pagerTabStrip.setTextSpacing(40);
pagerTabStrip.setDrawFullUnderline(true);
一、PagerTitleStrip
先看個(gè)簡(jiǎn)單的，先上個(gè)效果圖，吸引大家一下眼球。
三個(gè)頁(yè)面間的滑動(dòng)，此時(shí)是帶著上面的標(biāo)題一塊滑動(dòng)的。
PagerTabStrip是ViewPager的一個(gè)關(guān)于當(dāng)前頁(yè)面、上一個(gè)頁(yè)面和下一個(gè)頁(yè)面的一個(gè)非交互的指示器。它經(jīng)常作為ViewPager控件的一個(gè)子控件被被添加在XML布局文件中。在你的布局文件中，將它作為子控件添加在ViewPager中。而且要將它的 android:layout_gravity 屬性設(shè)置為T(mén)OP或BOTTOM來(lái)將它顯示在ViewPager的頂部或底部。每個(gè)頁(yè)面的標(biāo)題是通過(guò)適配器的getPageTitle(int)函數(shù)提供給ViewPager的。
但我還是著重講兩點(diǎn)：
1、首先，文中提到：在你的布局文件中，將它作為子控件添加在ViewPager中。
2、第二，標(biāo)題的獲取，是重寫(xiě)適配器的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、重寫(xiě)適配器的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; // 對(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);
}
}
二、PagerTabStrip
同樣，先看個(gè)PagerTabStrip做出來(lái)的效果是怎樣的。
可能看不出太大區(qū)別，其實(shí)這兩個(gè)實(shí)現(xiàn)的效果基本差不多，但有兩點(diǎn)不同：
1、PagerTabStrip在當(dāng)前頁(yè)面下，會(huì)有一個(gè)下劃線(xiàn)條來(lái)提示當(dāng)前頁(yè)面的Tab是哪個(gè)。
2、PagerTabStrip的Tab是可以點(diǎn)擊的，當(dāng)用戶(hù)點(diǎn)擊某一個(gè)Tab時(shí)，當(dāng)前頁(yè)面就會(huì)跳轉(zhuǎn)到這個(gè)頁(yè)面，而PagerTitleStrip則沒(méi)這個(gè)功能。
同樣，先看看官方對(duì)PagerTabStrip的解釋?zhuān)?br /> PagerTabStrip是ViewPager的一個(gè)關(guān)于當(dāng)前頁(yè)面、上一個(gè)頁(yè)面和下一個(gè)頁(yè)面的一個(gè)可交互的指示器。它經(jīng)常作為ViewPager控件的一個(gè)子控件被被添加在XML布局文件中。在你的布局文件中，將它作為子控件添加在ViewPager中。而且要將它的 android:layout_gravity 屬性設(shè)置為T(mén)OP或BOTTOM來(lái)將它顯示在ViewPager的頂部或底部。每個(gè)頁(yè)面的標(biāo)題是通過(guò)適配器的getPageTitle(int)函數(shù)提供給ViewPager的。
可以看到，除了第一句以外的其它句與PagerTitleStrip的解釋完全相同。即用法也是相同的。只是PagerTabStrip是可交互的，而PagerTitleStrip是不可交互的區(qū)別。對(duì)于區(qū)別在哪些位置，即是上面的兩點(diǎn)（是否可點(diǎn)擊與下劃線(xiàn)指示條）。
用法與PagerTitleStrip完全相同，即：
1、首先，文中提到：在你的布局文件中，將它作為子控件添加在ViewPager中。
2、第二，標(biāo)題的獲取，是重寫(xiě)適配器的getPageTitle(int)函數(shù)來(lái)獲取的。
看看實(shí)例：
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="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的一個(gè)子控件直接插入其中，當(dāng)然android:layout_gravity=""的值一樣要設(shè)置為top或bottom。
2、重寫(xiě)適配器的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.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;
@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
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的完全相同，就不再講解了。
就這樣，我們就講完了有關(guān)PagerTabStrip的簡(jiǎn)單使用方法。下面講一講PagerTabStrip的擴(kuò)展。
3、擴(kuò)展：PagerTabStrip屬性更改
在源碼中，大家可以看到有個(gè)工程叫TestViewPage_PagerTabStrip_extension，運(yùn)行一下，效果是這樣的：
在上面兩個(gè)圖中可以看到，我更改了兩個(gè)地方：
1、下劃線(xiàn)顏色，原生是黑色，我變成了綠色；
2、在Tab標(biāo)題前加了一個(gè)圖片；
下面說(shuō)說(shuō)是如何更改的：
1、更改下劃線(xiàn)顏色：
主要靠PagerTabStrip的setTabIndicatorColorResource方法；
代碼如下：
pagerTabStrip = (PagerTabStrip) findViewById(R.id.pagertab); pagerTabStrip.setTabIndicatorColorResource(R.color.green);
2、添加標(biāo)題——重寫(xiě)適配器CharSequence getPageTitle(int)方法
在CharSequence getPageTitle(int position)方法返回值是，我們不返回String對(duì)象，而采用SpannableStringBuilder來(lái)構(gòu)造了下包含圖片的擴(kuò)展String對(duì)像；
具體代碼如下，不再細(xì)講，大家可以看看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);// 字體顏色設(shè)置為綠色
ssb.setSpan(span, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 設(shè)置圖標(biāo)
ssb.setSpan(fcs, 1, ssb.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);// 設(shè)置字體顏色
ssb.setSpan(new RelativeSizeSpan(1.2f), 1, ssb.length(),
Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
return ssb;
}
- Android App中ViewPager所帶來(lái)的滑動(dòng)沖突問(wèn)題解決方法
- Android中ViewPager實(shí)現(xiàn)滑動(dòng)條及與Fragment結(jié)合的實(shí)例教程
- Android中的ViewPager視圖滑動(dòng)切換類(lèi)的入門(mén)實(shí)例教程
- android教程viewpager自動(dòng)循環(huán)和手動(dòng)循環(huán)
- android配合viewpager實(shí)現(xiàn)可滑動(dòng)的標(biāo)簽欄示例分享
- 使用ViewPager實(shí)現(xiàn)android軟件使用向?qū)Чδ軐?shí)現(xiàn)步驟
- Android利用ViewPager實(shí)現(xiàn)滑動(dòng)廣告板實(shí)例源碼
- Android ViewPager相冊(cè)橫向移動(dòng)的實(shí)現(xiàn)方法
- Android App中使用ViewPager實(shí)現(xiàn)滑動(dòng)分頁(yè)的要點(diǎn)解析
相關(guān)文章
詳解Android 在 ViewPager 中使用 Fragment 的懶加載
本篇文章主要介紹了Android 在 ViewPager 中使用 Fragment 的懶加載，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
列表在 App 中是最常見(jiàn)的形式了，在 Flutter 中提供了 ListView 這個(gè)組件來(lái)實(shí)現(xiàn)列表，本篇將通過(guò) ListView 實(shí)現(xiàn)一個(gè)圖文并茂的列表。2021-05-05
這篇文章主要為大家詳細(xì)介紹了非常實(shí)用的Android圖片工具類(lèi)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Android創(chuàng)建文件實(shí)現(xiàn)對(duì)文件監(jiān)聽(tīng)示例
Android創(chuàng)建文件實(shí)現(xiàn)對(duì)文件監(jiān)聽(tīng),可以用android.os.FileObserver;類(lèi)來(lái)實(shí)現(xiàn),下面是實(shí)現(xiàn)代碼，內(nèi)有注釋2014-01-01
這篇文章主要為大家詳細(xì)介紹了Android使用ViewPager加載圖片和輪播視頻，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Android中使用TabHost 與 Fragment 制作頁(yè)面切換效果
這篇文章主要介紹了Android中使用TabHost 與 Fragment 制作頁(yè)面切換效果的相關(guān)資料,需要的朋友可以參考下2016-03-03
Android使用GestureOverlayView控件實(shí)現(xiàn)手勢(shì)識(shí)別
這篇文章主要為大家詳細(xì)介紹了Android使用GestureOverlayView控件實(shí)現(xiàn)手勢(shì)識(shí)別，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
Android組件間通信--深入理解Intent與IntentFilter
本篇文章是對(duì)Android組件間通信Intent與IntentFilter進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下2013-05-05
Android動(dòng)畫(huà)之小球擬合動(dòng)畫(huà)實(shí)例
這篇文章主要介紹了Android動(dòng)畫(huà)之小球擬合動(dòng)畫(huà)實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-07-07
Android仿美團(tuán)淘寶實(shí)現(xiàn)多級(jí)下拉列表菜單功能
這篇文章主要介紹了Android仿美團(tuán)淘寶實(shí)現(xiàn)多級(jí)下拉列表菜單功能，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01