Android App开发中ViewPager组件的入门使用教程

所属分类: 软件编程 / Android 阅读数: 479
收藏 0 赞 0 分享

首先让大家有个全局的认识,直接上个项目,看看仅仅通过这几行代码,竟然就能完成如此强悍的功能。下篇再仔细讲讲为什么要这么写。
效果图:
实现了三个view间的相互滑动
第一个VIEW向第二个VIEW滑动:

2016323112736364.png (300×500)

第二个VIEW向第三个VIEW滑动:

2016323112946599.png (300×500)

一、新建项目,引入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><span style="color:#660000;"> 
</span> 

二、代码实战
先上整体代码,然后逐步讲解。

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; //对应的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 必须重写的四个函数:

(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)
先看看各个函数,我们上面都做了什么吧:

@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的理解
viewpager不直接处理每一个视图而是将各个视图与一个键联系起来。这个键用来跟踪且唯一代表一个页面,不仅如此,该键还独立于这个页面所在adapter的位置。当pageradapter将要改变的时候他会调用startUpdate函数,接下来会调用一次或多次的instantiateItem或者destroyItem。最后在更新的后期会调用finishUpdate。当finishUpdate返回时 instantiateItem返回的对象应该添加到父ViewGroup destroyItem返回的对象应该被ViewGroup删除。methodisViewFromObject(View, Object)代表了当前的页面是否与给定的键相关联。

对于非常简单的pageradapter或许你可以选择用page本身作为键,在创建并且添加到viewgroup后instantiateItem方法里返回该page本身即可destroyItem将会将该page从viewgroup里面移除。isViewFromObject方法里面直接可以返回view == object。
经过上面的讲解和实战例子,想必大家给Key的概念应该有个清楚的理解,下面举个例子来说明Key与View的关系,由于Key与View要一一对应,所以我把每个视图所处的位置Position作为Key,在上章例子的基础上更改的,下面先看全部代码,然后看部分讲解:

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数组 
  private ViewPager viewPager; // 对应的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装入数组中 
    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 
        //根据传来的key,找到view,判断与传来的参数View arg0是不是同一个视图 
        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)); 
 
        //把当前新增视图的位置(position)作为Key传过去 
        return position; 
      } 
    }; 
 
    viewPager.setAdapter(pagerAdapter); 
 
  } 
 
} 

在这里更改了两个地方:
1、先看Key的产生的位置instantiateItem()

@Override 
public Object instantiateItem(ViewGroup container, int position) { 
  // TODO Auto-generated method stub 
  container.addView(viewList.get(position)); 
 
  //把当前新增视图的位置(position)作为Key传过去 
  return position; 
} 

在这个函数中Key是作为返回值与当前装入Container中的视图对应起来的。所以在这里我们返回postion与container.addView(viewList.get(position));里的viewList.get(position)这个视图对应起来。
2、isViewFromObject ()

@Override 
public boolean isViewFromObject(View arg0, Object arg1) { 
  // TODO Auto-generated method stub 
  //根据传来的key,找到view,判断与传来的参数View arg0是不是同一个视图 
  return arg0 == viewList.get((int)Integer.parseInt(arg1.toString())); 
} 

判断从instantiateItem()返回来的Key与当前的View是否能对应起来,我们知道从instantiateItem传过来的其实是position,所以我们要根据position找到View,然后跟参数中的View arg0判断。

但在真正操作时出现了问题,我们要先将obect对应转换为int类型:(int)Integer.parseInt(arg1.toString());然后再根据position找到对应的View;

效果图:三个View之间的滑动切换

2016323113657256.png (300×533)2016323113715590.png (300×533)       

更多精彩内容其他人还在看

Android控件系列之CheckBox使用介绍

CheckBox和Button一样,也是一种古老的控件,它的优点在于,不用用户去填写具体的信息,只需轻轻点击,缺点在于只有“是”和“否”两种情况,但我们往往利用它的这个特性,来获取用户的一些信息
收藏 0 赞 0 分享

Android控件系列之EditText使用方法

EditText是接受用户输入信息的最重要控件。通过前面课程的学习,您可能会猜到可以利用EditText.getText()获取它的文本,但真正的项目中,可能没那么简单,需要更多的限制,如文本长度限制,是否数字限制等等
收藏 0 赞 0 分享

Android控件系列之TextView使用介绍

TextView类似一般UI中的Label,TextBlock等控件,只是为了单纯的显示一行或多行文本,本文介绍了Android中文本控件TextView的用法和常用属性的用法
收藏 0 赞 0 分享

asynctask的用法详解

Android UI操作并不是线程安全的并且这些操作必须在UI线程中执行,本文将为您介绍asynctask的用法
收藏 0 赞 0 分享

Android开发 旋转屏幕导致Activity重建解决方法

Android开发文档上专门有一小节解释这个问题。简单来说,Activity是负责与用户交互的最主要机制,接下来为您详细介绍
收藏 0 赞 0 分享

Notification与NotificationManager详细介绍

在Android系统中,发一个状态栏通知还是很方便的。下面我们就来看一下,怎么发送状态栏通知,状态栏通知又有哪些参数可以设置
收藏 0 赞 0 分享

android LinearLayout和RelativeLayout组合实现精确布局方法介绍

用android LinearLayout和RelativeLayout实现精确布局此方法适合很适合新人看
收藏 0 赞 0 分享

android listview优化几种写法详细介绍

这篇文章只是总结下getView里面优化视图的几种写法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android应用开发SharedPreferences存储数据的使用方法

SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的就是一个key-value(键值对)SharedPreferences常用来存储一些轻量级的数据
收藏 0 赞 0 分享

Android之PreferenceActivity应用详解

为了引入这个概率 首先从需求说起 即:现有某Activity专门用于手机属性设置 那么应该如何做呢
收藏 0 赞 0 分享
查看更多