Android多畫面投影片:ViewPager基礎上，利用與PagerTabStrip出生缺陷(原始碼)

標籤：

近期使用ViewPager。讀了幾個人說是不是很清晰的資訊，乾脆自己寫demo總結下。

範例非常easy。Activity裡有三個介面能夠滑動。每個介面都有一個button並設定好了監聽。PagerTabStrip也就是滑動時的那個標識線。在View的下方。下為代碼:

activity_main.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"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/hello_world" />    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_centerInParent="true" >        <android.support.v4.view.PagerTabStrip            android:id="@+id/pagertab"            android:layout_width="match_parent"            android:layout_height="wrap_content"             android:layout_gravity="bottom"/>    </android.support.v4.view.ViewPager></RelativeLayout>

以下是三個view布局，都差點兒相同：

first_pager_layout.xml

<?
xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     android:background="@android:color/holo_blue_bright">    <Button     android:id="@+id/btn_in_first"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="請點擊"    android:layout_gravity="center"/></LinearLayout>

second_pager_layout.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     android:background="@android:color/holo_green_light"> <Button     android:id="@+id/btn_in_second"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="請點擊"    android:layout_gravity="center"/>   </LinearLayout>

third_pager_layout.xml

<?xml version="1.0" encoding="utf-8"?
><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     android:background="@android:color/holo_red_light">    <Button     android:id="@+id/btn_in_third"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:text="請點擊"    android:layout_gravity="center"/></LinearLayout>

MainActivity.java（這是主程式裡。在裡面執行個體化ViewPager並設定它的適配器）

package org.yanzi.testviewpager1;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.content.Context;import android.graphics.Color;import android.os.Bundle;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.PagerTitleStrip;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.Menu;import android.view.View;import android.widget.Button;import android.widget.Toast;public class MainActivity extends Activity {List<View> mViews = new ArrayList<View>();String[] mTitles = {"頁面1", "頁面2", "頁面3"};MyPagerAdapter pagerAdapter;PagerTabStrip pagerTabStrip;PagerTitleStrip pagerTitleStrip;ViewPager viewPager;View view1, view2, view3;Button btn1, btn2, btn3;BtnListener btnListener;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initUI();LayoutInflater flater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);view1 = flater.inflate(R.layout.first_pager_layout, null);view2 = flater.inflate(R.layout.second_pager_layout, null);view3 = flater.inflate(R.layout.third_pager_layout, null);mViews.add(view1);mViews.add(view2);mViews.add(view3);pagerAdapter = new MyPagerAdapter(mViews, mTitles);viewPager.setAdapter(pagerAdapter);viewPager.setCurrentItem(1);//設定pagerTabStrippagerTabStrip.setTabIndicatorColor(Color.RED);pagerTabStrip.setTextColor(Color.RED);pagerTabStrip.setClickable(false);pagerTabStrip.setTextSpacing(40);pagerTabStrip.setBackgroundColor(Color.GRAY);pagerTabStrip.setDrawFullUnderline(true);/*pagerTitleStrip.setTextColor(Color.RED);pagerTitleStrip.setTextSpacing(40);*///ViewPager滑動監聽viewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int arg0) {// TODO Auto-generated method stubshowToast("切換至:" + mTitles[arg0]);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}});initBtns();}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}private void initUI(){viewPager = (ViewPager)findViewById(R.id.viewpager);pagerTabStrip = (PagerTabStrip)findViewById(R.id.pagertab);//pagerTitleStrip = (PagerTitleStrip)findViewById(R.id.pagertab);}private void initBtns(){if(view1 != null){btn1 = (Button)view1.findViewById(R.id.btn_in_first);}if(view2 != null){btn2 = (Button)view2.findViewById(R.id.btn_in_second);}if(view3 != null){btn3 = (Button)view3.findViewById(R.id.btn_in_third);}btnListener = new BtnListener();btn1.setOnClickListener(btnListener);btn2.setOnClickListener(btnListener);btn3.setOnClickListener(btnListener);}class BtnListener implements View.OnClickListener{@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (v.getId()){case R.id.btn_in_first:showToast("您點擊了第一個介面");break;case R.id.btn_in_second:showToast("您點擊了第2個介面");break;case R.id.btn_in_third:showToast("您點擊了第3個介面");break;default:break;}}}private void showToast(String s){Toast.makeText(getApplicationContext(), s, Toast.LENGTH_SHORT).show();}}

