欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實(shí)例

 更新時(shí)間:2016年06月29日 11:01:31   作者:?jiǎn)⑴? 
這篇文章主要介紹了Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實(shí)例,這兩個(gè)子控件一般被用作添加標(biāo)題,在實(shí)際效果上并不是那么好控制,使用的時(shí)候需要謹(jǐn)慎,需要的朋友可以參考下

零、概覽
1.ViewPager說(shuō)白了就是個(gè)控件,在使用時(shí)包名要帶全是Android.support.v4.view.ViewPager。由于我的ADT-Bundle版本比較高,這個(gè)包默認(rèn)自帶了,且默認(rèn)是隨apk打包導(dǎo)出的。如下圖:

2016629105303414.png (279×290)

2016629105343104.png (627×307)

如果在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)的。

2016629105430222.png (300×500)

2016629105446935.png (300×500)

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)的效果是怎樣的。

2016629105738396.png (300×500)

2016629105756297.png (300×500)

可能看不出太大區(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)行一下,效果是這樣的:

2016629105508111.png (300×500)

2016629105524941.png (300×500)

在上面兩個(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; 
} 


相關(guān)文章

最新評(píng)論