android中的左右滑屏實現By ViewPager

最近做項目要用到IPHONE 左右滑動特效,想想隻能用viewpager才能實現,先看效果,就是左右滑屏的效果

 

 

具體實現詳解

android compatibility package, revision 3在7月份發佈後,其中有個ViewPager引起瞭我的註意

官方的描述:

 請參考:http://developer.android.com/sdk/compatibility-library.html#Notes

ViewPager的下載與安裝

首先通過SDK Manager更新最新版android compatibility package, revision 3

更新後,在eclipse中工程上點擊右鍵,選擇android tools -> add compatibility library即可完成安裝

實際上就是一個jar包,手工導到工程中也可

jar包所在位置是\android-sdk\extras\android\compatibility\v4\android-support-v4.jar

至此準備環境已經ok
下邊還是通過代碼進行說話吧

準備佈局文件

viewpager_layout.xml

1 <?xml version="1.0" encoding="utf-8"?>

2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3     android:layout_width="fill_parent"

4     android:layout_height="fill_parent" android:orientation="vertical">

5 <!– 此處需要給出全路徑 –>

6 <android.support.v4.view.ViewPager

7     android:id="@+id/viewpagerLayout" android:layout_height="fill_parent"android:layout_width="fill_parent"/>

8 </LinearLayout>
layout1.xml

1 <?xml version="1.0" encoding="utf-8"?>

2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3     android:layout_width="fill_parent"

4     android:layout_height="fill_parent" android:orientation="vertical">

5     <TextView android:textAppearance="?android:attr/textAppearanceLarge"android:layout_height="wrap_content" android:id="@+id/textView1"android:layout_width="fill_parent" android:text="第一頁"></TextView>

6     <EditText android:layout_width="match_parent" android:layout_height="wrap_content"android:id="@+id/editText1">

7         <requestFocus></requestFocus>

8     </EditText>

9 </LinearLayout>
layout2.xml

 

1 <?xml version="1.0" encoding="utf-8"?>

2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3     android:layout_width="fill_parent"

4     android:layout_height="fill_parent" android:orientation="vertical">

5     <TextView android:textAppearance="?android:attr/textAppearanceLarge"android:layout_height="wrap_content" android:id="@+id/textView1"android:layout_width="fill_parent" android:text="第二頁"></TextView>

6     <EditText android:layout_width="match_parent" android:layout_height="wrap_content"android:id="@+id/editText1">

7         <requestFocus></requestFocus>

8     </EditText>

9 </LinearLayout>
layout3.xml
1 <?xml version="1.0" encoding="utf-8"?>

2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3     android:layout_width="fill_parent"

4     android:layout_height="fill_parent" android:orientation="vertical">

5     <TextView android:textAppearance="?android:attr/textAppearanceLarge"android:layout_height="wrap_content" android:id="@+id/textView1"android:layout_width="fill_parent" android:text="第三頁"></TextView>

6     <EditText android:layout_width="match_parent" android:layout_height="wrap_content"android:id="@+id/editText1">

7         <requestFocus></requestFocus>

8     </EditText>

9 </LinearLayout>
主程序
001 package a.b;

002  

003 import java.util.ArrayList;

004 import java.util.List;

005  

006 import android.app.Activity;

007 import android.os.Bundle;

008 import android.os.Parcelable;

009 import android.support.v4.view.PagerAdapter;

010 import android.support.v4.view.ViewPager;

011 import android.support.v4.view.ViewPager.OnPageChangeListener;

012 import android.util.Log;

013 import android.view.LayoutInflater;

014 import android.view.View;

015 import android.widget.EditText;

016  

