Android ViewPager 的使用總結

Carbenson發表於2015-10-24
AndroidViewpager

在一個視窗裡面新增tab便籤，完成便籤切換來實現頁面的切換，這樣的好處是可以在同一個視窗裡面有多個頁面，這些頁面共享同一個視窗的資源，同使用多個視窗來實現這個功能來得更加流暢！！

主要產生的類檔案有activity，n個view，adapter，自定義的ViewPager，n+1個佈局檔案

demo所用到檔案

Android ViewPager的使用

Android ViewPager的使用

步驟：

建立activity

package com.example.myviewpager;

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.ViewPager;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;
/**
 * 主視窗
 * @author cgx
 *
 */
public class MainActivity extends Activity implements OnClickListener {

	private Context mContext;
	private MyViewPager mPager;// 頁面內容
	private MyViewPagerAdapter pagerAdapter = null;
	private TextView t1, t2, t3;// 頁卡頭標
	private List<View> pageList = new ArrayList<View>();
	private View1 mView1;
	private View2 mView2;
	private View3 mView3;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		mContext = this;
		initViews();
		initEvents();
		initViewPager();
	}

	private void initViews() {
		// TODO Auto-generated method stub

		t1 = (TextView) findViewById(R.id.text1);
		t2 = (TextView) findViewById(R.id.text2);
		t3 = (TextView) findViewById(R.id.text3);
		mPager = (MyViewPager) findViewById(R.id.vPager);
		// 設定ViewPager不允許滑動
		//mPager.setCanScroll(false);
		//一開始進入視窗的時候，預設第一個便籤被選中
		t1.setBackgroundColor(Color.parseColor("#FFFF00"));
		t2.setBackgroundColor(Color.parseColor("#FFFFFF"));
		t3.setBackgroundColor(Color.parseColor("#FFFFFF"));
	}

	private void initEvents() {
		// TODO Auto-generated method stub
		t1.setOnClickListener(this);
		t2.setOnClickListener(this);
		t3.setOnClickListener(this);
	}

	private void initViewPager() {
		// TODO Auto-generated method stub

		pageList.clear();

		if (mView1 == null) {
			mView1 = new View1(mContext);
		}

		if (mView2 == null) {
			mView2 = new View2(mContext);
		}

		if (mView3 == null) {
			mView3 = new View3(mContext);
		}

		pageList.add(mView1.getView());
		pageList.add(mView2.getView());
		pageList.add(mView3.getView());

		pagerAdapter = new MyViewPagerAdapter(pageList);
		// 快取頁面，如果想全部都快取的話，引數等於頁卡數減一,系統預設引數為1，儲存兩個
		mPager.setOffscreenPageLimit(2);
		mPager.setAdapter(pagerAdapter);
		// 設定Page改變監聽器
		mPager.setOnPageChangeListener(onPageChangeListener);
	}

	/**
	 * SimpleOnPageChangeListener.該監聽是當我們的viewpager頁面切換的時候會觸發 在裡面我們會去改變 tab的聚焦情況
	 * 。 因為實現上viewpager與actionbar是獨立的，需要我們手動同步 。
	 */
	ViewPager.SimpleOnPageChangeListener onPageChangeListener = new ViewPager.SimpleOnPageChangeListener() {
		@Override
		public void onPageSelected(int position) {
			/**
			 * setSelectedNavigationItem 方法用於設定ActionBar的聚焦tab .
			 * 在接下來我們判斷了SLidingMenu的手勢力模式， 如果ViewPager已經滑到了最左邊，則我們把手勢設定成全屏的，
			 * 這樣更往左滑動的時候，就會開啟Menu .
			 */
			initTab(position);
		}

		// 初始化便籤顏色
		private void initTab(int position) {
			// TODO Auto-generated method stub
			if (position == 0) {
				t1.setBackgroundColor(Color.parseColor("#FFFF00"));
				t2.setBackgroundColor(Color.parseColor("#FFFFFF"));
				t3.setBackgroundColor(Color.parseColor("#FFFFFF"));

			} else if (position == 1) {
				t1.setBackgroundColor(Color.parseColor("#FFFFFF"));
				t2.setBackgroundColor(Color.parseColor("#FFFF00"));
				t3.setBackgroundColor(Color.parseColor("#FFFFFF"));
			} else {
				t1.setBackgroundColor(Color.parseColor("#FFFFFF"));
				t2.setBackgroundColor(Color.parseColor("#FFFFFF"));
				t3.setBackgroundColor(Color.parseColor("#FFFF00"));
			}
		}
	};

	@Override
	public void onClick(View v) {
		// TODO Auto-generated method stub
		switch (v.getId()) {

		case R.id.text1:// 點選第一個便籤
			mPager.setCurrentItem(0, false);
			break;
		case R.id.text2:// 點選第二個便籤
			mPager.setCurrentItem(1, false);
			break;
		case R.id.text3:// 點選第三個便籤
			mPager.setCurrentItem(2, false);
			break;
		default:
			break;
		}
	}

}

