ViewPager 详解(一)---基本入门

来源:互联网 发布:中核原子能公司 知乎 编辑:程序博客网 时间:2024/05/01 12:18


首先让大家有个全局的认识,直接上个项目,看看仅仅通过这几行代码,竟然就能完成如此强悍的功能。下篇再结合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><span style="color:#660000;"></span>

二、代码实战

先上整体代码,然后逐步讲解。
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;  //对应的viewPagerprivate 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() {@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn viewList.size();}@Overridepublic void destroyItem(ViewGroup container, int position,Object object) {// TODO Auto-generated method stubcontainer.removeView(viewList.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODO Auto-generated method stubcontainer.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)

先看看各个函数,我们上面都做了什么吧:

@Overridepublic int getCount() {// TODO Auto-generated method stubreturn viewList.size();}
getCount():返回要滑动的VIew的个数

@Overridepublic void destroyItem(ViewGroup container, int position,Object object) {// TODO Auto-generated method stubcontainer.removeView(viewList.get(position));}
destroyItem():从当前container中删除指定位置(position)的View;
@Overridepublic Object instantiateItem(ViewGroup container, int position) {// TODO Auto-generated method stubcontainer.addView(viewList.get(position));return viewList.get(position);}};
instantiateItem():做了两件事,第一:将当前视图添加到container中,第二:返回当前View
@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {// TODO Auto-generated method stubreturn arg0 == arg1;}
isViewFromObject():对于这个函数就先不做讲解,大家目前先知道它要这样重写就行了,后面我们会对它进行改写。


下一篇,我将仔细讲解这几个函数的意义,与有关Key的知识,当然最后也会有个例子给大家。这篇就到这了。


源码地址:http://download.csdn.net/detail/harvic880925/7733249


请大家尊重原创者版权,转载请标明出处:http://blog.csdn.net/harvic880925/article/details/38453725  万分感激!!!!!

0 0