Android應(yīng)用中使用ViewPager實(shí)現(xiàn)類似QQ的界面切換效果

更新時(shí)間：2016年03月23日 10:50:11 作者：vampirecarter

這篇文章主要介紹了Android應(yīng)用中使用ViewPager實(shí)現(xiàn)類似QQ的界面切換效果的示例,文中的例子重寫了PagerAdapter,并且講解了如何解決Android下ViewPager和PagerAdapter中調(diào)用notifyDataSetChanged失效的問題,需要的朋友可以參考下

這幾天在研究ViewPager，簡(jiǎn)單的寫一下如何使用ViewPager實(shí)現(xiàn)類似于QQ的“最近聯(lián)系人、好友、群組”的界面切換（不知道他們是不是用這個(gè)方法實(shí)現(xiàn)的）。
ViewPager已經(jīng)在android-sdk中加入了，具體的位置在%android_sdk_home%\android-compatibility\v4，%android_sdk_home%是你的android-sdk-windows目錄。

好，下面放一張效果圖：

2016323104647071.png (480×800)

步驟一：新建一個(gè)工程，我的是Viewpager
步驟二：導(dǎo)入jar包
具體如下：
右鍵工程--Properties--單擊左側(cè)Java Build Path--單擊右側(cè)Libraries標(biāo)簽--單擊右側(cè)Add External Jars--選擇上面描述位置的jar包，保存

步驟三：編寫一個(gè)主界面，加入android.support.v4.view.ViewPager組件

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:orientation="vertical" > 
 
  <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello" /> 
   
   
  <android.support.v4.view.ViewPager 
    android:id="@+id/mViewPager" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    /> 
 
   
</LinearLayout>

步驟四：編寫三個(gè)要添加進(jìn)來的界面
界面都很簡(jiǎn)單，隨便寫的
界面1

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:background="#ff0000" 
  android:orientation="vertical" > 
 
  <Button 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="layout1" /> 
 
</LinearLayout>

界面2

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:background="#00ff00" 
  android:orientation="vertical" > 
 
  <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="layout2" /> 
 
</LinearLayout>

界面3

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:background="#0000ff" 
  android:orientation="vertical" > 
 
  <TextView 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="layout3" /> 
 
</LinearLayout>

步驟五：編寫主類，我的名字是叫ViewpagerActivity

package com.carter.viewpager; 
 
import java.util.ArrayList; 
import java.util.List; 
import java.util.zip.Inflater; 
 
import android.app.Activity; 
import android.app.ActivityGroup; 
import android.content.Intent; 
import android.os.Bundle; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.support.v4.view.ViewPager.OnPageChangeListener; 
import android.util.Log; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.view.ViewGroup; 
 
public class ViewpagerActivity extends ActivityGroup { 
   
  /** 
   * 能夠支持滑動(dòng)的組件 
   */ 
  ViewPager mViewPager; 
   
  /** 
   * ViewPager 需要設(shè)置該Adapter才能實(shí)現(xiàn)添加界面， 
   * 該Adapter繼承自PagerAdapter 
   */ 
  MyPagerAdapter adapter; 
   
  /** 
   * 用于保存三個(gè)界面 
   */ 
  List<View> list;  
   
  /** 
   * 用于生成界面 
   */ 
  LayoutInflater mInflater; 
   
   
   
   
  /** Called when the activity is first created. */ 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 
     
    mInflater = this.getLayoutInflater(); 
     
    /** 
     * 添加進(jìn)來三個(gè)界面到List，用于初始化PagerAdapter 
     */ 
    list = new ArrayList<View>(); 
    list.add(this.getLocalActivityManager().startActivity("layout1", new Intent(ViewpagerActivity.this, Layout1Activity.class)).getDecorView()); 
    list.add(mInflater.inflate(R.layout.layout2, null)); 
    list.add(mInflater.inflate(R.layout.layout3, null)); 
     
    mViewPager = (ViewPager)findViewById(R.id.mViewPager); 
    adapter = new MyPagerAdapter(list); 
    mViewPager.setAdapter(adapter); 
     
