Android开发之ViewPager

什么是ViewPager？

ViewPager是安卓3.0之后提供的新特性，继承自ViewGroup，专门用以实现左右滑动切换View的效果。

如果想向下兼容就必须要android-support-v4.jar这个包的支持，这是一个来自google提供的一个附加包。

通俗点来讲，就是现在市面上大多数app，安装完第一次打开软件会出现的一个左右滑动的引导界面。

布局代码:

要点1、页面的小圆点的控制,当在当前页时小圆点不可点。

所以有多少个页面就需要添加多少的圆点图片。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   tools:context="com.example.viewpager.MainActivity" >

   <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="25dp"
            android:src="@drawable/point_selector" />
         <ImageView
            android:id="@+id/iv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="25dp"
            android:src="@drawable/point_selector" />
          <ImageView
            android:id="@+id/iv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="25dp"
            android:src="@drawable/point_selector" />
           <ImageView
            android:id="@+id/iv4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:clickable="true"
            android:padding="25dp"
            android:src="@drawable/point_selector" />
    </LinearLayout>

</RelativeLayout>

小圆点是否可点，则需要一个选择器，当当前页面可触碰，则小圆点为灰色，否则为白色

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_enabled="true" android:drawable="@drawable/page_now"></item>
    <item android:state_enabled="false" android:drawable="@drawable/page"></item>

</selector>

pege_now和page为准备好的图片,分别是灰色小圆点和白色小圆点。

ViewPager和ListView都需要一个适配器，ViewPager需要适配器来提供要显示页面的页数、判断是否是view对象、实例化一个页面、删除一个页面等等。。

适配器代码:

package com.example.viewpager;

import java.util.List;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

public class ImageAdapter extends PagerAdapter {

    private List<View> viewlist;
    public ImageAdapter(List<View> viewlist)
    {
        this.viewlist=viewlist;
    }
    @Override
    public int getCount() {//返回页面数
        // TODO Auto-generated method stub
        if (viewlist.size()!=0)
        {
            return viewlist.size();
        }
        return 0;
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {//判断是否为view对象
        // TODO Auto-generated method stub
        return arg0==arg1;
    }
    public Object instantiateItem(ViewGroup container,int position)//实例化一个页面
    {
        container.addView(viewlist.get(position));
        return viewlist.get(position);
    }
     public void destroyItem(ViewGroup container, int position, Object object) {//销毁一个页卡
               container.removeView(viewlist.get(position));
     }

}

MainActivity代码:

package com.example.viewpager;

import java.util.ArrayList;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener{

    private ViewPager viewpager=null;
    private List<View> viewlist=null;
    //private View view1, view2, view3, view4;
    private int images[]=new int[]{R.drawable.p01,R.drawable.w07,R.drawable.w08,R.drawable.welcome};
    private ImageView points[];//存放小圆圈数组 
    private int currentIndex=0;//当前页面,默认首页
    private static final String TAG="MainActivity";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViewPager();
        initPoint();
    }
    public void initPoint()//初始化小圆点
    {
        LinearLayout ll=(LinearLayout)findViewById(R.id.ll);
        points=new ImageView[4];
        for (int i=0;i<points.length;i++)
        {
            points[i]=(ImageView)ll.getChildAt(i);
            points[i].setEnabled(true);
            points[i].setOnClickListener(this);
             points[i].setTag(i);//标识符与圆点顺序一致
        }
        currentIndex=0;
        points[currentIndex].setEnabled(false);
    
        
    }
    private void initViewPager()
    {
        viewpager=(ViewPager)findViewById(R.id.viewpager);
        viewlist=new ArrayList<View>();
        for (int i = 0; i < images.length; i++) {
            ImageView imageView = new ImageView(MainActivity.this);
            imageView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
            imageView.setScaleType(ScaleType.FIT_XY);// 设置缩放样式
            imageView.setImageResource(images[i]);
            viewlist.add(imageView);
        }
        ImageAdapter adapter=new ImageAdapter(viewlist);//构造一个适配器
        viewpager.setAdapter(adapter);//给viewpager添加一个适配器
        viewpager.setOnPageChangeListener(this);//设置监听
        
        
    }
    @Override
    public void onClick(View arg0) {
        // TODO Auto-generated method stub
         Log.i("tuzi",arg0.getTag()+"");
    //    viewpager.setCurrentItem(Integer.parseInt((String) arg0.getTag()));//需要直接跳转的某个页面的时候
    }
    @Override
    public void onPageScrollStateChanged(int arg0) {
        //此方法是在状态改变的时候调用，其中arg0这个参数有三种状态（0，1，2）。arg0 ==1的时辰默示正在滑动，arg0==2的时辰默示滑动完毕了，arg0==0的时辰默示什么都没做。
        // TODO Auto-generated method stub
        
    }
    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub
        // 当页面在滑动的时候会调用此方法，在滑动被停止之前，此方法回一直得到调用。其中三个参数的含义分别为：
        // arg0 :当前页面，及你点击滑动的页面
        // arg1:当前页面偏移的百分比
        // arg2:当前页面偏移的像素位置 
        
    }
    @Override
    public void onPageSelected(int arg0) {
        // TODO Auto-generated method stub
        points[arg0].setEnabled(false);
        points[currentIndex].setEnabled(true);
        currentIndex=arg0;
    
    }
}

添加标题栏

PagerTabStrip与PagerTitleStrip的区别

其实这两个实现的效果基本差不多，但有两点不同：

1、PagerTabStrip在当前页面下，会有一个下划线条来提示当前页面的Tab是哪个。

2、PagerTabStrip的Tab是可以点击的，当用户点击某一个Tab时，当前页面就会跳转到这个页面，而PagerTitleStrip则没这个功能。

首先是PagerTitleStrip的用法

1、在布局文件添加上

<android.support.v4.view.PagerTitleStrip
android:id="@+id/pagetitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"/>

2、声明一个存放标题名称的数组

private ArrayList<String> titlelist=null;

并实例化

titlelist = new ArrayList<String>();// 每个页面的Title数据
titlelist.add("页面一");
titlelist.add("页面二");
titlelist.add("页面三");

3、在适配器中重写getPageTitle()函数

public CharSequence getPageTitle(int position) {
// TODO Auto-generated method stub
return titlelist.get(position);
}

注意点:要改适配器的构造函数

public ImageAdapter(List<View> viewlist,ArrayList<String> titlelist)
{
this.viewlist=viewlist;
this.titlelist=titlelist;
}

PagerTabStrip的用法和PagerTitleStrip相同

修改布局代码为:

<android.support.v4.view.PagerTabStrip
android:id="@+id/pagertab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"/>