Andoid鬼點子-近期專案總結（1）-圓弧背景

好久沒有更新啦！最近要來一波更新啦！
之前在忙的專案告一段落，這裡總結一下。

圓形的背景，就像這樣：

我的思路是在RelativeLayout的底部，畫一個白色的“凹”弧。上面紅色部分就是正常的RelativeLayout的背景，我這裡使用的背景色，你也可以使用背景圖片，drawable啥的。其他和普通的RelativeLayout的用法一樣，可以在裡面隨意的佈局。

看到畫弧線，就知道肯定要用到貝賽爾曲線啦！
我選了5個點，組成了一個Path，然後使用白色的畫筆進行了填充。

下面是程式碼，大約30行，稍縱即逝……

package com.greendami.widget

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.widget.RelativeLayout

class PPRoundLayout(context: Context?, attrs: AttributeSet? = null) : RelativeLayout(context, attrs) {

    override fun dispatchDraw(canvas: Canvas) {
        val mPath = Path()
        mPath.moveTo(0f, height.toFloat())
        mPath.lineTo(width.toFloat(), height.toFloat())
        mPath.lineTo(width.toFloat(), height * 0.6f)
        //繪製貝塞爾曲線
        mPath.quadTo(width / 2f, height.toFloat(), 0f, height * 0.6f)
        mPath.lineTo(0f, height.toFloat())
        mPath.close()


        val paint = Paint()
        paint.isAntiAlias = true
        paint.color = Color.WHITE
        val saveCount = canvas.saveLayer(0f, 0f, width.toFloat(), height.toFloat(), null, Canvas.ALL_SAVE_FLAG)
        canvas.drawPath(mPath, paint)
        canvas.restoreToCount(saveCount)

        super.dispatchDraw(canvas)
    }
}複製程式碼

雖然程式碼很短，但是我還是想說說為什麼這樣做。
我嘗試過剪裁出一個底部是圓弧的View，然後使用這個View當背景。但是效果不好，圓弧有明顯的鋸齒。
我想直接畫一個弧的部分:就像藍色框框裡面的部分：

但是我需要有控制元件的位置會侵入到這個圓弧的裡面。所以這個方式也不適合。

Andoid鬼點子-近期專案總結（1）-圓弧背景

相關文章