kotlin 在android中绘制带有倾斜角的布局

wribegjk  于 2023-04-21  发布在  Kotlin
关注(0)|答案(2)|浏览(180)

我需要绘制在我的布局歪斜的角落,基本上我的布局高度是60dp,我试图做他们使用层列表的xml文件,但它不是给所需的特别是当设备在屏幕上变得更大,我想得到一些帮助或如果可能的话,以编程方式绘制这些歪斜的角落,使他们固定到所有屏幕,当屏幕也旋转,谢谢

  • 这是我的xml文件
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/bgColor" />
    
    <item android:top="-20dp"
        android:bottom="-50dp"
        android:left="-20dp"
        android:right="400dp">
        <rotate
            android:fromDegrees="368"
            android:pivotX="50%"
            android:pivotY="00%">
            <shape
                android:shape="rectangle">
                <solid android:color="#DFDBDB"/>
            </shape>
        </rotate>
    </item>
    <item android:top="-20dp"
        android:bottom="-50dp"
        android:left="395dp"
        android:right="-120dp">
        <rotate
            android:fromDegrees="-371"
            android:pivotX="50%"
            android:pivotY="00%">
            <shape
                android:shape="rectangle">
                <solid
                    android:color="?android:colorBackground"/>
            </shape>
        </rotate>
    </item>
</layer-list>
  • 预期结果

lsmd5eda

lsmd5eda1#

计算连接Path()的点的坐标是你工作中最重要的事情。我的计算是基于View的宽度。希望能对你有所帮助。

class SkewedCornerView(context: Context, attrs: AttributeSet?) : View(context, ttrs) {

    private val path = Path()
    val paint = Paint().apply {
        flags = Paint.ANTI_ALIAS_FLAG
        color = Color.WHITE
        style = Paint.Style.STROKE
    }

    override fun onDraw(canvas: Canvas?) {
//        super.onDraw(canvas)
        val padding = height/50f
        paint.strokeWidth = padding
        canvas?.drawColor(Color.BLACK)
        canvas?.apply {
            path.reset()
            val cornerSize = width / 15f
            val width = width.toFloat()
            val height = height.toFloat()
//            path.moveTo(padding, height-padding)
            path.moveTo(padding, height/2)
            path.lineTo(cornerSize, padding)
            path.lineTo(width - cornerSize-padding, padding)
            path.lineTo(width-padding, height/2)
//            path.lineTo(width-padding, height-padding)
//            path.lineTo(padding, height-padding)
//            path.close()
            drawPath(path, paint)
        }
    }
}
ccrfmcuu

ccrfmcuu2#

要以编程方式绘制斜角,可以创建扩展View或其子类之一(如RelativeLayout或FrameLayout)的自定义视图。在自定义视图的onDraw方法中,可以使用Path对象定义视图的形状,然后使用颜色或可绘制对象填充它。
这里有一个例子,你可以如何创建一个自定义视图与歪斜的角落

class SkewedCornerView(context: Context, attrs: AttributeSet?) : View(context, attrs) {

private val path = Path()

override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)
    canvas?.apply {
        path.reset()
        val cornerSize = resources.getDimensionPixelSize(R.dimen.corner_size).toFloat()
        val width = width.toFloat()
        val height = height.toFloat()
        path.moveTo(0f, 0f)
        path.lineTo(0f, height - cornerSize)
        path.lineTo(cornerSize, height)
        path.lineTo(width, height)
        path.lineTo(width, 0f)
        path.close()
        val paint = Paint().apply {
            color = Color.WHITE
            style = Paint.Style.FILL
        }
        drawPath(path, paint)
    }
}
}

在本例中,path对象用于定义视图的形状。cornerSize变量用于指定倾斜角的大小,可以在资源中将其定义为维度值。每次需要重绘视图时(例如,当屏幕旋转或视图的维度更改时),都会调用onDraw方法。
您可以使用XML或编程方式将此自定义视图添加到布局中。以下是如何将其添加到ConstraintLayout的示例:

<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="60dp">
<com.example.app.SkewedCornerView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/bgColor"/>
</androidx.constraintlayout.widget.ConstraintLayout>

在本例中,SkewedCornerView作为ConstraintLayout的子视图添加,并填充其父视图的维。background属性用于指定视图的背景颜色,在本例中为bgColor。

相关问题