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);
    }
}

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