MyPagerAdapter.java(這是ViewPager的適配器，繼承PagerAdapter,將其單獨寫到一個檔案中了)

package org.yanzi.testviewpager1;import java.util.List;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;public class MyPagerAdapter extends PagerAdapter {private List<View> mListViews;private String[] mTitles;public MyPagerAdapter(List<View> views, String[] titles){this.mListViews = views;this.mTitles = titles;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mListViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn (arg0==arg1);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO Auto-generated method stubcontainer.removeView(mListViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODO Auto-generated method stubcontainer.addView(mListViews.get(position), 0);return mListViews.get(position);}@Overridepublic CharSequence getPageTitle(int position) {// TODO Auto-generated method stubreturn mTitles[position];}}

要點:

1、ViewPager說白了就是個控制項，在使用時包名要帶全是android.support.v4.view.ViewPager。

由於我的ADT-Bundle版本號碼比較高。這個包預設內建了,且預設是隨apk打包匯出的。

例如以:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuemkxMjI1NjI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" />

假設在Android Private Libraries裡沒這個包，則要自己在屬性的Libraries裡自己加入。

加入後記得在所看到的的Order and Export裡將其打勾。

2.理論上說要實現滑屏僅僅要一個ViewPager就能夠了，不須要再在裡面嵌套例如以下:

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagertab"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" 
            android:layout_gravity="bottom"/>

這個PagerTabStrip就是個橫線，假設想用它來標識當前在哪個View的話能夠加它，當然最後你會發現這就是個坑爹的玩意。

除了PagerTabStrip。另一個PagerTitleStrip，兩者的使用方法地位都是一樣的，均要嵌套在ViewPager裡。差別是：

a、PagerTabStrip在效果上包括了PagerTitleStrip，假設僅僅加入PagerTabStrip能夠看到僅僅有線，可是它占的布局是有一定高度的。

預設是不顯示標題的，假設要顯示需在適配器裡重寫：

@Override
public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return mTitles[position];
}

就會顯示標題了。關於標題及這個線的顏色，和整個標識View的背景能夠再代碼裡設定。demo裡有示範範例。

b、PagerTitleStrip僅僅顯示標題而沒有那個線。

c、PagerTabStrip能夠點擊切換View，而PagerTitleStrip不能點擊。很多其它參見連結

兩者相對父親ViewPager的位置，也就是標識是在View的上面還是以下。通過PagerTabStrip的屬性android:layout_gravity="bottom"來設定。

3、就像ListView的一樣，ViewPager的關鍵在於適配器，而要用正常使用須要至少重寫以下四個方法:

@Overridepublic int getCount() {// TODO Auto-generated method stubreturn mListViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn (arg0==arg1);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {// TODO Auto-generated method stubcontainer.removeView(mListViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODO Auto-generated method stubcontainer.addView(mListViews.get(position), 0);return mListViews.get(position);}

以下這種方法是用來顯示標題的，一般不重寫，由於PagerTabStrip是個中看不中用的玩意。

@Overridepublic CharSequence getPageTitle(int position) {// TODO Auto-generated method stubreturn mTitles[position];}

4、在設定適配器後。通過viewPager.setCurrentItem(1);來設定預設的ViewPager顯示哪一個View。

1標識第二個介面。

5、每個View裡都用子控制項。通過initBtns()來獲得，注意findViewById時一定要前面加上它的父親.例如以下：

btn1 = (Button)view1.findViewById(R.id.btn_in_first);更為嚴謹的做法是僅僅有顯示當前View時，這個View裡的控制項才幹夠被監聽。

6、當ViewPager的View發生變化時，設定監聽:

//ViewPager滑動監聽
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裡的非常多方法都是沒有效果的如pagerTabStrip.setTextSpacing(40); 

pagerTabStrip.setDrawFullUnderline(true);

以下是:

能夠看到顯示頁面3時，以下的PageTabStrip居然發生移位了，沒人會須要這種體驗，真是個坑爹的玩意啊。本來我還不死心想找到不自己寫PageTabStrip情況下解決這個問題。看到連結 徹底放棄了。關於標識還是自己來寫吧，興許文章會再給出完整示範範例。

代碼下載:http://download.csdn.net/detail/yanzi1225627/7223287

Android多畫面投影片:ViewPager基礎上，利用與PagerTabStrip出生缺陷(原始碼)