ViewPager实现画廊效果
2016-08-04 10:44
288 查看
1.先看一下效果
2.技术要点:
1、setClipChildren(boolean clipChildren)方法:clipChild用来定义他的子控件是否要在他应有的边界内进行绘制。 默认情况下,clipChild被设置为true。 也就是不允许进行扩展绘制。而在这个Demo中承载ViewPager的父容器必须要将其设置为false才可以绘制旁边的两页
2、setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer))方法
用于设置ViewPager切换时的动画效果,许多ViewPager切换效果都是通过创建一个类实现ViewPager.PageTransformer然后重写transformPage方法来实现各种切换效果
3.上代码
布局文件:<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:id="@+id/viewPagerContainer" 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" android:clipChildren="false" android:gravity="center" tools:context="com.lsl.myapplication.MainActivity"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:layout_centerInParent="true" android:clipChildren="false" > </android.support.v4.view.ViewPager> </RelativeLayout>
主要代码
package com.lsl.myapplication; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.MotionEvent; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.RelativeLayout; import com.lsl.myapplication.utils.DeviceUtils; public class MainActivity extends AppCompatActivity { private ViewPager mViewPager; private RelativeLayout mViewPagerContainer; private static int TOTAL_COUNT = 10; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mViewPager= (ViewPager) findViewById(R.id.viewpager); mViewPagerContainer= (RelativeLayout) findViewById(R.id.viewPagerContainer); initViewPager(); } private void initViewPager() { //设置ViewPager的布局 RelativeLayout.LayoutParams params=new RelativeLayout.LayoutParams( DeviceUtils.getWindowWidth(this)*5/10, DeviceUtils.getWindowHeight(this)*6/10); /**** 重要部分 ******/ //clipChild用来定义他的子控件是否要在他应有的边界内进行绘制。 默认情况下,clipChild被设置为true。 也就是不允许进行扩展绘制。 mViewPager.setClipChildren(false); //父容器一定要设置这个,否则看不出效果 mViewPagerContainer.setClipChildren(false); mViewPager.setLayoutParams(params); //为ViewPager设置PagerAdapter mViewPager.setAdapter(new MyPagerAdapter()); //设置ViewPager切换效果,即实现画廊效果 mViewPager.setPageTransformer(true, new ZoomOutPageTransformer()); //设置预加载数量 mViewPager.setOffscreenPageLimit(2); //设置每页之间的左右间隔 mViewPager.setPageMargin(100); //将容器的触摸事件反馈给ViewPager mViewPagerContainer.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { // dispatch the events to the ViewPager, to solve the problem that we can swipe only the middle view. return mViewPager.dispatchTouchEvent(event); } }); } class MyPagerAdapter extends PagerAdapter { @Override public int getCount() { //return viewList==null?0:viewList.size(); return TOTAL_COUNT;//ViewPager里的个数 } @Override public boolean isViewFromObject(View view, Object object) { return (view == object); } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = new ImageView(MainActivity.this); imageView.setScaleType(ImageView.ScaleType.FIT_XY); imageView.setImageResource(R.mipmap.test); ((ViewPager)container).addView(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { ((ViewPager)container).removeView((ImageView)object); } } public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener { @Override public void onPageSelected(int position) { //这里做切换ViewPager时,底部RadioButton的操作 } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (mViewPagerContainer != null) { mViewPagerContainer.invalidate(); } } @Override public void onPageScrollStateChanged(int arg0) { } } /** * 实现的原理是,在当前显示页面放大至原来的MAX_SCALE * 其他页面才是正常的的大小MIN_SCALE */ class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MAX_SCALE = 1.2f; private static final float MIN_SCALE = 1.0f;//0.85f @Override public void transformPage(View view, float position) { //setScaleY只支持api11以上 if (position < -1){ view.setScaleX(MIN_SCALE); view.setScaleY(MIN_SCALE); } else if (position <= 1) //a页滑动至b页 ; a页从 0.0 -1 ;b页从1 ~ 0.0 { // [-1,1] // Log.e("TAG", view + " , " + position + ""); float scaleFactor = MIN_SCALE+(1-Math.abs(position))*(MAX_SCALE-MIN_SCALE); view.setScaleX(scaleFactor); //每次滑动后进行微小的移动目的是为了防止在三星的某些手机上出现两边的页面为显示的情况 if(position>0){ view.setTranslationX(-scaleFactor*2); }else if(position<0){ view.setTranslationX(scaleFactor*2); } view.setScaleY(scaleFactor); } else { // (1,+Infinity] view.setScaleX(MIN_SCALE); view.setScaleY(MIN_SCALE); } } } }
代码里面有一个DeviceUtils类,这个类主要用来获取设备的屏幕尺寸
源码下载
相关文章推荐
- Android App开发中ViewPager组件的入门使用教程
- 使用ViewPager实现高仿launcher左右拖动效果
- Android App中用Handler实现ViewPager页面的自动切换
- Android应用中使用ViewPager实现类似QQ的界面切换效果
- Android中ViewPager组件的基本用法及实现图片切换的示例
- 灵活使用Android中ActionBar和ViewPager切换页面
- Android实现千变万化的ViewPager切换动画
- Android中viewPager使用指南
- Android新特性页面之ViewPager拖拽到最后一页再拖拽打开其他Activity(三种方法)
- Android 使用 ViewPager循环广告位的实现
- Android中ViewPager实现滑动指示条及与Fragment的配合
- 详解Android App中ViewPager使用PagerAdapter的方法
- Android viewpager中动态添加view并实现伪无限循环的方法
- Android应用中使用ViewPager和ViewPager指示器来制作Tab标签
- Android ViewPager制作新手导航页(动态加载)
- 详解Android App中创建ViewPager组件的方法
- Android App中ViewPager与Fragment结合的一些问题解决
- 实现轮转广告带底部指示的自定义ViewPager控件
- 自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果
- 实例讲解Android中ViewPager组件的一些进阶使用技巧