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

转载 2015年11月18日 11:12:47

请大家尊重原创者版权,转载请标明出处:http://blog.csdn.net/harvic880925/article/details/38557517  谢谢


目录(?)[-]

  1. 一新建项目引入ViewPager控件
    1. 在主布局文件里加入
    2. 新建三个layout用于滑动切换的视图
  2. 二代码实战
    1. 先看声明的变量的意义
    2. 接下来是他们的初始化过程
    3. PageAdapterPageView的适配器

前言:这两天研究研究ViewPager滚动功能,现在很多的app都有用到这个功能,我们的大虾米也有这个模块。要研究就彻底的研究研究,我从不满足于一个功能只是简单的应用,要学就学的彻底,所以我打算将ViewPager 分几篇写,研究的哪个程度就写到哪个程度吧。今天是第一篇,基本入门篇 。


相关文章:

1、《ViewPager 详解(一)---基本入门》

2、《ViewPager 详解(二)---详解四大函数》

3、《ViewPager 详解(三)---PagerTabStrip与PagerTitleStrip添加标题栏的异同》

4、《ViewPager 详解(四)----自主实现滑动指示条》

5、《ViewPager 详解(五)-----使用Fragment实现ViewPager滑动》


首先让大家有个全局的认识,直接上个项目,看看仅仅通过这几行代码,竟然就能完成如此强悍的功能。下篇再结合API仔细讲讲为什么要这么写。

效果图:

实现了三个view间的相互滑动

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

   

一、新建项目,引入ViewPager控件

ViewPager。它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换。

1.在主布局文件里加入

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     tools:context="com.example.testviewpage_1.MainActivity" >  
  6.   
  7. <android.support.v4.view.ViewPager  
  8.     android:id="@+id/viewpager"  
  9.     android:layout_width="wrap_content"  
  10.     android:layout_height="wrap_content"  
  11.     android:layout_gravity="center" />  
  12.   
  13. </RelativeLayout>  

其中 <android.support.v4.view.ViewPager /> 是ViewPager对应的组件,要将其放到想要滑动的位置

2、新建三个layout,用于滑动切换的视图

从效果图中也可以看到,我们的三个视图都非常简单,里面没有任何的控件,大家当然可以往里添加各种控件,但这里是个DEMO,只详解原理即可,所以我这里仅仅用背景来区别不用layout布局。

布局代码分别如下:

layout1.xml

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#ffffff"  
  6.     android:orientation="vertical" >  
  7.       
  8.   
  9. </LinearLayout>  
layout2.xml

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#ffff00"  
  6.     android:orientation="vertical" >  
  7.       
  8.   
  9. </LinearLayout>  
layout3.xml
[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:background="#ff00ff"  
  6.     android:orientation="vertical" >  
  7.       
  8.   
  9. </LinearLayout><span style="color:#660000;">  
  10. </span>  

二、代码实战

先上整体代码,然后逐步讲解。
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. package com.example.testviewpage_1;  
  2. /** 
  3.  * @author  harvic 
  4.  * @date 2014.8.9 
  5.  */  
  6. import java.util.ArrayList;  
  7. import java.util.List;  
  8. import java.util.zip.Inflater;  
  9.   
  10. import android.app.Activity;  
  11. import android.os.Bundle;  
  12. import android.support.v4.view.PagerAdapter;  
  13. import android.support.v4.view.ViewPager;  
  14. import android.view.LayoutInflater;  
  15. import android.view.View;  
  16. import android.view.ViewGroup;  
  17.   
  18.   
  19. public class MainActivity extends Activity {  
  20.   
  21.     private View view1, view2, view3;  
  22.     private ViewPager viewPager;  //对应的viewPager  
  23.       
  24.     private List<View> viewList;//view数组  
  25.      
  26.      
  27.     @Override  
  28.     protected void onCreate(Bundle savedInstanceState) {  
  29.         super.onCreate(savedInstanceState);  
  30.         setContentView(R.layout.activity_main);  
  31.           
  32.         viewPager = (ViewPager) findViewById(R.id.viewpager);  
  33.         LayoutInflater inflater=getLayoutInflater();  
  34.         view1 = inflater.inflate(R.layout.layout1, null);  
  35.         view2 = inflater.inflate(R.layout.layout2,null);  
  36.         view3 = inflater.inflate(R.layout.layout3, null);  
  37.           
  38.         viewList = new ArrayList<View>();// 将要分页显示的View装入数组中  
  39.         viewList.add(view1);  
  40.         viewList.add(view2);  
  41.         viewList.add(view3);  
  42.           
  43.           
  44.         PagerAdapter pagerAdapter = new PagerAdapter() {  
  45.               
  46.             @Override  
  47.             public boolean isViewFromObject(View arg0, Object arg1) {  
  48.                 // TODO Auto-generated method stub  
  49.                 return arg0 == arg1;  
  50.             }  
  51.               
  52.             @Override  
  53.             public int getCount() {  
  54.                 // TODO Auto-generated method stub  
  55.                 return viewList.size();  
  56.             }  
  57.               
  58.             @Override  
  59.             public void destroyItem(ViewGroup container, int position,  
  60.                     Object object) {  
  61.                 // TODO Auto-generated method stub  
  62.                 container.removeView(viewList.get(position));  
  63.             }  
  64.               
  65.             @Override  
  66.             public Object instantiateItem(ViewGroup container, int position) {  
  67.                 // TODO Auto-generated method stub  
  68.                 container.addView(viewList.get(position));  
  69.                   
  70.                   
  71.                 return viewList.get(position);  
  72.             }  
  73.         };  
  74.           
  75.           
  76.         viewPager.setAdapter(pagerAdapter);  
  77.           
  78.     }  
  79.   
  80.   
  81. }  
代码量很小,全部放在了OnCreate()函数中。

1、先看声明的变量的意义:

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. private View view1, view2, view3;  
  2. private List<View> viewList;//view数组  
  3. private ViewPager viewPager;  //对应的viewPager  

首先viewPager对应 <android.support.v4.view.ViewPager/>控件。

view1,view2 ,view3对应我们的三个layout,即layout1.xml,layout2.xml,layout3.xml

viewList是一个View数组,盛装上面的三个VIEW

2、接下来是他们的初始化过程:

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. viewPager = (ViewPager) findViewById(R.id.viewpager);  
  2. LayoutInflater inflater=getLayoutInflater();  
  3. view1 = inflater.inflate(R.layout.layout1, null);  
  4. view2 = inflater.inflate(R.layout.layout2,null);  
  5. view3 = inflater.inflate(R.layout.layout3, null);  
  6.   
  7. viewList = new ArrayList<View>();// 将要分页显示的View装入数组中  
  8. viewList.add(view1);  
  9. viewList.add(view2);  
  10. 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)

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

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. @Override  
  2. public int getCount() {  
  3.     // TODO Auto-generated method stub  
  4.     return viewList.size();  
  5. }  
