Add new Page Style:MULTI_PAGE_OVERLAY.

app/src/main/java/com/example/zhpan/circleviewpager/activity/PageStyleActivity.java

@@ -2,46 +2,65 @@ package com.example.zhpan.circleviewpager.activity;
 
 import android.graphics.Color;
 import android.os.Bundle;
+import android.widget.RadioButton;
+import android.widget.RadioGroup;
 
 import com.example.zhpan.circleviewpager.R;
 import com.example.zhpan.circleviewpager.viewholder.ImageResourceViewHolder;
 import com.zhpan.bannerview.BannerViewPager;
+import com.zhpan.bannerview.annotation.APageStyle;
 import com.zhpan.bannerview.constants.PageStyle;
 import com.zhpan.bannerview.utils.DpUtils;
 import com.zhpan.idea.utils.ToastUtils;
 
 public class PageStyleActivity extends BaseDataActivity {
-    private BannerViewPager<Integer, ImageResourceViewHolder> mBannerViewPager;
+    private BannerViewPager<Integer, ImageResourceViewHolder> mViewPager;
 
     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_page_style);
-        mBannerViewPager = findViewById(R.id.banner_view);
-        setupBanner();
+        mViewPager = findViewById(R.id.banner_view);
+        initRadioGroup();
     }
 
-    private void setupBanner() {
-        mBannerViewPager
+    private void setupBanner(@APageStyle int pageStyle) {
+        mViewPager
                 .setPageMargin(DpUtils.dp2px(20))
                 .setRevealWidth(DpUtils.dp2px(20))
                 .setInterval(3000)
-                .setPageStyle(PageStyle.MULTI_PAGE)
+                .setPageStyle(pageStyle)
                 .setHolderCreator(() -> new ImageResourceViewHolder(DpUtils.dp2px(5)))
                 .setIndicatorColor(Color.parseColor("#935656"), Color.parseColor("#FF4C39"))
                 .setOnPageClickListener(position -> ToastUtils.show("position:" + position))
                 .create(mDrawableList);
     }
 
+    private void initRadioGroup() {
+        RadioGroup radioGroupStyle = findViewById(R.id.rg_indicator_style);
+        radioGroupStyle.setOnCheckedChangeListener((group, checkedId) -> {
+            switch (checkedId) {
+                case R.id.rb_multi_page:
+                    setupBanner(PageStyle.MULTI_PAGE);
+                    break;
+                case R.id.rb_multi_page_overlay:
+                    setupBanner(PageStyle.MULTI_PAGE_OVERLAY);
+                    break;
+            }
+        });
+        RadioButton radioButton = findViewById(R.id.rb_multi_page_overlay);
+        radioButton.performClick();
+    }
+
     @Override
     protected void onStop() {
         super.onStop();
-        mBannerViewPager.stopLoop();
+        mViewPager.stopLoop();
     }
 
     @Override
     protected void onResume() {
         super.onResume();
-        mBannerViewPager.startLoop();
+        mViewPager.startLoop();
     }
 }

app/src/main/res/layout/activity_page_style.xml

@@ -1,16 +1,42 @@
 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     tools:context=".activity.PageStyleActivity">
 
     <com.zhpan.bannerview.BannerViewPager
         android:id="@+id/banner_view"
         android:layout_width="match_parent"
         android:layout_height="180dp"
-        app:bvp_page_style="multi_page"
-        android:layout_marginTop="20dp" />
+        android:layout_marginTop="20dp"
+        app:bvp_page_style="multi_page" />
+
+    <RadioGroup
+        android:id="@+id/rg_indicator_style"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_below="@id/banner_view"
+        android:layout_marginTop="20dp"
+        android:orientation="horizontal"
+        android:padding="15dp">
+
+        <RadioButton
+            android:id="@+id/rb_multi_page_overlay"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="15dp"
+            android:text="MULTI_PAGE_OVERLAY" />
+
+        <RadioButton
+            android:id="@+id/rb_multi_page"
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:layout_marginEnd="15dp"
+            android:text="MULTI_PAGE" />
+
+
+    </RadioGroup>
 
 </RelativeLayout>

bannerview/src/main/java/com/zhpan/bannerview/BannerViewPager.java

@@ -36,6 +36,7 @@ import com.zhpan.bannerview.holder.ViewHolder;
 import com.zhpan.bannerview.provider.BannerScroller;
 import com.zhpan.bannerview.provider.ViewStyleSetter;
 import com.zhpan.bannerview.transform.PageTransformerFactory;
+import com.zhpan.bannerview.view.CatchViewPager;
 
 import java.lang.reflect.Field;
 import java.util.ArrayList;
