欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义弧形ViewPager

程序员文章站 2022-06-15 23:30:23
先上效果图实现起来比较简单。实现思路自定义弧形View。如下所示。圆和屏幕相交的地方就是我们所需要的弧形,当然也可以使用贝塞尔曲线绘制。半径为测量布局宽度*2绘制过程如下: @Overrideprotected void onDraw(Canvas canvas) { canvas.drawCircle(mCustomWidth / 2, mCustomHeight ......

先上效果图

Android自定义弧形ViewPager

实现起来比较简单。

实现思路

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

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

半径为测量布局宽度*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);
    }
}

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

本文地址:https://blog.csdn.net/qq_35416214/article/details/104999711