Android 中的通过 ViewPager 实现左右滑屏

fmms 7年前

先看效果,就是左右滑屏的效果

Android 中的通过 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

<?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">  <!-- 此处需要给出全路径 -->  <android.support.v4.view.ViewPager      android:id="@+id/viewpagerLayout" android:layout_height="fill_parent" android:layout_width="fill_parent"/>    </LinearLayout>
layout1.xml

<?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:textAppearance="?android:attr/textAppearanceLarge" android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="fill_parent" android:text="第一页"></TextView>        <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText1">          <requestFocus></requestFocus>      </EditText>    </LinearLayout>
layout2.xml

<?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:textAppearance="?android:attr/textAppearanceLarge" android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="fill_parent" android:text="第二页"></TextView>        <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText1">          <requestFocus></requestFocus>      </EditText>    </LinearLayout>
layout3.xml
<?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:textAppearance="?android:attr/textAppearanceLarge" android:layout_height="wrap_content" android:id="@+id/textView1" android:layout_width="fill_parent" android:text="第三页"></TextView>        <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText1">          <requestFocus></requestFocus>      </EditText>    </LinearLayout>
主程序
package a.b;    import java.util.ArrayList;  import java.util.List;    import android.app.Activity;  import android.os.Bundle;  import android.os.Parcelable;  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.widget.EditText;    public class TestViewPager extends Activity {   private ViewPager myViewPager;     private MyPagerAdapter myAdapter;      private LayoutInflater mInflater;   private List<View> mListViews;   private View layout1 = null;   private View layout2 = null;   private View layout3 = null;      @Override   protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.viewpager_layout);    myAdapter = new MyPagerAdapter();    myViewPager = (ViewPager) findViewById(R.id.viewpagerLayout);    myViewPager.setAdapter(myAdapter);                    mListViews = new ArrayList<View>();          mInflater = getLayoutInflater();          layout1 = mInflater.inflate(R.layout.layout1, null);          layout2 = mInflater.inflate(R.layout.layout2, null);          layout3 = mInflater.inflate(R.layout.layout3, null);                   mListViews.add(layout1);          mListViews.add(layout2);          mListViews.add(layout3);                    //初始化当前显示的view          myViewPager.setCurrentItem(1);                    //初始化第二个view的信息          EditText v2EditText = (EditText)layout2.findViewById(R.id.editText1);          v2EditText.setText("动态设置第二个view的值");                    myViewPager.setOnPageChangeListener(new OnPageChangeListener() {          @Override     public void onPageSelected(int arg0) {      Log.d("k", "onPageSelected - " + arg0);      //activity从1到2滑动,2被加载后掉用此方法      View v = mListViews.get(arg0);      EditText editText = (EditText)v.findViewById(R.id.editText1);      editText.setText("动态设置#"+arg0+"edittext控件的值");     }          @Override     public void onPageScrolled(int arg0, float arg1, int arg2) {      Log.d("k", "onPageScrolled - " + arg0);      //从1到2滑动,在1滑动前调用     }          @Override     public void onPageScrollStateChanged(int arg0) {      Log.d("k", "onPageScrollStateChanged - " + arg0);      //状态有三个0空闲,1是增在滑行中,2目标加载完毕      /**          * Indicates that the pager is in an idle, settled state. The current page          * is fully in view and no animation is in progress.          */         //public static final int SCROLL_STATE_IDLE = 0;         /**          * Indicates that the pager is currently being dragged by the user.          */         //public static final int SCROLL_STATE_DRAGGING = 1;         /**          * Indicates that the pager is in the process of settling to a final position.          */         //public static final int SCROLL_STATE_SETTLING = 2;       }    });             }         private class MyPagerAdapter extends PagerAdapter{      @Override    public void destroyItem(View arg0, int arg1, Object arg2) {     Log.d("k", "destroyItem");     ((ViewPager) arg0).removeView(mListViews.get(arg1));    }      @Override    public void finishUpdate(View arg0) {     Log.d("k", "finishUpdate");    }      @Override    public int getCount() {     Log.d("k", "getCount");     return mListViews.size();    }      @Override    public Object instantiateItem(View arg0, int arg1) {     Log.d("k", "instantiateItem");     ((ViewPager) arg0).addView(mListViews.get(arg1),0);     return mListViews.get(arg1);    }      @Override    public boolean isViewFromObject(View arg0, Object arg1) {     Log.d("k", "isViewFromObject");     return arg0==(arg1);    }      @Override    public void restoreState(Parcelable arg0, ClassLoader arg1) {     Log.d("k", "restoreState");    }      @Override    public Parcelable saveState() {     Log.d("k", "saveState");     return null;    }      @Override    public void startUpdate(View arg0) {     Log.d("k", "startUpdate");    }             }     }
在实机上测试后,非常流畅,这也就是说官方版的左右滑屏控件已经实现
目前,关于viewpager的文章非常少,本文是通过阅读viewpager源代码分析出的写法
当然此文章仅是抛砖引玉,而且属于框架式程序,目的就是让读者了解API的基本用法
希望这篇原创文章对大家有帮助
欢迎感兴趣的朋友一起讨论
共同学习,共同进步
另外,ViewPager的注释上有这么一段话,大体意思是该控件目前属于早期实现,后续会有修改
/**   * Layout manager that allows the user to flip left and right   * through pages of data.  You supply an implementation of a   * {@link PagerAdapter} to generate the pages that the view shows.   *   * <p>Note this class is currently under early design and   * development.  The API will likely change in later updates of   * the compatibility library, requiring changes to the source code   * of apps when they are compiled against the newer version.</p>   */