zoukankan      html  css  js  c++  java

  • ViewPager 详解（一）---基本入门

    ViewPager 详解（一）---基本入门 - harvic - 博客频道 - CSDN.NET

    前言：这两天研究研究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 plaincopyprint?在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>  
    <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

    [html] view plaincopyprint?在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>  
    <?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
    [html] view plaincopyprint?在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>  
    <?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
    [html] view plaincopyprint?在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>  
    <?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>

    二、代码实战

    先上整体代码，然后逐步讲解。
    [java] view plaincopyprint?在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. }  
    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、先看声明的变量的意义：

    [java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    1. private View view1, view2, view3;  
    2. private List<View> viewList;//view数组  
    3. private ViewPager viewPager;  //对应的viewPager  
    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、接下来是他们的初始化过程：

    [java] view plaincopyprint?在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);  
    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)

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

    [java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    1. @Override  
    2. public int getCount() {  
    3.     // TODO Auto-generated method stub  
    4.     return viewList.size();  
    5. }  
    @Override
public int getCount() {
	// TODO Auto-generated method stub
	return viewList.size();
}
    getCount():返回要滑动的VIew的个数
    [java] view plaincopyprint?在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. }  
    @Override
public void destroyItem(ViewGroup container, int position,
		Object object) {
	// TODO Auto-generated method stub
	container.removeView(viewList.get(position));
}
    destroyItem（）：从当前container中删除指定位置（position）的View;
    [java] view plaincopyprint?在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. };  
    @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
    [java] view plaincopyprint?在CODE上查看代码片派生到我的代码片
    1. @Override  
    2. public boolean isViewFromObject(View arg0, Object arg1) {  
    3.     // TODO Auto-generated method stub  
    4.     return arg0 == arg1;  
    5. }  
    @Override
public boolean isViewFromObject(View arg0, Object arg1) {
	// TODO Auto-generated method stub
	return arg0 == arg1;
}
    isViewFromObject():对于这个函数就先不做讲解，大家目前先知道它要这样重写就行了，后面我们会对它进行改写。

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

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

     

    请大家尊重原创者版权，转载请标明出处：http://blog.csdn.net/harvic880925/article/details/38453725  万分感激！！！！！
  • 相关阅读:
    Reactive Extensions (Rx) 入门(5) —— Rx的事件编程
    Reactive Extensions (Rx) 入门(4) —— Rx的事件编程
    Reactive Extensions (Rx) 入门(3) —— Rx的事件编程
    Reactive Extensions (Rx) 入门(2) —— 安装 Reactive Extensions
    Reactive Extensions (Rx) 入门(1) —— Reactive Extensions 概要
    Xamarin NuGet 缓存包导致 already added : Landroid/support/annotation/AnimRes 问题解决方案
    Android 系统Action大全
    Xamarin Forms 实现发送通知点击跳转
    如何理解灰度发布
    推荐一款分布式微服务框架 Surging
  • 原文地址：https://www.cnblogs.com/seven1979/p/4269464.html
Copyright © 2011-2022 走看看