Android 中的通過 ViewPager 實現左右滑屏

fmms 12年前發布 | 81K 次閱讀 Android Android開發移動開發

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

具體實現詳解

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>
 */

本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1330003503468.html

Android Android開發移動開發

Android 中的通過 ViewPager 實現左右滑屏

相關經驗

相關資訊

相關文檔

目錄