自定義MyViewPager

package com.example.myviewpager;

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

/**
 * 自定義滑動翻頁可控，可通過設定isCanScroll引數來控制是否允許滑動切換頁面
 */
public class MyViewPager extends ViewPager {
	/** 是否允許滑動翻頁 ,預設可滑動*/
	private boolean isCanScroll = true;

	public MyViewPager(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public MyViewPager(Context context) {
		super(context);
	}

	public boolean isCanScroll() {
		return isCanScroll;
	}

	/** 設定是否可以滑動翻頁 */
	public void setCanScroll(boolean isCanScroll) {
		this.isCanScroll = isCanScroll;
	}

	@Override
	public void scrollTo(int x, int y) {
		super.scrollTo(x, y);
	}

	// 設定禁止滑動的關鍵
	@Override
	public boolean onTouchEvent(MotionEvent arg0) {
		if (!isCanScroll)
			return true;
		return super.onTouchEvent(arg0);
	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent arg0) {

		return super.onInterceptTouchEvent(arg0);
	}

	@Override
	public void setCurrentItem(int item, boolean smoothScroll) {
		super.setCurrentItem(item, smoothScroll);
	}

	@Override
	public void setCurrentItem(int item) {
		super.setCurrentItem(item);
	}

}

介面卡：

package com.example.myviewpager;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
/**
 * viewpager介面卡
 * */
public class MyViewPagerAdapter extends PagerAdapter{

    private List<View> mListViews;  

    public MyViewPagerAdapter(List<View> mListViews) {  
        this.mListViews = mListViews;//構造方法，引數是我們的頁卡，這樣比較方便 
    }

    @Override  
    public void destroyItem(ViewGroup container, int position, Object object)   {     
        container.removeView(mListViews.get(position));//刪除頁卡  
    }  

    @Override  
    public Object instantiateItem(ViewGroup container, int position) {  //這個方法用來例項化頁卡
        container.addView(mListViews.get(position), 0);//新增頁卡  
        return mListViews.get(position);
    }  

    @Override  
    public int getCount() {           
        return  mListViews.size();//返回頁卡的數目 
    }  

    @Override  
    public boolean isViewFromObject(View arg0, Object arg1) {             
        return arg0==arg1;//官方提示這樣寫
    }

}

第一個view

package com.example.myviewpager;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;

/**
 * 第一個
 * @author cgx
 *
 */
public class View1 {

	private Context mContext;
	private View rootView;
	public View1(Context mContext) {
		// TODO Auto-generated constructor stub
		this.mContext=mContext;
		//載入佈局
		rootView = LayoutInflater.from(mContext).inflate(
				R.layout.view1_layout, null);
	}

	public View getView(){
		return rootView;
	}

}

activity佈局檔案

<LinearLayout 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:orientation="vertical"
   >
	<LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF" >

        <TextView
            android:id="@+id/text1"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="頁卡1"
            android:textColor="#000000"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/text2"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="頁卡2"
            android:textColor="#000000"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/text3"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:gravity="center"
            android:text="頁卡3"
            android:textColor="#000000"
            android:textSize="20sp" />
    </LinearLayout>
     <com.example.myviewpager.MyViewPager
        android:id="@+id/vPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1.0"
        android:background="#000000"
        android:flipInterval="30"
         />

</LinearLayout>

View1的佈局

<?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="#123456" >
</LinearLayout>

由於用於演示，所以view的佈局只是用不同的背景色來區分，開發中具體要展示的佈局可以直接在view的佈局檔案裡面改。demo中的view都是參考第一個來寫的，類似

總結

實際開發中，雖然官方提供了很多api，真正等到要自己用的時候，還是自己在依照習慣再包裝一層，成為自己的工具，這樣以後就可以直接用了，上面的例子是我在實習期間總結的，鄙陋之處敬請原諒，也歡迎大家指出，一起學習(^_^)

程式碼連結：http://pan.baidu.com/s/1pJAF6Gz

相關文章