1. 程式人生 > >android之ViewPager簡單實現區域性頁面滑動效果

android之ViewPager簡單實現區域性頁面滑動效果

-Viewpager能實現什麼效果?

-實現左右滑動,切換view的效果。

-既可以實現整個頁面左右滑動,也可以實現同一個頁面中區域性左右滑動。

搞清楚viewpager的作用後,開始寫一個簡單例子,實現同一個頁面中區域性滑動的效果。


在coding前要做的準備工作

2>在res目錄下除了main外再寫三個layout,分別是layout1/2/3。佈局main存放viewpage。viewpager既然是實現左右滑動頁面,那麼這三個頁面介面外觀若不相同,必然有他們自己的佈局,所以layout123就是三個待滑動頁面的佈局。

3>需要PagerAdapter。viewpager類似listview,把自己findViewById以後,setAdapter(new MyPagerAdapter()),然後有關頁面的處理都由這個adapter完成,MyPagerAdapter繼承PagerAdapter.

程式結構樸素不能再樸素了:


【main.xml】

提醒:viewpager的包名必須寫全即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" >
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="fill_parent"
        android:layout_height="200dp"/>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="實現viewPager區域性滑動效果" />
</LinearLayout>

【layout1.xml】

layout2.xml和layout3.xml與layout1.xml基本一致,除了TextView中的text標籤內容改下。

<?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="#8A2BE2"
    android:gravity="center" >
    <TextView 
        android:id="@+id/txt_01"
        android:text="pager1"
        android:textSize="20sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
</LinearLayout>
【TestViewPager01Activity】

把三個待滑動的view存放在列表中(List<View>)

package com.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class TestViewPager01Activity extends Activity {

	private ViewPager mViewPager;
	private List<View> mViewList = new ArrayList<View>();//存放待滑動的view
	private LayoutInflater mInflater;
	private View view_01, view_02, view_03;//三個待滑動的view
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initViews();  
    }
	private void initViews() {
		mInflater = getLayoutInflater();
		view_01 = mInflater.inflate(R.layout.layout1, null);
		view_02 = mInflater.inflate(R.layout.layout2, null);
		view_03 = mInflater.inflate(R.layout.layout3, null);
//		view_01 = findViewById(R.layout.layout1);
//		view_02 = findViewById(R.layout.layout2);
//		view_03 = findViewById(R.layout.layout3);
		
	    mViewList.add(view_01);
	    mViewList.add(view_02);
	    mViewList.add(view_03);
	    	
		mViewPager = (ViewPager)findViewById(R.id.viewPager);
		mViewPager.setAdapter(new MyPagerAdapter());
		mViewPager.setCurrentItem(0);//設定當前pager
	}
	
	class MyPagerAdapter extends PagerAdapter{
		
		@Override
		public int getCount() {//返回view數量
			return mViewList.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(mViewList.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(mViewList.get(position), 0);
			return mViewList.get(position);
		}
		
		
		
	}
}

設定ViewPager的Adapter,需要重寫PagerAdapter,android官方文件中指出,實現一個PagerAdapter,至少要覆寫他的四個方法:

mInflater = getLayoutInflater();
		view_01 = mInflater.inflate(R.layout.layout1, null);
		view_02 = mInflater.inflate(R.layout.layout2, null);
		view_03 = mInflater.inflate(R.layout.layout3, null);
這段程式碼不能寫成:
		view_01 = findViewById(R.layout.layout1);
		view_02 = findViewById(R.layout.layout2);
		view_03 = findViewById(R.layout.layout3);

否則會報錯。如果有誰能留言說明為什麼報錯,感激不盡。