Android App開發(fā)中ViewPager組件的入門使用教程
首先讓大家有個(gè)全局的認(rèn)識(shí),直接上個(gè)項(xiàng)目,看看僅僅通過這幾行代碼,竟然就能完成如此強(qiáng)悍的功能。下篇再仔細(xì)講講為什么要這么寫。
效果圖:
實(shí)現(xiàn)了三個(gè)view間的相互滑動(dòng)
第一個(gè)VIEW向第二個(gè)VIEW滑動(dòng):
第二個(gè)VIEW向第三個(gè)VIEW滑動(dòng):
一、新建項(xiàng)目,引入ViewPager控件
ViewPager。它是google SDk中自帶的一個(gè)附加包的一個(gè)類,可以用來實(shí)現(xiàn)屏幕間的切換。
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對應(yīng)的組件,要將其放到想要滑動(dòng)的位置
2、新建三個(gè)layout,用于滑動(dòng)切換的視圖
從效果圖中也可以看到,我們的三個(gè)視圖都非常簡單,里面沒有任何的控件,大家當(dāng)然可以往里添加各種控件,但這里是個(gè)DEMO,只詳解原理即可,所以我這里僅僅用背景來區(qū)別不用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><span style="color:#660000;"> </span>
二、代碼實(shí)戰(zhàn)
先上整體代碼,然后逐步講解。
package com.example.testviewpage_1; 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; //對應(yīng)的viewPager private List<View> viewList;//view數(shù)組 @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裝入數(shù)組中 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()函數(shù)中。
1、先看聲明的變量的意義:
private View view1, view2, view3; private List<View> viewList;//view數(shù)組 private ViewPager viewPager; //對應(yīng)的viewPager
首先viewPager對應(yīng) <android.support.v4.view.ViewPager/>控件。
view1,view2 ,view3對應(yīng)我們的三個(gè)layout,即layout1.xml,layout2.xml,layout3.xml
viewList是一個(gè)View數(shù)組,盛裝上面的三個(gè)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裝入數(shù)組中 viewList.add(view1); viewList.add(view2); viewList.add(view3);
初始化過程難度不大,就是將資源與變量聯(lián)系起來布局,最后將實(shí)例化的view1,view2,view3添加到viewList中
3、PageAdapter——PageView的適配器
適配器這個(gè)東東想必大家都不莫生,在ListView中也有適配器,listView通過重寫GetView()函數(shù)來獲取當(dāng)前要加載的Item。而PageAdapter不太相同,畢竟PageAdapter是單個(gè)VIew的合集。
PageAdapter 必須重寫的四個(gè)函數(shù):
(1)boolean isViewFromObject(View arg0, Object arg1)
(2)int getCount()
(3)void destroyItem(ViewGroup container, int position,Object object)
(4)Object instantiateItem(ViewGroup container, int position)
先看看各個(gè)函數(shù),我們上面都做了什么吧:
@Override public int getCount() { // TODO Auto-generated method stub return viewList.size(); }
getCount():返回要滑動(dòng)的VIew的個(gè)數(shù)
@Override public void destroyItem(ViewGroup container, int position, Object object) { // TODO Auto-generated method stub container.removeView(viewList.get(position)); }
destroyItem():從當(dāng)前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():做了兩件事,第一:將當(dāng)前視圖添加到container中,第二:返回當(dāng)前View
@Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub return arg0 == arg1; }
isViewFromObject():對于這個(gè)函數(shù)就先不做講解,大家目前先知道它要這樣重寫就行了,后面我們會(huì)對它進(jìn)行改寫。
三、對鍵Key的理解
viewpager不直接處理每一個(gè)視圖而是將各個(gè)視圖與一個(gè)鍵聯(lián)系起來。這個(gè)鍵用來跟蹤且唯一代表一個(gè)頁面,不僅如此,該鍵還獨(dú)立于這個(gè)頁面所在adapter的位置。當(dāng)pageradapter將要改變的時(shí)候他會(huì)調(diào)用startUpdate函數(shù),接下來會(huì)調(diào)用一次或多次的instantiateItem或者destroyItem。最后在更新的后期會(huì)調(diào)用finishUpdate。當(dāng)finishUpdate返回時(shí) instantiateItem返回的對象應(yīng)該添加到父ViewGroup destroyItem返回的對象應(yīng)該被ViewGroup刪除。methodisViewFromObject(View, Object)代表了當(dāng)前的頁面是否與給定的鍵相關(guān)聯(lián)。
對于非常簡單的pageradapter或許你可以選擇用page本身作為鍵,在創(chuàng)建并且添加到viewgroup后instantiateItem方法里返回該page本身即可destroyItem將會(huì)將該page從viewgroup里面移除。isViewFromObject方法里面直接可以返回view == object。
經(jīng)過上面的講解和實(shí)戰(zhàn)例子,想必大家給Key的概念應(yīng)該有個(gè)清楚的理解,下面舉個(gè)例子來說明Key與View的關(guān)系,由于Key與View要一一對應(yīng),所以我把每個(gè)視圖所處的位置Position作為Key,在上章例子的基礎(chǔ)上更改的,下面先看全部代碼,然后看部分講解:
package com.example.testviewpage_2; /** * @author harvic * @date 2014.8.11 */ 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 MainActivity extends Activity { private View view1, view2, view3; private List<View> viewList;// view數(shù)組 private ViewPager viewPager; // 對應(yīng)的viewPager @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裝入數(shù)組中 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 //根據(jù)傳來的key,找到view,判斷與傳來的參數(shù)View arg0是不是同一個(gè)視圖 return arg0 == viewList.get((int)Integer.parseInt(arg1.toString())); } @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)); //把當(dāng)前新增視圖的位置(position)作為Key傳過去 return position; } }; viewPager.setAdapter(pagerAdapter); } }
在這里更改了兩個(gè)地方:
1、先看Key的產(chǎn)生的位置instantiateItem()
@Override public Object instantiateItem(ViewGroup container, int position) { // TODO Auto-generated method stub container.addView(viewList.get(position)); //把當(dāng)前新增視圖的位置(position)作為Key傳過去 return position; }
在這個(gè)函數(shù)中Key是作為返回值與當(dāng)前裝入Container中的視圖對應(yīng)起來的。所以在這里我們返回postion與container.addView(viewList.get(position));里的viewList.get(position)這個(gè)視圖對應(yīng)起來。
2、isViewFromObject ()
@Override public boolean isViewFromObject(View arg0, Object arg1) { // TODO Auto-generated method stub //根據(jù)傳來的key,找到view,判斷與傳來的參數(shù)View arg0是不是同一個(gè)視圖 return arg0 == viewList.get((int)Integer.parseInt(arg1.toString())); }
判斷從instantiateItem()返回來的Key與當(dāng)前的View是否能對應(yīng)起來,我們知道從instantiateItem傳過來的其實(shí)是position,所以我們要根據(jù)position找到View,然后跟參數(shù)中的View arg0判斷。
但在真正操作時(shí)出現(xiàn)了問題,我們要先將obect對應(yīng)轉(zhuǎn)換為int類型:(int)Integer.parseInt(arg1.toString());然后再根據(jù)position找到對應(yīng)的View;
效果圖:三個(gè)View之間的滑動(dòng)切換
- Android中ViewPager的PagerTabStrip與PagerTitleStrip用法實(shí)例
- Android中的ViewPager視圖滑動(dòng)切換類的入門實(shí)例教程
- Android實(shí)現(xiàn)千變?nèi)f化的ViewPager切換動(dòng)畫
- Android自定義ViewPager實(shí)現(xiàn)個(gè)性化的圖片切換效果
- Android利用HorizontalScrollView仿ViewPager設(shè)計(jì)簡單相冊
- Android ViewPager制作新手導(dǎo)航頁(動(dòng)態(tài)加載)
- Android App中用Handler實(shí)現(xiàn)ViewPager頁面的自動(dòng)切換
- 實(shí)例講解Android中ViewPager組件的一些進(jìn)階使用技巧
- 舉例講解Android中ViewPager中的PagerTitleStrip子控件
- Android應(yīng)用中利用ViewPager實(shí)現(xiàn)多頁面滑動(dòng)切換效果示例
- 詳解Android App中創(chuàng)建ViewPager組件的方法
- Android中viewPager使用指南
- Android中ViewPager實(shí)現(xiàn)滑動(dòng)條及與Fragment結(jié)合的實(shí)例教程
相關(guān)文章
制作獨(dú)立的Android模擬器實(shí)現(xiàn)方法
本文主要介紹如何制作獨(dú)立的Android模擬器,這里給大家提供詳細(xì)的制作流程,有需要的小伙伴可以參考下2016-08-08Android中利用C++處理Bitmap對象的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狝ndroid中利用C++處理Bitmap對象的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03Android Studio實(shí)現(xiàn)下拉列表效果
這篇文章主要為大家詳細(xì)介紹了Android Studio實(shí)現(xiàn)下拉列表效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Android中模仿抖音加載框之兩顆小球轉(zhuǎn)動(dòng)效果
這篇文章主要介紹了Android仿抖音加載框之兩顆小球轉(zhuǎn)動(dòng)控件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09Android中實(shí)現(xiàn)ProgressBar菊花旋轉(zhuǎn)進(jìn)度條的動(dòng)畫效果
大家在一些頁面經(jīng)常會(huì)遇到加載中需要顯示一個(gè)加載動(dòng)畫,像旋轉(zhuǎn)的菊花旋轉(zhuǎn)的圈圈動(dòng)畫效果,本文通過實(shí)例代碼給大家講解下,需要的朋友參考下吧2021-09-09Android實(shí)現(xiàn)聊天記錄上傳本地服務(wù)器(即時(shí)通訊)
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)聊天記錄上傳本地服務(wù)器,即時(shí)通訊功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06