如何在Android中创建曲线布局

如何解决如何在Android中创建曲线布局

如何创建布局或查看类似附件的图像， 可以用于ImageView，Slider等的形状。

解决方法

您可以使用类似的东西。

    <FrameLayout
        android:clipChildren="false"
        android:clipToPadding="false"
        ...>

        <ImageView/>

        <com.google.android.material.card.MaterialCardView
            android:id="@+id/card"
            android:layout_marginTop="xxdp"
            app:cardCornerRadius="48dp"
            app:cardBackgroundColor="@color/colorSecondaryLight"
            .../>

    </FrameLayout>

然后应用 ShapeAppearanceModel ：

    val cardView = findViewById<MaterialCardView>(R.id.card)

    cardView.shapeAppearanceModel = cardView.shapeAppearanceModel.toBuilder()
        .setTopLeftCorner(CustomCornerTreatment())
        .setBottomLeftCorner(CornerFamily.ROUNDED,0f)
        .setBottomRightCorner(CornerFamily.ROUNDED,0f)
        .build()

具有这样的自定义 CornerTreatment ：

class CustomCornerTreatment : CornerTreatment() {

    override fun getCornerPath(
        shapePath: ShapePath,angle: Float,interpolation: Float,radius: Float
    ) {

        val interpolatedRadius = radius * interpolation
        shapePath.reset(0f,-radius * interpolation,270f,270 -angle)
        shapePath.addArc(
            0f,-2*interpolatedRadius,2*interpolatedRadius,0f,180f,- angle)

    }
}

,

这可以通过多种方式完成。

1. 您将顶部的图像资产弯曲，然后将白色背景应用于父视图。
2. 您创建另一个曲面视图，并将其附加到顶部imageView。

---

为解决这个问题，我创建了这个png，您可以使用vector获得更好的效果。

在您的活动/片段XML中：

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">


<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/top_img"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:src="@color/green_action_bar"  <-- add your img here
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/guidelineCenter"/>


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guidelineCenter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.6" />


    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:src="@drawable/sample"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintTop_toBottomOf="@id/guidelineCenter" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

---

您的最终结果将是这样。用图片替换绿色

,

尝试此自定义视图

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.view.View

class CustomShape(context: Context,attrs: AttributeSet) : View(context,attrs) {

    private var color = Color.YELLOW
    private var size = 300f
    private var insideColor = Color.WHITE
    private var borderWidth = 2f
    private val mouthPath = Path()
    private val background = Color.TRANSPARENT


    private fun drawCurvedShape(canvas: Canvas) {

        val paint = Paint()
        paint.color = color
        paint.style = Paint.Style.FILL
        setBackgroundColor(background);

        // 1
        mouthPath.moveTo(0f,size)
        // 2
        mouthPath.quadTo(size * 0f,size * 0.5f,size,size * 0.5f)
        mouthPath.lineTo(canvas.width-size,size * 0.5f)
        mouthPath.quadTo(canvas.width - 0.1f,size * 0.45f,canvas.width * 1f,0f)
        mouthPath.lineTo(canvas.width * 1f,canvas.height * 1f)
        mouthPath.lineTo(0f,size)

        // 4
        paint.color = insideColor
        paint.strokeWidth = borderWidth
        paint.style = Paint.Style.FILL


        // 5
        canvas.drawPath(mouthPath,paint)
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        if(canvas != null)
            drawCurvedShape(canvas)
    }

}

XML布局

<?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/colorPrimary"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="0dp"
        android:layout_height="400dp"
        android:src="@drawable/bg"
        android:scaleType="centerCrop"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.sachithkn.customshape.view.CustomShape
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="300dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/imageView" />


</androidx.constraintlayout.widget.ConstraintLayout>

Full app S-Shape Layout(GitHub)