android开发分享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="https://schemas.android.com/apk/res/android"     xmlns:app="https://schemas.android.com/apk/res-auto"     xmlns:tools="https://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);     } } 

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