017 public class TestViewPager extends Activity {

018     private ViewPager myViewPager;

019  

020     private MyPagerAdapter myAdapter;

021      

022     private LayoutInflater mInflater;

023     private List<View> mListViews;

024     private View layout1 = null;

025     private View layout2 = null;

026     private View layout3 = null;

027      

028     @Override

029     protected void onCreate(Bundle savedInstanceState) {

030         super.onCreate(savedInstanceState);

031         setContentView(R.layout.viewpager_layout);

032         myAdapter = new MyPagerAdapter();

033         myViewPager = (ViewPager) findViewById(R.id.viewpagerLayout);

034         myViewPager.setAdapter(myAdapter);

035          

036         mListViews = new ArrayList<View>();

037         mInflater = getLayoutInflater();

038         layout1 = mInflater.inflate(R.layout.layout1, null);

039         layout2 = mInflater.inflate(R.layout.layout2, null);

040         layout3 = mInflater.inflate(R.layout.layout3, null);

041         

042         mListViews.add(layout1);

043         mListViews.add(layout2);

044         mListViews.add(layout3);

045          

046         //初始化當前顯示的view

047         myViewPager.setCurrentItem(1);

048          

049         //初始化第二個view的信息

050         EditText v2EditText = (EditText)layout2.findViewById(R.id.editText1);

051         v2EditText.setText("動態設置第二個view的值");

052          

053         myViewPager.setOnPageChangeListener(new OnPageChangeListener() {

054              

055             @Override

056             public void onPageSelected(int arg0) {

057                 Log.d("k", "onPageSelected – " + arg0);

058                 //activity從1到2滑動,2被加載後掉用此方法

059                 View v = mListViews.get(arg0);

060                 EditText editText = (EditText)v.findViewById(R.id.editText1);

061                 editText.setText("動態設置#"+arg0+"edittext控件的值");

062             }

063              

064             @Override

065             public void onPageScrolled(int arg0, float arg1, int arg2) {

066                 Log.d("k", "onPageScrolled – " + arg0);

067                 //從1到2滑動,在1滑動前調用

068             }

069              

070             @Override

071             public void onPageScrollStateChanged(int arg0) {

072                 Log.d("k", "onPageScrollStateChanged – " + arg0);

073                 //狀態有三個0空閑,1是增在滑行中,2目標加載完畢

074                 /**

075                  * Indicates that the pager is in an idle, settled state. The current page

076                  * is fully in view and no animation is in progress.

077                  */

078                 //public static final int SCROLL_STATE_IDLE = 0;

079                 /**

080                  * Indicates that the pager is currently being dragged by the user.

081                  */

082                 //public static final int SCROLL_STATE_DRAGGING = 1;

083                 /**

084                  * Indicates that the pager is in the process of settling to a final position.

085                  */

086                 //public static final int SCROLL_STATE_SETTLING = 2;

087  

088             }

089         });

090          

091     }

092      

093     private class MyPagerAdapter extends PagerAdapter{

094  

095         @Override

096         public void destroyItem(View arg0, int arg1, Object arg2) {

097             Log.d("k", "destroyItem");

098             ((ViewPager) arg0).removeView(mListViews.get(arg1));

099         }

100  

101         @Override

102         public void finishUpdate(View arg0) {

103             Log.d("k", "finishUpdate");

104         }

105  

106         @Override

107         public int getCount() {

108             Log.d("k", "getCount");

109             return mListViews.size();

110         }

111  

112         @Override

113         public Object instantiateItem(View arg0, int arg1) {

114             Log.d("k", "instantiateItem");

115             ((ViewPager) arg0).addView(mListViews.get(arg1),0);

116             return mListViews.get(arg1);

117         }

118  

119         @Override

120         public boolean isViewFromObject(View arg0, Object arg1) {

121             Log.d("k", "isViewFromObject");

122             return arg0==(arg1);

123         }

124  

125         @Override

126         public void restoreState(Parcelable arg0, ClassLoader arg1) {

127             Log.d("k", "restoreState");

128         }

129  

130         @Override

131         public Parcelable saveState() {

132             Log.d("k", "saveState");

133             return null;

134         }

135  

136         @Override

137         public void startUpdate(View arg0) {

138             Log.d("k", "startUpdate");

139         }

140          

141     }

142      

143 }
在實機上測試後,非常流暢,這也就是說官方版的左右滑屏控件已經實現
目前,關於viewpager的文章非常少,本文是通過閱讀viewpager源代碼分析出的寫法
當然此文章僅是拋磚引玉,而且屬於框架式程序,目的就是讓讀者瞭解API的基本用法
希望這篇原創文章對大傢有幫助
歡迎感興趣的朋友一起討論
共同學習,共同進步
另外,ViewPager的註釋上有這麼一段話,大體意思是該控件目前屬於早期實現,後續會有修改
01 /**

02  * Layout manager that allows the user to flip left and right

03  * through pages of data.  You supply an implementation of a

04  * {@link PagerAdapter} to generate the pages that the view shows.

05  *

06  * <p>Note this class is currently under early design and

07  * development.  The API will likely change in later updates of

08  * the compatibility library, requiring changes to the source code

09  * of apps when they are compiled against the newer version.</p>

10  */

 

摘自 圖靈的夢

發佈留言