getCount():返回要滑动的VIew的个数

[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. @Override  
  2. public void destroyItem(ViewGroup container, int position,  
  3.         Object object) {  
  4.     // TODO Auto-generated method stub  
  5.     container.removeView(viewList.get(position));  
  6. }  
destroyItem():从当前container中删除指定位置(position)的View;
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. @Override  
  2. public Object instantiateItem(ViewGroup container, int position) {  
  3.     // TODO Auto-generated method stub  
  4.         container.addView(viewList.get(position));  
  5.           
  6.           
  7.         return viewList.get(position);  
  8.     }  
  9. };  
instantiateItem():做了两件事,第一:将当前视图添加到container中,第二:返回当前View
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. @Override  
  2. public boolean isViewFromObject(View arg0, Object arg1) {  
  3.     // TODO Auto-generated method stub  
  4.     return arg0 == arg1;  
  5. }  
isViewFromObject():对于这个函数就先不做讲解,大家目前先知道它要这样重写就行了,后面我们会对它进行改写。


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


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


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

前言:这两天研究研究
  • harvic880925
  • harvic880925
  • 2014年08月09日 09:48
  • 170364

ViewPager 从入门到带你撸个启动页之ViewPager基础入门(一)

一、ViewPager的基本用法1.ViewPager概述  ViewPager是android扩展包v4包中的类,这个类可以让我们左右切换当前的view。我们先来聊聊ViewPager的几个相关知识...
  • javazejian
  • javazejian
  • 2016年08月06日 22:18
  • 2148

Spring基础--Spring(你必须要懂得基础)

1_Spring概述 作者: 风离紫竹--tryzq521@126.com 2_IOC 作者: 风离紫竹--tryzq521@126.com ...
  • u011200604
  • u011200604
  • 2016年06月16日 23:55
  • 9629

《ViewPager 详解(一)---基本入门》对应源码

  • 2014年08月09日 11:18
  • 1.6MB
  • 下载

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

ViewPager 详解(一)——基本入门
  • u010356768
  • u010356768
  • 2017年05月24日 10:20
  • 148

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

目录(?)[+] 前言:这两天研究研究ViewPager滚动功能,现在很多的app都有用到这个功能,我们的大虾米也有这个模块。要研究就彻底的研究研究,我从不满足于一个功能只是简单的应...
  • u012207345
  • u012207345
  • 2017年07月03日 20:19
  • 48

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

前言:这两天研究研究ViewPager滚动功能,现在很多的app都有用到这个功能,我们的大虾米也有这个模块。要研究就彻底的研究研究,我从不满足于一个功能只是简单的应用,要学就学的彻底,所以我打算将Vi...
  • xiaoyoushan8899
  • xiaoyoushan8899
  • 2015年06月18日 17:13
  • 140

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

版权声明:本文为博主转载文章,出处http://blog.csdn.net/harvic880925/article/details/38453725  前言:这两天研究研究ViewPager滚...
  • qq_25788211
  • qq_25788211
  • 2017年05月07日 23:00
  • 121

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

 前言:这两天研究研究ViewPager滚动功能,现在很多的app都有用到这个功能,我们的大虾米也有这个模块。要研究就彻底的研究研究,我从不满足于一个功能只是简单的应用,要学就学的彻底,所以我打...
  • yan8024
  • yan8024
  • 2015年07月23日 16:13
  • 653

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

首先让大家有个全局的认识,直接上个项目,看看仅仅通过这几行代码,竟然就能完成如此强悍的功能。下篇再结合API仔细讲讲为什么要这么写。 效果图: 实现了三个view间的相互滑动          ...
  • Guofengpu
  • Guofengpu
  • 2016年10月01日 09:32
  • 224
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ViewPager 详解(一)---基本入门
举报原因:
原因补充:

(最多只允许输入30个字)