    /** 
     * 為ViewPager添加PageChangeListener，在回調(diào)的方法中可以完成其他的事情，例如處理一些界面標(biāo)簽的轉(zhuǎn)換之類的，如果你有標(biāo)簽欄的話 
     */ 
    mViewPager.setOnPageChangeListener(new OnPageChangeListener() { 
       
      @Override 
      public void onPageSelected(int arg0) { 
        // TODO Auto-generated method stub 
        Log.i("carter", "onPageSelected"); 
      } 
       
      @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 
         
      } 
    }); 
     
  } 
   
   
   
   
  class MyPagerAdapter extends PagerAdapter 
  { 
    List<View> mList; 
     
    public MyPagerAdapter(List<View> list){ 
      mList = list; 
    } 
 
    @Override 
    public int getCount() { 
      // TODO Auto-generated method stub 
      return mList.size(); 
    } 
 
    @Override 
    public boolean isViewFromObject(View arg0, Object arg1) { 
      // TODO Auto-generated method stub 
      return arg0 == (arg1); 
    } 
 
    @Override 
    public void destroyItem(View container, int position, Object object) { 
      // TODO Auto-generated method stub 
      ((ViewPager)container).removeView(mList.get(position)); 
    } 
 
    @Override 
    public Object instantiateItem(View container, int position) { 
      // TODO Auto-generated method stub 
      ((ViewPager)container).addView(mList.get(position), 0); 
      return mList.get(position); 
    }     
 
    @Override 
    public void finishUpdate(ViewGroup container) { 
      // TODO Auto-generated method stub 
      super.finishUpdate(container); 
    } 
  } 
}

代碼解讀：
1、在上面重寫了PagerAdapter，在里面最重要的方法就是

@Override 
    public Object instantiateItem(View container, int position) { 
      // TODO Auto-generated method stub 
      ((ViewPager)container).addView(mList.get(position), 0); 
      return mList.get(position); 
    }

具體為什么每次都是addView到0的位置，目前我還不知道，這個(gè)也是從網(wǎng)上找了一個(gè)方法看到的。

2、在初始化List的時(shí)候，里面包含的內(nèi)容是一個(gè)個(gè)的View元素，在我的了解范圍內(nèi)有兩種方法
第一種就是通過添加Window的getDecorView（）來得到一個(gè)View；
第二種就是通過LayoutInflater，從xml中生成一個(gè)View。
需要注意的是，第一種方法，需要主類繼承自ActivityGroup，這樣才能在添加時(shí)使用getLocalActivityManager以及之后的方法，需要生成的Activity，例如本例中的Layout1Activity，要在AndroidManifest.xml中聲明。

/** 
 * 添加進(jìn)來三個(gè)界面到List，用于初始化PagerAdapter 
 */ 
list = new ArrayList<View>(); 
list.add(this.getLocalActivityManager().startActivity("layout1", new Intent(ViewpagerActivity.this, Layout1Activity.class)).getDecorView()); 
list.add(mInflater.inflate(R.layout.layout2, null)); 
list.add(mInflater.inflate(R.layout.layout3, null));

3、如果只是從xml生成View來添加的話，完全可以移除繼承ActivityGroup。
4、如果使用startActivity的方法來啟動(dòng)，需要添加進(jìn)來的幾個(gè)Activity，是一起在加入時(shí)就初始化的，可以通過在onCreate（）方法中打LOG看出來。

PS：如何解決Android下ViewPager和PagerAdapter中調(diào)用notifyDataSetChanged失效的問題
具體講解如下：
Google在Android 3.0SDK中推出的ViewPager控件很大程度上滿足了開發(fā)者開發(fā)頁(yè)面左右移動(dòng)切換的功能，使用非常方便。但是使用中發(fā)現(xiàn)，在刪除或者修改數(shù)據(jù)的時(shí)候，PagerAdapter無法像BaseAdapter那樣僅通過notifyDataSetChanged方法通知刷新View。
最基本的方法：
針對(duì)于child view比較簡(jiǎn)單的情況（例如僅有TextView、ImageView等，沒有ListView等展示數(shù)據(jù)的情況），可以在自己的Adapter中加入代碼：

@Override  
public int getItemPosition(Object object) {  
  return POSITION_NONE;  
}

這樣既可達(dá)到一般情況下要求的效果。
存在的問題：
這不是PagerAdapter中的Bug，通常情況下，調(diào)用notifyDataSetChanged方法會(huì)讓ViewPager通過Adapter的getItemPosition方法查詢一遍所有child view，這種情況下，所有child view位置均為POSITION_NONE，表示所有的child view都不存在，ViewPager會(huì)調(diào)用destroyItem方法銷毀，并且重新生成，加大系統(tǒng)開銷，并在一些復(fù)雜情況下導(dǎo)致邏輯問題。特別是對(duì)于只是希望更新child view內(nèi)容的時(shí)候，造成了完全不必要的開銷。
更有效地方法：
更為靠譜的方法是因地制宜，根據(jù)自己的需求來實(shí)現(xiàn)notifyDataSetChanged的功能，比如，在僅需要對(duì)某個(gè)View內(nèi)容進(jìn)行更新時(shí)，在instantiateItem()時(shí)，用View.setTag方法加入標(biāo)志，在需要更新信息時(shí)，通過findViewWithTag的方法找到對(duì)應(yīng)的View進(jìn)行更新即可。

您可能感興趣的文章: