英文:
Message Bubble Custom Drawable
问题
我将在下方分享一张图片,我想在原生安卓中开发类似于图片中的消息气泡。我已经在自定义可绘制的 XML 代码中编写了一些代码,请查看,我将分享它的外观图片,首先看一下代码:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="55"
android:pivotX="100%"
android:pivotY="0%"
android:toDegrees="0">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#00A1E4" />
</shape>
</rotate>
</item>
<item android:right="28dp">
<shape android:shape="rectangle">
<solid android:color="#00A1E4" />
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
上述代码效果如下图所示:
请帮我实现类似于第一张图片的效果。
谢谢
英文:
I will share the image below that I want to develop my message bubble in Native Android
I have written some code in Custom Drawable XML please have a look and I will share the image what it looks like, first see the code:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate
android:fromDegrees="55"
android:pivotX="100%"
android:pivotY="0%"
android:toDegrees="0">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#00A1E4" />
</shape>
</rotate>
</item>
<item android:right="28dp">
<shape android:shape="rectangle">
<solid android:color="#00A1E4" />
<corners android:radius="10dp" />
</shape>
</item>
</layer-list>
the above code looks like this
Please help me on how to make like the first image.
Thanks
答案1
得分: 1
你可以使用 ShapeAppearanceModel
来为小部件(例如 CardView
)应用自定义的 EdgeTreatment
:
<LinearLayout
android:padding="8dp"
android:clipChildren="false"
android:clipToPadding="false"
...>
<com.google.android.material.card.MaterialCardView
android:id="@+id/cardview"
android:layout_height="100dp"
app:cardCornerRadius="24dp"
app:cardBackgroundColor="@color/..."/>
</LinearLayout>
然后,你可以使用内置的 MarkerEdgeTreatment
应用自定义的 ShapeAppearanceModel
,它在给定圆的半径的边缘上绘制一个箭头,类似于以下内容:
val markerEdgeTreatment = MarkerEdgeTreatment(cardview.radius)
val offsetEdgeTreatment = OffsetEdgeTreatment(markerEdgeTreatment, 90f)
cardview.setShapeAppearanceModel(
cardview.getShapeAppearanceModel()
.toBuilder()
.setRightEdge(offsetEdgeTreatment)
.build()
)
你还可以通过扩展 EdgeTreatment
并覆盖 getEdgePath
方法来自定义边缘的形状。
注意: 这需要至少 1.2.0
版本的 Material Components 库。
英文:
You can use the ShapeAppearanceModel
to apply a custom EdgeTreatment
to a widget for eaxmple a CardView
:
<LinearLayout
android:padding="8dp"
android:clipChildren="false"
android:clipToPadding="false"
...>
<com.google.android.material.card.MaterialCardView
android:id="@+id/cardview"
android:layout_height="100dp"
app:cardCornerRadius="24dp"
app:cardBackgroundColor="@color/..."/>
</LinearLayout>
Then you can apply a custom ShapeAppearanceModel
using the builtin MarkerEdgeTreatment
that draws an arrow on the edge given the radius of a circle. Something like:
val markerEdgeTreatment = MarkerEdgeTreatment(cardview.radius)
val offsetEdgeTreatment = OffsetEdgeTreatment(markerEdgeTreatment, 90f)
cardview.setShapeAppearanceModel(
cardview.getShapeAppearanceModel()
.toBuilder()
.setRightEdge(offsetEdgeTreatment)
.build()
)
You can also customize the shape of the edge extending the EdgeTreatment
and overriding the getEdgePath
method.
Note: it requires at least the version 1.2.0
of the Material Components Library.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论