Android下ViewPager用法

    xiaoxiao2021-03-25  161

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

    效果图:

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

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

       

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

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

    1.在主布局文件里加入

    [html]  view plain  copy   <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 plain  copy   <?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 plain  copy   <?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 plain  copy   <?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>  

    二、代码实战

    先上整体代码,然后逐步讲解。 [java]  view plain  copy   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 plain  copy   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 plain  copy   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 plain  copy   @Override   public int getCount() {       // TODO Auto-generated method stub       return viewList.size();   }   getCount():返回要滑动的VIew的个数

    [java]  view plain  copy   @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 plain  copy   @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 plain  copy   @Override   public boolean isViewFromObject(View arg0, Object arg1) {       // TODO Auto-generated method stub       return arg0 == arg1;   }  

    isViewFromObject():对于这个函数就先不做讲解,大家目前先知道它要这样重写就行了,后面我们会对它进行改写。

    class GuidePageListener implements OnPageChangeListener{ @Override // view状态的改变 public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } // view滚动时调用 @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override // view被选中调用 public void onPageSelected(int arg0) { // TODO Auto-generated method stub } }

    转载请注明原文地址: https://ju.6miu.com/read-840.html

    最新回复(0)