问题描述
如何创建布局或查看类似附件的图像, 可以用于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)
}
}
,
这可以通过多种方式完成。
- 您将顶部的图像资产弯曲,然后将白色背景应用于父视图。
- 您创建另一个曲面视图,并将其附加到顶部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>