@@ -51,7 +52,7 @@ import static com.zhpan.bannerview.constants.IndicatorGravity.START;
 public class BannerViewPager<T, VH extends ViewHolder> extends RelativeLayout implements
         ViewPager.OnPageChangeListener {
 
-    private ViewPager mViewPager;
+    private CatchViewPager mViewPager;
 
     private List<T> mList;
     // 页面切换时间间隔
@@ -297,9 +298,25 @@ public class BannerViewPager<T, VH extends ViewHolder> extends RelativeLayout im
             case PageStyle.MULTI_PAGE:
                 setMultiPageStyle();
                 break;
+            case PageStyle.MULTI_PAGE_OVERLAY:
+                setMultiPageOverlayStyle();
+                break;
         }
     }
 
+    private void setMultiPageOverlayStyle() {
+        mPageMargin = mPageMargin == 0 ? DpUtils.dp2px(20) : mPageMargin;
+        mRevealWidth = mRevealWidth == 0 ? DpUtils.dp2px(20) : mRevealWidth;
+        setClipChildren(false);
+        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mViewPager.getLayoutParams();
+        params.leftMargin = mPageMargin + mRevealWidth;
+        params.rightMargin = mPageMargin + mRevealWidth;
+        mViewPager.setPageMargin(-mPageMargin);
+        mViewPager.setMultiPageOverlay(true);
+        mViewPager.setOffscreenPageLimit(2);
+        setPageTransformer(new ScaleInTransformer());
+    }
+
     @Override
     public void onPageSelected(int position) {
         currentPosition = position;

bannerview/src/main/java/com/zhpan/bannerview/annotation/APageStyle.java

@@ -8,6 +8,7 @@ import java.lang.annotation.RetentionPolicy;
 import java.lang.annotation.Target;
 
 import static com.zhpan.bannerview.constants.PageStyle.MULTI_PAGE;
+import static com.zhpan.bannerview.constants.PageStyle.MULTI_PAGE_OVERLAY;
 import static com.zhpan.bannerview.constants.PageStyle.NORMAL;
 
 /**
@@ -16,7 +17,7 @@ import static com.zhpan.bannerview.constants.PageStyle.NORMAL;
  *   Description:
  * </pre>
  */
-@IntDef({NORMAL, MULTI_PAGE})
+@IntDef({NORMAL, MULTI_PAGE, MULTI_PAGE_OVERLAY})
 @Retention(RetentionPolicy.SOURCE)
 @Target(ElementType.PARAMETER)
 public @interface APageStyle {

bannerview/src/main/java/com/zhpan/bannerview/constants/PageStyle.java

@@ -7,5 +7,5 @@ package com.zhpan.bannerview.constants;
  * </pre>
  */
 public interface PageStyle {
-    int NORMAL = 0, MULTI_PAGE = 1;
+    int NORMAL = 0, MULTI_PAGE = 1, MULTI_PAGE_OVERLAY = 2;
 }

bannerview/src/main/java/com/zhpan/bannerview/view/CatchViewPager.java

@@ -5,7 +5,12 @@ import android.content.Context;
 import androidx.viewpager.widget.ViewPager;
 
 import android.util.AttributeSet;
+import android.util.SparseIntArray;
 import android.view.MotionEvent;
+import android.view.View;
+
+import java.util.ArrayList;
+import java.util.Collections;
 
 /**
  * Author zhangpan
@@ -13,6 +18,10 @@ import android.view.MotionEvent;
  * Description:处理嵌套PhotoView缩放引起的crash.
  */
 public class CatchViewPager extends ViewPager {
+    private ArrayList<Integer> mArrayList = new ArrayList<>();
+    private SparseIntArray mSparseIntArray = new SparseIntArray();
+    private boolean mMultiPageOverlay = false;
+
     public CatchViewPager(Context context) {
         this(context, null);
     }
@@ -30,4 +39,34 @@ public class CatchViewPager extends ViewPager {
         }
         return false;
     }
+
+    @Override
+    protected int getChildDrawingOrder(int childCount, int i) {
+        if (mMultiPageOverlay) {
+            if (i == 0 || mSparseIntArray.size() != childCount) {
+                mArrayList.clear();
+                mSparseIntArray.clear();
+                int viewCenterX = getViewCenterX(this);
+                for (int index = 0; index < childCount; ++index) {
+                    int indexAbs = Math.abs(viewCenterX - getViewCenterX(getChildAt(index)));
+                    mArrayList.add(++indexAbs);
+                    mSparseIntArray.append(indexAbs, index);
+                }
+                Collections.sort(mArrayList);
+            }
+            return mSparseIntArray.get(mArrayList.get(childCount - 1 - i));
+        } else {
+            return super.getChildDrawingOrder(childCount, i);
+        }
+    }
+
+    private int getViewCenterX(View view) {
+        int[] array = new int[2];
+        view.getLocationOnScreen(array);
+        return array[0] + view.getWidth() / 2;
+    }
+
+    public void setMultiPageOverlay(boolean multiPageOverlay) {
+        mMultiPageOverlay = multiPageOverlay;
+    }
 }