UI界面之ViewPager多页面滑动效果的实现

标签：viewpager多页面滑动效果的实现   实现引导页   viewpager   多页面滑动   android ui   

今天我们就用ViewPager类来实现引导页的实战案例
实现功能：
1.实现ViewPager多页面滑动效果。
2.下方的显示当前焦点页的原点可以同步。
3.点击原点可以跳转到当前原点的焦点页面。

一、在布局中（mxl）

<FrameLayout 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">
   
	<android.support.v4.view.ViewPager
	    android:id="@+id/viewPager"
	    android:layout_width="match_parent"
	    android:layout_height="match_parent">
	 </android.support.v4.view.ViewPager>
	 
	 <LinearLayout 
	     android:id="@+id/pointsLayout"
	     android:layout_width="wrap_content"
	     android:layout_height="wrap_content"
	     android:orientation="horizontal"
	     android:layout_gravity="bottom|center_horizontal">
	     <ImageView 
	         android:layout_width="wrap_content"
	         android:layout_height="wrap_content"
	         android:src="@drawable/point_normal"
	         android:padding="15dp"/>
	      <ImageView 
	         android:layout_width="wrap_content"
	         android:layout_height="wrap_content"
	         android:src="@drawable/point_normal"
	         android:padding="15dp"/>
	       <ImageView 
	         android:layout_width="wrap_content"
	         android:layout_height="wrap_content"
	         android:src="@drawable/point_normal"
	         android:padding="15dp"/>
	 </LinearLayout>

</FrameLayout>

二、在java代码中（主函数）

package com.example.viewpager;

import java.util.ArrayList;
import java.util.List;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;

public class MainActivity extends Activity implements OnPageChangeListener,OnClickListener
{
	private ViewPager viewPager;
	private List<View> views;
	private ViewPagerAdapter adapter;
//	引导页界面3张图片的初始化
	private int[] guideImages={R.drawable.show01,R.drawable.show02,R.drawable.show03};
	private ImageView[] points;
	private LinearLayout pointsLayout;
//	当前选择页下标
	private int currentPoint;
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
		initData();
	}
//	初始化view
	private void initView()
	{	
		pointsLayout=(LinearLayout) findViewById(R.id.pointsLayout);
		viewPager=(ViewPager) findViewById(R.id.viewPager);
		views=new ArrayList<View>();	
		adapter=new ViewPagerAdapter(views);/*向ViewPagerAdapter即绑定数据类中传递参数views*/				
	}
//	初始化数据
	private void initData()
	{
		LayoutParams layoutParams=new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
		for(int i:guideImages)
		{
			ImageView imageView=new ImageView(this);
			imageView.setImageResource(i);
			imageView.setLayoutParams(layoutParams);
			views.add(imageView);
		}
		initPoint();
		viewPager.setAdapter(adapter);/*向ViewPagerAdapter即绑定数据类中传递参数views,前面已对adapter初始化*/
		viewPager.setOnPageChangeListener(this);/*设置viewPager的改变事件*/
	}
//	初始化原点
	private void initPoint()
	{
		points=new ImageView[guideImages.length];
		for(int i=0;i<pointsLayout.getChildCount();i++)
		{
			points[i]=(ImageView) pointsLayout.getChildAt(i);/*遍历LinearLayout中的子ImageView*/
			points[i].setImageResource(R.drawable.point_normal);/*获取原点的初始状态*/
			points[i].setOnClickListener(this);/*设置原点的点击事件*/
			points[i].setTag(i);/*设置原点标签，便于后面的onClick方法获取点击的那个原点*/
		}
		currentPoint=0;
		points[currentPoint].setImageResource(R.drawable.point_select);
	}
//	这里是实现OnPageChangeListener的三个方法，用到了其中的onPageSelected
@Override
	public void onPageScrollStateChanged(int arg0)
	{
	
	}
@Override
	public void onPageScrolled(int arg0, float arg1, int arg2)
	{
	
	}
//	当新的页面被选中时调用
@Override
	public void onPageSelected(int position)
	{
		setCurrentPoint(position);
	}
    private void setCurrentPoint(int position)
	{	
    	for(int i=0;i<pointsLayout.getChildCount();i++)
    	{
			points[i]=(ImageView) pointsLayout.getChildAt(i);
			points[i].setImageResource(R.drawable.point_normal);
		}
    	points[position].setImageResource(R.drawable.point_select);
	
	}
	@Override
//	点击事件的实现方法
	public void onClick(View v)
	{	
//		利用getTag方法来获取当前点击的原点
		int i=(int) v.getTag();
//		设置当前显示页
		viewPager.setCurrentItem(i);		
	}

}

三、ViewPagerAdapter类的实现

package com.example.viewpager;

import java.util.List;

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

public class ViewPagerAdapter extends PagerAdapter
{	private List<View> views;
	public ViewPagerAdapter( List<View> views){
		this.views=views;
	}
//	获取当前页面数
	public int getCount()
	{
		
		return this.views.size();
	}

//	初始化position位置的界面
		public Object instantiateItem(ViewGroup container, int position)
		{
		((ViewPager)container).addView(views.get(position));
		return views.get(position);
		}
//	判断是否有对象生成界面
	public boolean isViewFromObject(View arg0, Object arg1)
	{
		
		return arg0==arg1;
	}
	@Override
//	销毁页面
		public void destroyItem(ViewGroup container, int position, Object object)
		{
		((ViewPager)container).removeView(views.get(position));
		}
}

UI界面之ViewPager多页面滑动效果的实现

标签：viewpager多页面滑动效果的实现   实现引导页   viewpager   多页面滑动   android ui   

原文地址：http://blog.csdn.net/razespirit/article/details/41364419