1. 程式人生 > >ViewPager 詳解(一)---基本入門

ViewPager 詳解(一)---基本入門

前言:這兩天研究研究ViewPager滾動功能,現在很多的app都有用到這個功能,我們的大蝦米也有這個模組。要研究就徹底的研究研究,我從不滿足於一個功能只是簡單的應用,要學就學的徹底,所以我打算將ViewPager 分幾篇寫,研究的哪個程度就寫到哪個程度吧。今天是第一篇,基本入門篇 。

相關文章:

首先讓大家有個全域性的認識,直接上個專案,看看僅僅通過這幾行程式碼,竟然就能完成如此強悍的功能。下篇再結合API仔細講講為什麼要這麼寫。

效果圖:

實現了三個view間的相互滑動

                     第一個VIEW向第二個VIEW滑動       第二個VIEW向第三個VIEW滑動

   


一、新建專案,引入ViewPager控制元件

ViewPager。它是google SDk中自帶的一個附加包的一個類,可以用來實現螢幕間的切換。

1.在主佈局檔案里加入

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context="com.example.testviewpage_1.MainActivity" >

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" />

</RelativeLayout>

其中 <android.support.v4.view.ViewPager /> 是ViewPager對應的元件,要將其放到想要滑動的位置

2、新建三個layout,用於滑動切換的檢視

從效果圖中也可以看到,我們的三個檢視都非常簡單,裡面沒有任何的控制元件,大家當然可以往裡新增各種控制元件,但這裡是個DEMO,只詳解原理即可,所以我這裡僅僅用背景來區別不用layout佈局。

佈局程式碼分別如下:

layout1.xml

<?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:background="#ffffff"
    android:orientation="vertical" >
    

</LinearLayout>
layout2.xml
<?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:background="#ffff00"
    android:orientation="vertical" >
    

</LinearLayout>
layout3.xml
<?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:background="#ff00ff"
    android:orientation="vertical" >
    

</LinearLayout>

二、程式碼實戰

先上整體程式碼,然後逐步講解。
package com.example.testviewpage_1;
/**
 * @author  harvic
 * @date 2014.8.9
 */
import java.util.ArrayList;
import java.util.List;
import java.util.zip.Inflater;

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 MainActivity extends Activity {

	private View view1, view2, view3;
	private ViewPager viewPager;  //對應的viewPager
	
	private List<View> viewList;//view陣列
   
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        viewPager = (ViewPager) findViewById(R.id.viewpager);
        LayoutInflater inflater=getLayoutInflater();
        view1 = inflater.inflate(R.layout.layout1, null);
        view2 = inflater.inflate(R.layout.layout2,null);
        view3 = inflater.inflate(R.layout.layout3, null);
        
        viewList = new ArrayList<View>();// 將要分頁顯示的View裝入陣列中
		viewList.add(view1);
		viewList.add(view2);
		viewList.add(view3);
		
		
		PagerAdapter pagerAdapter = new PagerAdapter() {
			
			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				// TODO Auto-generated method stub
				return arg0 == arg1;
			}
			
			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return viewList.size();
			}
			
			@Override
			public void destroyItem(ViewGroup container, int position,
					Object object) {
				// TODO Auto-generated method stub
				container.removeView(viewList.get(position));
			}
			
			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				// TODO Auto-generated method stub
				container.addView(viewList.get(position));
				
				
				return viewList.get(position);
			}
		};
		
		
		viewPager.setAdapter(pagerAdapter);
		
    }


}
程式碼量很小,全部放在了OnCreate()函式中。

1、先看宣告的變數的意義:

private View view1, view2, view3;
private List<View> viewList;//view陣列
private ViewPager viewPager;  //對應的viewPager

首先viewPager對應 <android.support.v4.view.ViewPager/>控制元件。

view1,view2 ,view3對應我們的三個layout,即layout1.xml,layout2.xml,layout3.xml

viewList是一個View陣列,盛裝上面的三個VIEW

2、接下來是他們的初始化過程:

viewPager = (ViewPager) findViewById(R.id.viewpager);
LayoutInflater inflater=getLayoutInflater();
view1 = inflater.inflate(R.layout.layout1, null);
view2 = inflater.inflate(R.layout.layout2,null);
view3 = inflater.inflate(R.layout.layout3, null);

viewList = new ArrayList<View>();// 將要分頁顯示的View裝入陣列中
viewList.add(view1);
viewList.add(view2);
viewList.add(view3);
初始化過程難度不大,就是將資源與變數聯絡起來佈局,最後將例項化的view1,view2,view3新增到viewList中

3、PageAdapter——PageView的介面卡

介面卡這個東東想必大家都不莫生,在ListView中也有介面卡,listView通過重寫GetView()函式來獲取當前要載入的Item。而PageAdapter不太相同,畢竟PageAdapter是單個VIew的合集。

PageAdapter 必須重寫的四個函式:

  • boolean isViewFromObject(View arg0, Object arg1)
  • int getCount() 
  • void destroyItem(ViewGroup container, int position,Object object)
  • Object instantiateItem(ViewGroup container, int position)

先看看各個函式,我們上面都做了什麼吧:

@Override
public int getCount() {
	// TODO Auto-generated method stub
	return viewList.size();
}
getCount():返回要滑動的VIew的個數
@Override
public void destroyItem(ViewGroup container, int position,
		Object object) {
	// TODO Auto-generated method stub
	container.removeView(viewList.get(position));
}
destroyItem():從當前container中刪除指定位置(position)的View;
@Override
public Object instantiateItem(ViewGroup container, int position) {
	// TODO Auto-generated method stub
		container.addView(viewList.get(position));
		
		
		return viewList.get(position);
	}
};
instantiateItem():做了兩件事,第一:將當前檢視新增到container中,第二:返回當前View
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
	// TODO Auto-generated method stub
	return arg0 == arg1;
}
isViewFromObject():對於這個函式就先不做講解,大家目前先知道它要這樣重寫就行了,後面我們會對它進行改寫。

下一篇,我將仔細講解這幾個函式的意義,與有關Key的知識,當然最後也會有個例子給大家。這篇就到這了。