Android自定义弧形ViewPager
程序员文章站
2022-06-15 23:30:23
先上效果图实现起来比较简单。实现思路自定义弧形View。如下所示。圆和屏幕相交的地方就是我们所需要的弧形,当然也可以使用贝塞尔曲线绘制。半径为测量布局宽度*2绘制过程如下: @Overrideprotected void onDraw(Canvas canvas) { canvas.drawCircle(mCustomWidth / 2, mCustomHeight ......
先上效果图
实现起来比较简单。
实现思路
自定义弧形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);
}
}
实现起来想当简单,若有需要这里附上项目源码:
项目源码
本文地址:https://blog.csdn.net/qq_35416214/article/details/104999711
上一篇: MySQL 参数相关概念及查询更改方法