大家好，又見面了，我是你們的朋友全棧君。
文章目錄
-
-
- 開個頭
- 實作過程
-
- 1.先實作viewpager基本輪播效果
- 2.添加PageTransformer
- 3.添加padding 和 clipToPadding
- 4.設定Margin
-
- 出現了問題
- 解決方法1：優雅地設定margin
- 解決方法2：強行設定margin
-
開個頭
直接來一發最終的實作效果。
至于自動輪播和無限輪播的效果，可以自行百度或者google，這個不是本文的重點。
實作過程
1.先實作viewpager基本輪播效果
這個就不做過多解釋了，網上一抓一大把。
2.添加PageTransformer
PageTransformer是ViewPager的内部接口類。關于他的作用，直接看官方的注釋就夠了。
ViewPager.class
/** * A PageTransformer is invoked whenever a visible/attached page is scrolled. * This offers an opportunity for the application to apply a custom transformation * to the page views using animation properties. * * 當一個可見的被attach的頁面滾動的時候會調用PageTransformer。這給應用使用動畫屬性來實作自定義頁面動畫提供了機會。 * * <p>As property animation is only supported as of Android 3.0 and forward, * setting a PageTransformer on a ViewPager on earlier platform versions will * be ignored.</p> * * 因為屬性動畫隻支援android3.0及以上的系統，是以在3.0以下給ViewPager設定PageTransformer将無效。 * 這個我覺得我們不必擔心，因為目前google已經官宣放棄4.0以下系統的維護了，現在我們的minSdkVersion可以大膽設定為16了 */
public interface PageTransformer {
/** * Apply a property transformation to the given page. * 為被給定的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. * * postion是指頁面的位置，而這個位置就是目前頁面的的前端或者中心位置（蹩腳）。 * 0表示頁面在前端和中心。1表示頁面在右邊，-1表示頁面在左邊。 * 重點了解下面的變化規律。 * 也就說，當一個頁面從正中心位置往左邊滾動的時候，postion 0->-1 * 當一個頁面從正中心位置往右邊滾動的時候，position 0->1 * */
void transformPage(@NonNull View page, float position);
} 複制
ViewPager的每個page都有自己的position，每個page在滑動的時候，就像在一個紅色坐标軸上滑動一樣，坐标一直在變化，position也一直在變化。這裡postion就相當于坐标了。
看分割線以下。
從2位置滑動到1的位置，就是高度縮放變化為1 -> 0.8，position變化為0 -> -1。
從2位置滑動到3的位置，就是高度縮放變化為1 -> 0.8，position變化為0 -> 1。
下面就是數學題了。
設高度縮放為 scaleY。
-1 <= position < 0 ，scaleY = 0.8+(1-0.8) * (position + 1)
0 <= position <= 1，scaleY = 0.8 +(1-0.8) * (1 – position)
接下來就是把數學公式翻譯成android代碼了。
public class MyPageTransformer implements ViewPager.PageTransformer {
/** * Y方向最小縮放值 */
private static final float MIN_SCALE_Y = 0.8f;
@Override
public void transformPage(@NonNull View page, float position) {
if (position >= 1 || position <= -1) {
page.setScaleY(MIN_SCALE_Y);
} else if (position < 0) {
// -1 < position < 0
//View 在再從中間往左邊移動，或者從左邊往中間移動
float scaleY = MIN_SCALE_Y + (1 + position) * (1 - MIN_SCALE_Y);
page.setScaleY(scaleY);
} else {
// 0 <= positin < 1
//View 在從中間往右邊移動 或者從右邊往中間移動
float scaleY = (1 - MIN_SCALE_Y) * (1 - position) + MIN_SCALE_Y;
page.setScaleY(scaleY);
}
}
} 複制
給ViewPager設定PageTransformer
viewPager.setPageTransformer(false, new MyPageTransformer()); 複制
看效果，已經有模有樣了。
3.添加padding 和 clipToPadding
現在我們的效果是，當有一個page selected的時候，ViewPager隻能展示一個page。
是以需要在ViewPager布局檔案裡面，給ViewPager設定Padding，并且添加一個clipToPadding屬性設定為false。
具體原因就不解釋了，這不是本篇的重點。
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
android:paddingLeft="20dp"
android:paddingRight="20dp">
</android.support.v4.view.ViewPager> 複制
看下效果，越來越接近了。
4.設定Margin
接下來是給page之間設定間距。
先看下我的PageAdapter裡面的 instantiateItem方法。我為了偷懶沒有建立一個item.layout而是直接new 一個ImageView出來。
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
ImageView imageView = new ImageView(container.getContext());
ViewPager.LayoutParams layoutParams = new ViewPager.LayoutParams();
imageView.setLayoutParams(layoutParams);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setImageResource(dataSource.get(position));
container.addView(imageView);
return imageView;
} 複制
出現了問題
我想在ViewPager.LayoutParams 直接設定margin的時候，發現根本沒有setMargins()這個方法。
看了源碼才知道，VIewGroup裡面不止有個LayoutParams内部類，還有個MarginLayoutParams内部類。而我們的VIewPager.LayoutParams就是繼承ViewGroup.LayoutParams的
ViewGroup.class
public static class LayoutParams {
...}
/** * Per-child layout information for layouts that support margins. * 為每一個子View的布局資訊提供Margins。 * 是以ViewGroup.LayoutParams是不支援設定Margin的。 * See * {@link android.R.styleable#ViewGroup_MarginLayout ViewGroup Margin Layout Attributes} * for a list of all child view attributes that this class supports. * * @attr ref android.R.styleable#ViewGroup_MarginLayout_layout_margin * @attr ref android.R.styleable#ViewGroup_MarginLayout_layout_marginHorizontal * @attr ref android.R.styleable#ViewGroup_MarginLayout_layout_marginVertical * @attr ref android.R.styleable#ViewGroup_MarginLayout_layout_marginLeft * @attr ref android.R.styleable#ViewGroup_MarginLayout_layout_marginTop * @attr ref android.R.styleable#ViewGroup_MarginLayout_layout_marginRight * @attr ref android.R.styleable#ViewGroup_MarginLayout_layout_marginBottom * @attr ref android.R.styleable#ViewGroup_MarginLayout_layout_marginStart * @attr ref android.R.styleable#ViewGroup_MarginLayout_layout_marginEnd */
public static class MarginLayoutParams extends ViewGroup.LayoutParams {
...}
ViewPager.class
/** * Layout parameters that should be supplied for views added to a * ViewPager. */
public static class LayoutParams extends ViewGroup.LayoutParams {
...
public LayoutParams() {
super(MATCH_PARENT, MATCH_PARENT);
}
...
} 複制
看了上面的源碼，我把我的代碼改為如下。可是，還是沒有效果。
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
ImageView imageView = new ImageView(container.getContext());
ViewGroup.MarginLayoutParams layoutParams = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
//設定左右margin
layoutParams.setMargins(10, 0, 10, 0);
imageView.setLayoutParams(layoutParams);
imageView.setScaleType(ImageView.ScaleType.FIT_XY);
imageView.setImageResource(dataSource.get(position));
container.addView(imageView);
return imageView;
} 複制
氣急敗壞的我，趕緊去看ViewGroup的源碼，他到底給我的LayoutParams做了什麼。
ViewPager.class
@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
if (!checkLayoutParams(params)) {
//很明顯我們第二次設定的ViewGroup.MarginLayoutParams 是不屬于ViewPager.LayoutParams的。
//是以，他們給我們的ImageView重新設定了一個ViewPaget.LayoutParams。是以我們設定的Margin是無效的。
params = generateLayoutParams(params);
}
final LayoutParams lp = (LayoutParams) params;
...
}
@Override
protected ViewGroup.LayoutParams generateDefaultLayoutParams() {
return new LayoutParams();
}
@Override
protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
return generateDefaultLayoutParams();
}
@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
//檢查我們設定的LayoutParams是不是屬于ViewPager.LayoutParams類，并且是不是不為null。
return p instanceof LayoutParams && super.checkLayoutParams(p);
} 複制
解決方法1：優雅地設定margin
既然ViewPager的LayoutParams不支援設定margin，google大佬們肯定留了個入口，用其他方式設定。
ViewPager.class
/** * Set the margin between pages. * 在pages之間設定margin * * @param marginPixels Distance between adjacent pages in pixels * 注意：這裡的marginPixels參數的機關是像素。 * @see #getPageMargin() * @see #setPageMarginDrawable(Drawable) * @see #setPageMarginDrawable(int) */
public void setPageMargin(int marginPixels) {
final int oldMargin = mPageMargin;
mPageMargin = marginPixels;
final int width = getWidth();
recomputeScrollPosition(width, width, marginPixels, oldMargin);
requestLayout();
}
代碼中直接用viewPager的執行個體調用這個方法就行。
僞代碼：
viewPager.setPageMargin(20); 複制
解決方法2：強行設定margin
我不偷懶了還不行。我老老實實建立一個item.layout。然後在根節點設定margin。
item.layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical">
<ImageView
android:id="@+id/iv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
</LinearLayout> 複制
以上兩種方法都可以實作我們的開頭的最終效果。而兩種方法的卻别見下圖。
如有錯誤，歡迎指正！
釋出者：全棧程式員棧長，轉載請注明出處：https://javaforall.cn/138968.html原文連結：https://javaforall.cn