实现ViewPager多页面滑动效果

标签: viewpager 页面 效果 | 发表时间:2014-11-22 02:02 | 作者:razeSpirit
出处:http://blog.csdn.net


viewPager实现引导页
ViewPager多页面滑动效果
1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右
切换tab页。
2.自android 3.0之后的SDK中提供了android-support-V4包用以实现
版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一
个可以实现左右滑动的类ViewPager

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

一、在布局中(xml)

<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));
		}
}


四、实现效果


作者:razeSpirit 发表于2014-11-21 18:02:40 原文链接
阅读:5 评论:0 查看评论

相关 [viewpager 页面 效果] 推荐:

实现ViewPager多页面滑动效果

- - CSDN博客移动开发推荐文章
viewPager实现引导页. ViewPager多页面滑动效果. 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现. 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一.

Android ViewPager与WP Pivot的视图对比

- - 雷锋网
【编者按】本文作者 @xiaomeng小猛 ,在iOS,Android和WP三家移动平台上,iOS的可用性是目前用户接受程度最高的,但是Android和WP也有不少各自平台的设计亮点,本章主要介绍Android和WindowsPhone的两种特色视图模式:Viewpager &  Pivot. 而且作者很负责的说,这两种视图模式是优异于iOS平台的.

jquery实现页面滚动到最下方自动按分页的形式加载内容效果

- - ITeye博客
//此处的 scroll_body 是滚动的元素,就是在这个区域滚动会触发事件来加载新的内容. //这个是目标应该添加到的窗口是哪个,此处为 div的ID为scroll_items的div,新加的内容会追加到此元素内部的最后面. //此处为需要调用的内容,可以为api接口,直接调用,然后那个页面可以分别用分页的方式显示数据.

Web页面入门

- - 可咔酷 | 网络杂货铺
开发页面在很多人眼里很简单,大部分的人都会说不就是把效果图变成网页嘛,哪里需要那么多的时间,一点技术含量都没有. 确实html页面没有js那么多复杂的交互,也不需要和后台数据打交道,但并不能代表就没有技术含量,也不是人人都能做好的. 页面结构好坏直接会影响到css代码的质量,也会影响js和后台的开发,还会影响到以后功能的扩展和代码的优化.

超酷光带效果

- 刘潇 - 博客园-首页原创精华区
今天看到一个网站上超酷的光带效果,分享给大家看看~. 查看效果:超酷光带效果 (flash载入需要等待一点时间) . // forked from one_truth's forked from: 光るリボン(Ribbon Light). // forked from mousepancyo's 光るリボン(Ribbon Light).

CSS3动画效果-animate.css

- - WEB前端开发
animate.css 是提供炫酷,有趣,跨浏览器css3动画的网站,你可以在高级项目中使用这些效果,为高级浏览器用户提供更好的交互体验. 动画效果包括强调突出,滑块,淡入淡出,放大缩小等等. 你也可以结合jQuery一起使用,例如$(‘.bouncy’).addClass(‘bounceInDown’); 项目主页:http://daneden.me/animate/ git地址:https://github.com/daneden/animate.css 声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发转载请注明转自《CSS3动画效果-animate.css》.

Jquery easyui 下loaing效果

- - CSDN博客推荐文章
beforeSend:ajaxLoading,\\发送请求前打开进度条. ajaxLoadEnd();\\任务执行成功,关闭进度条. 作者:songhfu 发表于2013-8-10 17:24:30 原文链接. 阅读:15 评论:0 查看评论.

关于页面字体

- Hu DongHai - DBA Notes
关于 Web 页面字体这方面,我是门外汉,弄不出来长篇大论 -- 这样也没必要,从观察统计上简单分析一下看看就够了. 几个页面字体适配度比较好的,HTML body 字体的定义:. 豆瓣:font: 12px/162% Arial,Helvetica,sans-serif;. 新浪微博:font-family: Arial,Helvetica,sans-serif;.

页面构建小工具

- Han - 所有文章 - UCD大社区
我们将在本文中介绍一些关于页面构建常用的一些小工具,大部分是基于firefox的插件,通过这些小工具可以让我们在页面构建中事半功倍.. 页面bug调试工具–Firebug. 实时测量工具–Measureit. 实时颜色选取工具–Colorzilla. SEO优化工具–SenSEO. CSS使用效率优化工具–CSS usage.