转自:
http://www.jianshu.com/p/653680cfe877
在学习这篇博文的时候,发现已经忘记了PagerTransformer的参数的使用,于是重新研究:
- PagerTransformer 接口
public interface PageTransformer {
/**
* Apply a property transformation to the given page.
*
* @param page Apply the transformation to this page
* @param position Position of page relative to the current front-and-center
* position of the pager. 0 is front and center. 1 is one full
* page position to the right, and -1 is one page position to the left.
*/
public void transformPage(View page, float position);
}
源码里的说明是如上的,意思是:
讲一个属性变幻,应用在提供的page上
position : 各个页面,相对于当前viewpager 中心页面的位置,
0 : 当前展示给用户的最中心的页面
1 : 中心页右边的页
2 : 中心页左边的页
这样说还是不明朗,我们可以换一个角度阐述
view 从当前中心 到 屏幕左边出画时 position : 0 -> -1
view 从当前中心 到 屏幕右边出画时 position : 0 -> 1
view 从屏幕右边 入画 到屏幕中心 position : 1 -> 0
view 从屏幕左边 入画 到屏幕中心 position : -1 -> 0
也就是说,view 不是一成不变的,对应这viewpager中不同的page,我们要用-1,0 ,1 来区分状态
其实这样翻译也是不能理解的,如果你log一下,就会发现:
public class CustomTransformer implements ViewPager.PageTransformer {
private static final String TAG = "CustomTransformer";
private static final float DEF_SCALE = 0.5F;
@Override
public void transformPage(View page, float position) {
Log.d(TAG, "position: " + position);
if (position < -1f) { //-无穷 -> -1
Log.d(TAG, "transformPage: position < -1 -> " + position);
// page.setScaleY(DEF_SCALE);
} else if (position < 0) {//左滑 0 -> -1 右滑 -1 -> 0
Log.d(TAG, "transformPage: position < 0 -> " + position);
float scale = 1f + 0.5f * position;
page.setScaleY(scale);
} else if (position <= 1) {//左滑 1 -> 0 右滑 0 -> 1
Log.d(TAG, "transformPage: position < 1 -> " + position);
float scale = 1f - 0.5f * position;
page.setScaleY(scale);
} else {
Log.d(TAG, "transformPage: position > 1 -> " + position);
// page.setScaleY(DEF_SCALE);
}
}
}
在说明一个PageAdapter里的方法:
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
如果不做任何处理,那么所有的View 即page 都会缓存在内存中,viewpager的setOffscreenPageLimit()方法,也就没有意义了
在说明一下ViewPager的setOffscreenpageLimit()方法
/**
* Set the number of pages that should be retained to either side of the
* current page in the view hierarchy in an idle state. Pages beyond this
* limit will be recreated from the adapter when needed.
//用于设置 : 在idle状态下,在view层级中,当前页左侧 和 右侧 保留的page页数,
//超过这个限制的page,将会在adapter中被重新创建(NOTE:个人认为,调用adapter -- instantiateItem()方法)
//
*
* <p>This is offered as an optimization. If you know in advance the number
* of pages you will need to support or have lazy-loading mechanisms in place
* on your pages, tweaking this setting can have benefits in perceived(. 察觉，感觉；理解；认知) smoothness
* of paging animations and interaction(相互作用；[数] 交互作用). If you have a small number of pages (3-4)
* that you can keep active all at once, less time will be spent in layout for
* newly created view subtrees as the user pages back and forth.</p>
//这是作为优化提供的。 如果您事先知道您需要支持的页面数量或者您的页面上已经安装了懒加载机制，
//则调整此设置可以有助于感知动画和交互的平滑度。 如果您有少量页面（3-4），
//您可以一次性保持活动状态，则在新创建的视图子树的布局中将花费更少的时间作为用户页面来回浏览
*
* <p>You should keep this limit low, especially if your pages have complex layouts.
* This setting defaults to 1.</p>
//如果你的page的布局很复杂,你应该设置这个值 小一些,limit 默认值是 1
*
* @param limit How many pages will be kept offscreen in an idle state.
*/
public void setOffscreenPageLimit(int limit) {
if (limit < DEFAULT_OFFSCREEN_PAGES) {
Log.w(TAG, "Requested offscreen page limit " + limit + " too small; defaulting to " +
DEFAULT_OFFSCREEN_PAGES);
limit = DEFAULT_OFFSCREEN_PAGES;
}
if (limit != mOffscreenPageLimit) {
mOffscreenPageLimit = limit;
populate();
}
}
最终效果:
vp_clipChild_legacy.gif
可能看到: 左滑时候,右边的view有空白的时候,个人认为,是因为这个:
public class ClipAdapter extends PagerAdapter {
private final Context mContext;
public ClipAdapter(Context context) {
mContext = context;
}
@Override
public int getCount() {
return mImgs.length;
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(mContext);
imageView.setImageResource(mImgs[position]);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
container.addView(imageView);
return imageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
我们在instantianteItem()方法里是新建一个ImageView返回的,这比较耗时,可以采用Holder类(类似于RecyclerView里的ViewHolder)来避免这种情况,我就不写了,可以看原作者的博客
- 再说明ViewGroup的clipChild属性
默认情况:在子view绘制之前,子view 会被裁剪到 他们的边界大小,
这个属性,允许viewGroup 覆盖这一行为,以便进行动画操作等待
true -- 裁剪子view
false -- 不裁剪子view
/**
* By default, children are clipped to their bounds before drawing. This
* allows view groups to override this behavior for animations, etc.
*
* @param clipChildren true to clip children to their bounds,
* false otherwise
* @attr ref android.R.styleable#ViewGroup_clipChildren
*/
public void setClipChildren(boolean clipChildren) {
boolean previousValue = (mGroupFlags & FLAG_CLIP_CHILDREN) == FLAG_CLIP_CHILDREN;
if (clipChildren != previousValue) {
setBooleanFlag(FLAG_CLIP_CHILDREN, clipChildren);
for (int i = 0; i < mChildrenCount; ++i) {
View child = getChildAt(i);
if (child.mRenderNode != null) {
child.mRenderNode.setClipToBounds(clipChildren);
}
}
invalidate(true);
}
}
原作者说明如下:
clipChildren: 默认值为true,
子View 的大小只能在父View规定的范围之内，
比如父View的高为50，子View的高为60 ,那么多处的部分就会被裁剪。
如果我们设置这个值为false的话，那么多处的部分就不会被裁剪了。
这里我们就可以利用这个属性来实现了这个效果了，
我们设置ViewPager的父布局的clipChildren为false。
然后设置ViewPager 左右一定的边距，那么左右就空出了一定的区域，
利用clipChildren 属性，就能让前后页面的部分显示在当前页了。布局如下：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:clipChildren="false"
>
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
/>
</LinearLayout>
