码迷,mamicode.com
首页 > 其他好文 > 详细

千变万化的ViewPager切换动画(2)--自定义ViewPager的实现方法

时间:2015-03-03 16:40:11      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:千变万化的viewpager切换动画2-   动画   viewpager   

(1)创建项目Viewpager_anim_myself 都采用默认的方式,添加三张图片资源文件,src-包目录下创建MyViewPagerTransformerAnim.java类

布局文件activity_main.xml如下:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <!-- ctrl+shitf+t 可以找到viewpager的包名 -->


    <!-- 这里使用的是自定义的view -->

    <com.lc.viewpager_anim.MyViewPagerTransformerAnim
        android:id="@+id/id_viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </com.lc.viewpager_anim.MyViewPagerTransformerAnim>

</RelativeLayout>

编辑MainActivity.java

package com.lc.viewpager_anim;

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

import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;

public class MainActivity extends Activity {

	MyViewPagerTransformerAnim myViewPagerTransformerAnim;

	private int[] mImgIds = new int[] { R.drawable.guide_image1,
			R.drawable.guide_image2, R.drawable.guide_image3 };

	private List<ImageView> mImages = new ArrayList<ImageView>();

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		setContentView(R.layout.activity_main);

		myViewPagerTransformerAnim = (MyViewPagerTransformerAnim) findViewById(R.id.id_viewpager);
		// 添加适配器
		myViewPagerTransformerAnim.setAdapter(new PagerAdapter() {

			/**
			 * 初始化代码
			 */
			@Override
			public Object instantiateItem(ViewGroup container, int position) {
				ImageView imageView = new ImageView(MainActivity.this);
				imageView.setImageResource(mImgIds[position]);
				imageView.setScaleType(ScaleType.CENTER_CROP);// 设置图片的形状防止变形
				container.addView(imageView);
				mImages.add(imageView);

				// 初始化
				myViewPagerTransformerAnim.setViewForPosition(imageView,
						position);

				return imageView;
			}

			@Override
			public void destroyItem(ViewGroup container, int position,
					Object object) {
				container.removeView(mImages.get(position));
				myViewPagerTransformerAnim.removeViewFromPosition(position); // remove

			}

			@Override
			public boolean isViewFromObject(View view, Object object) {
				return view == object;
			}

			@Override
			public int getCount() {
				return mImgIds.length;
			}
		});
	}

}

其中自定义的view如下所示:MyViewPagerTransformerAnim.java

package com.lc.viewpager_anim;

import java.util.HashMap;
import java.util.Map;

import com.nineoldandroids.view.ViewHelper;

import android.R.integer;
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/*
 * 自定义viewpager实现动画切换效果:
 * 
 * 1、需要拿到当前切换的两个view
 * 
 * 2、一个动画的梯度值
 */
public class MyViewPagerTransformerAnim extends ViewPager {

	private View mLeft;
	private View mRight;

	private float mTrans;
	private float mScale;

	private static final float MIN_SCALE = 0.6f;
	private Map<Integer, View> mChildren = new HashMap<Integer, View>();

	/*
	 * 要有两个构造方法
	 */
	public MyViewPagerTransformerAnim(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public MyViewPagerTransformerAnim(Context context) {
		super(context);
	}

	/*
	 * 设置put的方法
	 */
	public void setViewForPosition(View view, int position) {
		mChildren.put(position, view);
	}

	/*
	 * remove的方法
	 */
	public void removeViewFromPosition(Integer position) {
		mChildren.remove(position);
	}

	/**
	 * 重写的方法
	 */
	@Override
	protected void onPageScrolled(int position, float offset, int offsetPixels) {

		// Log.e("TAG", "position =" + position + ",offset = " + offset);
		mLeft = mChildren.get(position);
		mRight = mChildren.get(position + 1);

		animStack(mLeft, mRight, offset, offsetPixels);// 创建动画效果

		super.onPageScrolled(position, offset, offsetPixels);
	}

	private void animStack(View left, View right, float offset, int offsetPixels) {
		if (right != null) {

			// 从0-1页,offset:0`1
			mScale = (1 - MIN_SCALE) * offset + MIN_SCALE;

			mTrans = -getWidth() - getPageMargin() + offsetPixels;

			ViewHelper.setScaleX(right, mScale);
			ViewHelper.setScaleY(right, mScale);

			ViewHelper.setTranslationX(right, mTrans);
		}
		if (left != null) {
			left.bringToFront();
		}
	}
}

完整项目代码如下:http://download.csdn.net/detail/u010870518/8469327


千变万化的ViewPager切换动画(2)--自定义ViewPager的实现方法

标签:千变万化的viewpager切换动画2-   动画   viewpager   

原文地址:http://blog.csdn.net/xlgen157387/article/details/44039529

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!