英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论