轉(zhuǎn)自:
http://www.reibang.com/p/653680cfe877
在學(xué)習(xí)這篇博文的時候,發(fā)現(xiàn)已經(jīng)忘記了PagerTransformer的參數(shù)的使用,于是重新研究:
- 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);
}
源碼里的說明是如上的,意思是:
講一個屬性變幻,應(yīng)用在提供的page上
position : 各個頁面,相對于當(dāng)前viewpager 中心頁面的位置,
0 : 當(dāng)前展示給用戶的最中心的頁面
1 : 中心頁右邊的頁
2 : 中心頁左邊的頁
這樣說還是不明朗,我們可以換一個角度闡述
view 從當(dāng)前中心 到 屏幕左邊出畫時 position : 0 -> -1
view 從當(dāng)前中心 到 屏幕右邊出畫時 position : 0 -> 1
view 從屏幕右邊 入畫 到屏幕中心 position : 1 -> 0
view 從屏幕左邊 入畫 到屏幕中心 position : -1 -> 0
也就是說,view 不是一成不變的,對應(yīng)這viewpager中不同的page,我們要用-1,0 ,1 來區(qū)分狀態(tài)
其實這樣翻譯也是不能理解的,如果你log一下,就會發(fā)現(xiàn):
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 都會緩存在內(nèi)存中,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.
//用于設(shè)置 : 在idle狀態(tài)下,在view層級中,當(dāng)前頁左側(cè) 和 右側(cè) 保留的page頁數(shù),
//超過這個限制的page,將會在adapter中被重新創(chuàng)建(NOTE:個人認(rèn)為,調(diào)用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(. 察覺，感覺刹缝；理解糕殉；認(rèn)知) smoothness
* of paging animations and interaction(相互作用；[數(shù)] 交互作用). 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>
//這是作為優(yōu)化提供的驹针。 如果您事先知道您需要支持的頁面數(shù)量或者您的頁面上已經(jīng)安裝了懶加載機制烘挫，
//則調(diào)整此設(shè)置可以有助于感知動畫和交互的平滑度。 如果您有少量頁面（3-4）牌捷，
//您可以一次性保持活動狀態(tài)墙牌，則在新創(chuàng)建的視圖子樹的布局中將花費更少的時間作為用戶頁面來回瀏覽
*
* <p>You should keep this limit low, especially if your pages have complex layouts.
* This setting defaults to 1.</p>
//如果你的page的布局很復(fù)雜,你應(yīng)該設(shè)置這個值 小一些,limit 默認(rèn)值是 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有空白的時候,個人認(rèn)為,是因為這個:
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屬性
默認(rèn)情況:在子view繪制之前,子view 會被裁剪到 他們的邊界大小,
這個屬性,允許viewGroup 覆蓋這一行為,以便進(jìn)行動畫操作等待
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: 默認(rèn)值為true,
子View 的大小只能在父View規(guī)定的范圍之內(nèi)涡驮，
比如父View的高為50，子View的高為60 ,那么多處的部分就會被裁剪喜滨。
如果我們設(shè)置這個值為false的話捉捅，那么多處的部分就不會被裁剪了。
這里我們就可以利用這個屬性來實現(xiàn)了這個效果了虽风，
我們設(shè)置ViewPager的父布局的clipChildren為false棒口。
然后設(shè)置ViewPager 左右一定的邊距，那么左右就空出了一定的區(qū)域辜膝，
利用clipChildren 屬性无牵，就能讓前后頁面的部分顯示在當(dāng)前頁了。布局如下：
<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>
