弧形ViewPager

最新推荐文章于 2024-04-28 11:34:00 发布

csc_1024

最新推荐文章于 2024-04-28 11:34:00 发布

阅读量949

点赞数 1

分类专栏： IT 文章标签：弧形Banner 弧形ViewPager 广告轮播图

本文链接：https://blog.csdn.net/csclmf/article/details/80689446

版权

本文介绍如何创建弧形的ViewPager，用于制作具有新鲜感的电商平台Banner。通过布局设置和效果展示，详解弧形Banner的实现过程。

摘要由CSDN通过智能技术生成

我们常在电商平台看到的Banner是弧形的，这是怎么实现的呢？其实实现非常的简单，请接着往下看。老规矩，先上效果图:

是不是这样的Banner很有新鲜感呢？

/**
 * Created by csc on 2018/6/13.
 * information：有弧度ImageView(注意使用的时候需要灵活使用,主要的是适当的修改一下偏移量offset即可满足需求)
 */
class ArcImageView(context: Context) : AppCompatImageView(context){

    lateinit var mPaint: Paint
    lateinit var mPath: Path

    lateinit var mContext: Context

    //控件的宽
    var mWidth:Float=0F
    //控件的高
    var mHeight:Float=0F

    //偏移量(注意在程序中需要适当的修改一下偏移量才能满足你的需求)
    var offset:Float=80F

    constructor(context: Context,attrs: AttributeSet): this(context) {
        mContext=context

    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)

        mWidth=w.toFloat()
        mHeight=h.toFloat()

        mPath = Path()
        mPaint = Paint(Paint.ANTI_ALIAS_FLAG)
        //设置弧形下部分需要填充的颜色
        mPaint.color = Color.WHITE
        mPaint.style = Paint.Style.FILL_AND_STROKE

    }



    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        //控制着幅度的高度(这个主要控制弧形的高度,如果想要幅度大一点，就把这个值修改大一些即可)
        var h:Float=(mHeight/8)*7

        mPath.moveTo(0F,h)

        /***
         * 二阶贝塞尔曲线
         *