在android中創建具有彎曲邊緣和圓角的視圖

我正在嘗試在 android 中制作一個自定義視圖，就像圖片中的曲線邊緣和圓角一樣。如何在下面的圖片鏈接中實作這一點？

https://i.stack.imgur.com/lPSJN.png

uj5u.com熱心網友回復：

不久前，我嘗試為這個（松鼠）形狀創建一個自定義視圖。雖然它不完整，但它會給你一個關于如何繪制這些形狀的基本概念。順便說一句，您需要禁用其父視圖的 clipChildren 以修復剪輯。

package com.certainlyaria.squircle

import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View


class SquircleView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private val paint = Paint().apply {
        color = Color.MAGENTA
        isAntiAlias = true
        style = Paint.Style.STROKE
        strokeJoin = Paint.Join.ROUND
        strokeWidth = 10f
    }

    companion object {
        private const val CURVE = 75f
    }

    private val clipPath = Path()

    private var smooth = Path()

    private val clipRect = RectF(
        CURVE, CURVE, 0f, 0f
    )

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

        clipRect.apply {
            right = w - CURVE
            bottom = h - CURVE
        }
        clipPath.apply {
            rewind()
            moveTo(0f, (width) / 2f)
            cubicTo(
                0f,
                0f,
                (width) / 4f,
                0f,
                (width) / 2f,
                0f
            )
            cubicTo(
                (width) * 3 / 4f,
                0f,
                width.toFloat(),
                0f,
                width.toFloat(),
                width / 2f
            )
            cubicTo(
                width.toFloat(),
                width.toFloat(),
                width * 3f / 4,
                width.toFloat(),
                (width) / 2f,
                width.toFloat()
            )
            cubicTo(
                width / 4f,
                width.toFloat(),
                0f,
                width.toFloat(),
                0f,
                (width) / 2f
            )
        }

        smooth = getSquirclePaath(0, 0, width / 2)
    }

    override fun onDraw(canvas: Canvas) {
        canvas.save()
        canvas.drawPath(clipPath, paint)
        //canvas.drawPath(smooth, paint)
        canvas.restore()
    }

    private fun getSquirclePaath(
        left: Int,
        top: Int,
        radius: Int
    ): Path { //Formula: (|x|)^3   (|y|)^3 = radius^3
        val radiusToPow = radius * radius * radius.toDouble()
        val path = Path()
        path.moveTo((-radius).toFloat(), 0f)
        for (x in -radius..radius) path.lineTo(
            x.toFloat(),
            Math.cbrt(radiusToPow - Math.abs(x * x * x)).toFloat()
        )
        for (x in radius downTo -radius) path.lineTo(
            x.toFloat(),
            (-Math.cbrt(radiusToPow - Math.abs(x * x * x))).toFloat()
        )
        path.close()
        val matrix = Matrix()
        matrix.postTranslate((left   radius).toFloat(), (top   radius).toFloat())
        path.transform(matrix)
        return path
    }
}

uj5u.com熱心網友回復：

1. 如果要創建視圖，最簡單的方法是將布局包裝在卡片視圖中，然后添加卡片角半徑。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <androidx.cardview.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@ id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@ id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </androidx.cardview.widget.CardView>
</LinearLayout>

參考：谷歌檔案

2. 如果您想創建一個像您提到的照片一樣的圖示.. 只需在任何插畫軟體中創建該影像，然后從 drawable>[右鍵單擊]> 影像資產覆寫您的 android 圖示

標籤：

上一篇：如何延遲在android中隱藏過渡影像

下一篇：Proguard正在縮小viewPager的位置