【问题标题】:Message Bubble Custom Drawable消息气泡自定义可绘制对象
【发布时间】:2021-01-31 14:19:46
【问题描述】:

我将在下面分享我想在 Native Android 中开发我的消息气泡的图片

我已经在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>

上面的代码看起来像这样

请帮助我如何制作第一张图片。

谢谢

【问题讨论】:

    标签: java android material-components-android android-shapedrawable


    【解决方案1】:

    您可以使用ShapeAppearanceModel 将自定义EdgeTreatment 应用于例如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>
    

    然后您可以使用内置的 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版本。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-12-19
      • 2021-05-26
      • 1970-01-01
      • 2021-05-19
      • 1970-01-01
      • 1970-01-01
      • 2011-12-08
      相关资源
      最近更新 更多