消息气泡自定义可绘制元素

huangapple go评论71阅读模式
英文:

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:

&lt;layer-list xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;

&lt;item&gt;

    &lt;rotate
        android:fromDegrees=&quot;55&quot;
        android:pivotX=&quot;100%&quot;
        android:pivotY=&quot;0%&quot;
        android:toDegrees=&quot;0&quot;&gt;
        &lt;shape android:shape=&quot;rectangle&quot;&gt;
            &lt;corners android:radius=&quot;10dp&quot; /&gt;
            &lt;solid android:color=&quot;#00A1E4&quot; /&gt;
        &lt;/shape&gt;
    &lt;/rotate&gt;
&lt;/item&gt;
&lt;item android:right=&quot;28dp&quot;&gt;
    &lt;shape android:shape=&quot;rectangle&quot;&gt;
        &lt;solid android:color=&quot;#00A1E4&quot; /&gt;
        &lt;corners android:radius=&quot;10dp&quot; /&gt;
    &lt;/shape&gt;
&lt;/item&gt;

</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:

    &lt;LinearLayout
        android:padding=&quot;8dp&quot;
        android:clipChildren=&quot;false&quot;
        android:clipToPadding=&quot;false&quot;
        ...&gt;

       &lt;com.google.android.material.card.MaterialCardView
          android:id=&quot;@+id/cardview&quot;
          android:layout_height=&quot;100dp&quot;
          app:cardCornerRadius=&quot;24dp&quot;
          app:cardBackgroundColor=&quot;@color/...&quot;/&gt;

    &lt;/LinearLayout&gt;

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.

huangapple
  • 本文由 发表于 2020年10月17日 14:37:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/64399682.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定