Android ViewPager导航------平凡中有奇迹
ViewPager做导航想不想有这样的效果:
比如说有四张图片,下面有四个圆点,当页面滑动的时候一个点变大一个点变小(或者是一个点变小一个点变大),等于说同时在执行两个动画。
package com.example.day_2014_10_17_viewpager; import java.util.ArrayList; import java.util.HashMap; import java.util.LinkedHashMap; import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.widget.ImageView; import com.nineoldandroids.view.ViewHelper; import com.panpass.adapter.MyViewPagerAdapter; import com.panpass.view.MyViewPager; import com.panpass.view.MyViewPager.DiyPageScrollListener; public class MainActivity extends Activity { private Context mContext = this; private MyViewPager mViewPager; private ImageView imageView1, imageView2, imageView3, imageView4; private ArrayList<ImageView> mList; private HashMap<Integer, ImageView> mHashMap = new LinkedHashMap<Integer, ImageView>(); private static final float SCALE_MAX = 0.55f; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mList = new ArrayList<ImageView>(); ImageView img = new ImageView(mContext); img.setBackgroundResource(R.drawable.guide_page1); mList.add(img); img = new ImageView(mContext); img.setBackgroundResource(R.drawable.guide_page2); mList.add(img); img = new ImageView(mContext); img.setBackgroundResource(R.drawable.guide_page3); mList.add(img); img = new ImageView(mContext); img.setBackgroundResource(R.drawable.guide_page4); mList.add(img); mViewPager = (MyViewPager) findViewById(R.id.view_pager); mViewPager.setAdapter(new MyViewPagerAdapter(mList)); imageView1 = (ImageView) findViewById(R.id.imageView1); imageView2 = (ImageView) findViewById(R.id.imageView2); imageView3 = (ImageView) findViewById(R.id.imageView3); imageView4 = (ImageView) findViewById(R.id.imageView4); ViewHelper.setScaleX(imageView2, SCALE_MAX); ViewHelper.setScaleY(imageView2, SCALE_MAX); ViewHelper.setScaleX(imageView3, SCALE_MAX); ViewHelper.setScaleY(imageView3, SCALE_MAX); ViewHelper.setScaleX(imageView4, SCALE_MAX); ViewHelper.setScaleY(imageView4, SCALE_MAX); mHashMap.put(0, imageView1); mHashMap.put(1, imageView2); mHashMap.put(2, imageView3); mHashMap.put(3, imageView4); mViewPager.setDiyOnPageScrollListener(new DiyPageScrollListener() { @Override public void diyOnPageScrollListener(int position, float positionOffset, int positionOffsetPixels, boolean left, boolean right) { // 获取左边的View ImageView mLeftImg = mHashMap.get(position); // 获取右边的View ImageView mRightImg = mHashMap.get(position + 1); // 判断滑动的方向 float mScaleRight; float mScaleLeft; /** * 注意事件: 1 注意你要很灵敏的判断ViewPager的切换方向是很难的,对于要求很高的应用来说是做不到了。 2 * 不管是向左滑动还是向右滑动,他们有的都是同一种算法 */ if (mRightImg != null) { /** * 缩小比例 如果手指从右到左的滑动(切换到后一个):0.0~1.0,即从一半到最大 * 如果手指从左到右的滑动(切换到前一个):1.0~0,即从最大到一半 */ mScaleRight = (1-SCALE_MAX) * positionOffset + SCALE_MAX; /** * x偏移量: 如果手指从右到左的滑动(切换到后一个):0-720 如果手指从左到右的滑动(切换到前一个):720-0 */ ViewHelper.setScaleX(mRightImg, mScaleRight); ViewHelper.setScaleY(mRightImg, mScaleRight); } if (mLeftImg != null) { mScaleLeft = (1-SCALE_MAX) * (1 - positionOffset) + SCALE_MAX; /** * x偏移量: 如果手指从右到左的滑动(切换到后一个):0-720 如果手指从左到右的滑动(切换到前一个):720-0 */ ViewHelper.setScaleX(mLeftImg, mScaleLeft); ViewHelper.setScaleY(mLeftImg, mScaleLeft); } } }); } }
package com.panpass.adapter; import java.util.ArrayList; import android.support.v4.view.PagerAdapter; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; public class MyViewPagerAdapter extends PagerAdapter { private ArrayList<ImageView> imgList; public MyViewPagerAdapter(ArrayList<ImageView> imgList) { super(); this.imgList = imgList; } @Override public int getCount() { return imgList.size(); } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView img = imgList.get(position); container.addView(img); return img; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((ImageView)object); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == (View)arg1; } }
package com.panpass.view; import android.content.Context; import android.support.v4.view.ViewPager; import android.util.AttributeSet; public class MyViewPager extends ViewPager { private boolean left = false; private boolean right = false; private boolean isScrolling = false; private int lastValue = -1; private ChangeViewCallback changeViewCallback = null; public MyViewPager(Context context, AttributeSet attrs) { super(context, attrs); init(); } public MyViewPager(Context context) { super(context); init(); } private DiyPageScrollListener listener1; public interface DiyPageScrollListener{ void diyOnPageScrollListener(int position, float positionOffset, int positionOffsetPixels,boolean left,boolean right); } public void setDiyOnPageScrollListener(DiyPageScrollListener listener){ this.listener1 = listener; } @Override protected void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { listener1.diyOnPageScrollListener(position, positionOffset, positionOffsetPixels,left,right); super.onPageScrolled(position, positionOffset, positionOffsetPixels); } /** * init method . */ private void init() { // setOnPageChangeListener(listener); } /** * listener ,to get move direction . */ public OnPageChangeListener listener = new OnPageChangeListener() { @Override public void onPageScrollStateChanged(int arg0) { if (arg0 == 1) { isScrolling = true; } else { isScrolling = false; } if (arg0 == 2) { if(changeViewCallback!=null){ changeViewCallback.changeView(left, right); } right = left = false; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { if (isScrolling) { if (lastValue > arg2) { // 递减,向右侧滑动 right = true; left = false; } else if (lastValue < arg2) { // 递减,向右侧滑动 right = false; left = true; } else if (lastValue == arg2) { right = left = false; } } lastValue = arg2; } @Override public void onPageSelected(int arg0) { if(changeViewCallback!=null){ changeViewCallback.getCurrentPageIndex(arg0); } } }; /** * 得到是否向右侧滑动 * @return true 为右滑动 */ public boolean getMoveRight(){ return right; } /** * 得到是否向左侧滑动 * @return true 为左做滑动 */ public boolean getMoveLeft(){ return left; } /** * 滑动状态改变回调 * @author zxy * */ public interface ChangeViewCallback{ public void changeView(boolean left,boolean right); public void getCurrentPageIndex(int index); } public void setChangeViewCallback(ChangeViewCallback callback){ changeViewCallback = callback; } }
<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" > <com.panpass.view.MyViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="50dp" android:gravity="center" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/banner_circle_big" /> <ImageView android:id="@+id/imageView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:src="@drawable/banner_circle_big" /> <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:src="@drawable/banner_circle_big" /> <ImageView android:id="@+id/imageView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:src="@drawable/banner_circle_big" /> </LinearLayout> </RelativeLayout>
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。