Android自定义弧形ViewPager

先上效果图

实现起来比较简单。

实现思路

自定义弧形View。如下所示。

圆和屏幕相交的地方就是我们所需要的弧形，当然也可以使用贝塞尔曲线绘制。

半径为测量布局宽度*2

绘制过程如下：

      @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawCircle(mCustomWidth / 2, mCustomHeight - mRadius, mRadius, mCustomPaint);

    }

接着我们还需要一个在CustomHeaderView下方挡住其余部分的圆弧（利用贝塞尔曲线绘制）。为什么需要请自己发现。

    /**
     * @description：遮盖PagerView的贝塞尔曲线
     * @Author MRyan
     * @Date 2020/3/19 13:52
     * @Version 1.0
     */
    public class ArcCoverView extends View {
    
        private Paint mPaint;
        private Path mPath;
        private int width;
        private int height;
    
        public ArcCoverView(Context context) {
            this(context, null);
        }
    
        public ArcCoverView(Context context, @Nullable AttributeSet attrs) {
            this(context, attrs, 0);
        }
    
        public ArcCoverView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            width = context.getResources().getDisplayMetrics().widthPixels;
            height = 220;
            mPaint = new Paint();
            mPaint.setColor(Color.WHITE);
            mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            mPaint.setAntiAlias(true);
            mPath = new Path();
        }
    
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mPath.moveTo(0, 0);
            mPath.quadTo(width / 2, height * 2 - 190, width, 0);
            mPath.lineTo(width, height);
            mPath.lineTo(0, height);
            canvas.drawPath(mPath, mPaint);
        }
    }

然后我们自定义PagerAdapter填充View

    /**
     * @description：填充PagerView
     * @Author MRyan
     * @Date 2020/3/19 13:19
     * @Version 1.0
     */
    public class MyPagerViewAdapter extends PagerAdapter {
    private List<View> views;
    private Context context;

    public MyPagerViewAdapter(List<View> views, Context context) {
        this.context = context;
        this.views = views;
    }

    @Override
    public int getCount() {
        return views.size();
    }

    @Override
    public void destroyItem(@NonNull View container, int position, @NonNull  Object object) {
        ((ViewPager) container).removeView(views.get(position));
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull View container, int position) {
        ((ViewPager) container).addView(views.get(position));
        return views.get(position);
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object)     {
        return (view == object) ;
     }}

在布局中引用

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout 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"
        android:background="@color/white"
        tools:context=".MainActivity">
    
    
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/vp_main_show"
            android:layout_width="0dp"
            android:layout_height="300dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent">
    
        </androidx.viewpager.widget.ViewPager>
    
        <com.custom.headerpagerview.ArcCoverView
            android:id="@+id/arcCoverView"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:layout_marginTop="125dp"
            app:layout_constraintBottom_toBottomOf="@+id/vp_main_show"></com.custom.headerpagerview.ArcCoverView>
    
    </androidx.constraintlayout.widget.ConstraintLayout>

主函数中调用

    public class MainActivity extends AppCompatActivity {
    
        private ViewPager viewPager;
        private MyPagerViewAdapter myPagerViewAdapter;
        private View view1;
        private View view2;
        private View view3;
        private List<View> views;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//版本判断
                // Translucent status bar
                this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);//设置statusbar应用所占的屏幕扩大到全屏，但是最顶上会有背景透明的状态栏，它的文字可能会盖着你的应用的标题栏
                getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
            }
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            viewPager = findViewById(R.id.vp_main_show);
            init();
        }
    
        private void init() {
            views = new ArrayList<>();
            view1 = LayoutInflater.from(this).inflate(R.layout.view1, null);
            view2 = LayoutInflater.from(this).inflate(R.layout.view2, null);
            view3 = LayoutInflater.from(this).inflate(R.layout.view3, null);
            views.add(view1);
            views.add(view2);
            views.add(view3);
            myPagerViewAdapter = new MyPagerViewAdapter(views, MainActivity.this);
            viewPager.setAdapter(myPagerViewAdapter);
        }
    }

实现起来想当简单，若有需要这里附上项目源码：
项目源码

作者：MRyan

本文采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
转载时请注明本文出处及文章链接。本文链接：https://www.wormholestack.com/archives/630/