android之ViewPager带指引

最新推荐文章于 2024-04-28 17:56:38 发布

原创最新推荐文章于 2024-04-28 17:56:38 发布 · 949 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍如何使用ViewPager实现带有滑动指示器的应用界面。通过添加圆形指示图标并结合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{

		@Override
		public void onPageScrollStateChanged(int arg0) {}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {}

		//记录上一次滑到的是第几个页面
		int temp = 0;
		@Override
		public 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>();//存放待滑动的view
	private LayoutInflater mInflater;
	private View view_01, view_02, view_03;//三个待滑动的view
	private 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);//设置当前pager
		mViewPager.setOnPageChangeListener(new ViewPagerChangeListener());
	}
	
	
	class MyPagerAdapter extends PagerAdapter{
		
		@Override
		public int getCount() {//返回view数量
			return mViewList.size();
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == arg1;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			container.removeView(mViewList.get(position));
		}

		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			container.addView(mViewList.get(position), 0);
			return mViewList.get(position);
		}
	}
	
	class ViewPagerChangeListener implements OnPageChangeListener{

		@Override
		public void onPageScrollStateChanged(int arg0) {}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {}

		//记录上一次滑到的是第几个页面
		int temp = 0;
		@Override
		public 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;
		}
	}
}