Question

在此图片中，布局的底部边框上有一个三角形边框。我已经制作了边框，但我没有得到如何在边框中制作三角形标记。请检查我正在分享的代码。

enter code here
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">

<stroke android:width="0.5dp" android:color="@color/light_grey" />
<gradient android:startColor="@color/white" android:endColor="@color/white"
    />

<corners android:radius="5dp" />

</shape>

这是我的代码，请检查。

Answer 1

正如Bob Malooga所说，你可以在整个“气泡”布局中使用9个补丁图像，或者你可以绘制自己的“气泡”。

如果您不想使用9补丁图像，那么您可以实现您的布局，如下所述。

Triangel Drawable布局：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="-45"
            android:pivotX="0%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <solid android:color="@color/white" />
            </shape>
        </rotate>
    </item>
</layer-list>

叠加片段布局（我使用了“气泡”背景作为TextViews背景）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="33dp"
            android:background="@drawable/your_bubble_bg"
            android:padding="16dp"
            android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
            android:textColor="@android:color/black" />

        <View
            android:layout_width="48dp"
            android:layout_height="34dp"
            android:layout_gravity="bottom|right"
            android:layout_marginRight="32dp"
            android:background="@drawable/triangle" />
    </FrameLayout>

</LinearLayout>

结果：

您还可以将三角形形状更改为自定义三角形drawable，并将其用作imageViews“src”。

之后您的布局代码将是：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="33dp"
            android:background="@drawable/triangle_b"
            android:padding="16dp"
            android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
            android:textColor="@android:color/black" />

        <ImageView
            android:layout_width="48dp"
            android:layout_height="34dp"
            android:layout_gravity="bottom|right"
            android:layout_marginRight="32dp"
            android:src="@drawable/your_custom_triangle_drawable" />
    </FrameLayout>

</LinearLayout>

或者你只能用一个抽奖来实现它！

背景布局（merged_bubble_bg）：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:bottom="33dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">

            <stroke
                android:width="0.5dp"
                android:color="@color/grey_light" />
            <gradient
                android:endColor="@color/white"
                android:startColor="@color/white" />

            <corners android:radius="5dp" />

        </shape>

    </item>
    <item
        android:width="48dp"
        android:height="34dp"
        android:gravity="bottom|right"
        android:right="32dp">
        <rotate
            android:fromDegrees="-45"
            android:pivotX="0%"
            android:pivotY="0%"
            android:toDegrees="0">
            <shape android:shape="rectangle">
                <solid android:color="@color/white" />
            </shape>
        </rotate>
    </item>
</layer-list>

以上使用的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="33dp"
        android:background="@drawable/merged_bubble_bg"
        android:paddingBottom="40dp"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:paddingTop="16dp"
        android:text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
        android:textColor="@android:color/black" />

</LinearLayout>

我想制作如下图所示的布局边框

1 个答案: