android之ViewPager带指引

ViewPager实现功能：

当滑动局部页面时，底部的圆点图片相应指引当前页面。

效果图：

即android之ViewPager简单实现局部滑动效果之后，在原先的代码的基础上继续添加功能。

【main.xml】

在main.xml中添加水平方向并列排放的三个圆点图片ImageView，用LinearLayout组织排列布局。第一个圆点默认是选中状态

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="fill_parent"        android:layout_height="200dp" />    <LinearLayout        android:id="@+id/iv_circle_dots"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:gravity="center_horizontal" >        <ImageView            android:id="@+id/iv_dot_01"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/dot_selected" />        <ImageView            android:id="@+id/iv_dot_02"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="5dp"            android:src="@drawable/dot_unselected" />        <ImageView            android:id="@+id/iv_dot_03"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginLeft="5dp"            android:src="@drawable/dot_unselected" />    </LinearLayout>    <TextView        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_marginTop="5dp"        android:text="实现viewPager局部滑动效果" /></LinearLayout>

【TestViewPager01Activity】

原先代码基础上加入以下代码：

1>用一个类型为ImageView的数组来存放三个圆点

private ImageView mCircleDots[];

2>在initViews()方法中添加以下代码。数组大小为滑动页面的数量。

    mCircleDots = new ImageView[mViewList.size()];//圆点数量和滑动的页面数量一致    mCircleDots[0] = (ImageView)findViewById(R.id.iv_dot_01);    mCircleDots[1] = (ImageView)findViewById(R.id.iv_dot_02);    mCircleDots[2] = (ImageView)findViewById(R.id.iv_dot_03);

3>在initViews()方法中添加监听

mViewPager.setOnPageChangeListener(new ViewPagerChangeListener());

4>监听页面改变时，圆点图片随之变化。

class ViewPagerChangeListener implements OnPageChangeListener{@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}//记录上一次滑到的是第几个页面int temp = 0;@Overridepublic void onPageSelected(int arg0) {//arg0代表当前页面的index，若是第一个页面则arg0=0，第二个页面arg0=1以此类推//当我们滑动页面后，指引相应页面的圆点图片更换为选中状态的图片mCircleDots[arg0].setImageResource(R.drawable.dot_selected);if(temp < arg0){//从右向左滑mCircleDots[arg0-1].setImageResource(R.drawable.dot_unselected);}else if(temp>arg0){//从左向右滑mCircleDots[arg0+1].setImageResource(R.drawable.dot_unselected);}temp = arg0;}}

【完整代码】

package com.viewpager;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;public class TestViewPager01Activity extends Activity {private ViewPager mViewPager;private List<View> mViewList = new ArrayList<View>();//存放待滑动的viewprivate LayoutInflater mInflater;private View view_01, view_02, view_03;//三个待滑动的viewprivate ImageView mCircleDots[];    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        initViews();      }private void initViews() {mInflater = getLayoutInflater();view_01 = mInflater.inflate(R.layout.layout1, null);view_02 = mInflater.inflate(R.layout.layout2, null);view_03 = mInflater.inflate(R.layout.layout3, null);    mViewList.add(view_01);    mViewList.add(view_02);    mViewList.add(view_03);        mCircleDots = new ImageView[mViewList.size()];//圆点数量和滑动的页面数量一致    mCircleDots[0] = (ImageView)findViewById(R.id.iv_dot_01);    mCircleDots[1] = (ImageView)findViewById(R.id.iv_dot_02);    mCircleDots[2] = (ImageView)findViewById(R.id.iv_dot_03);mViewPager = (ViewPager)findViewById(R.id.viewPager);mViewPager.setAdapter(new MyPagerAdapter());mViewPager.setCurrentItem(0);//设置当前pagermViewPager.setOnPageChangeListener(new ViewPagerChangeListener());}class MyPagerAdapter extends PagerAdapter{@Overridepublic int getCount() {//返回view数量return mViewList.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0 == arg1;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mViewList.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mViewList.get(position), 0);return mViewList.get(position);}}class ViewPagerChangeListener implements OnPageChangeListener{@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}//记录上一次滑到的是第几个页面int temp = 0;@Overridepublic void onPageSelected(int arg0) {//arg0代表当前页面的index，若是第一个页面则arg0=0，第二个页面arg0=1以此类推//当我们滑动页面后，指引相应页面的圆点图片更换为选中状态的图片mCircleDots[arg0].setImageResource(R.drawable.dot_selected);if(temp < arg0){//从右向左滑mCircleDots[arg0-1].setImageResource(R.drawable.dot_unselected);}else if(temp>arg0){//从左向右滑mCircleDots[arg0+1].setImageResource(R.drawable.dot_unselected);}temp = arg0;}}}