android - 我想使布局边框如下图所示

Question

<分区>

Answer 1

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

如果您不想使用 9 补丁图像，那么您可以实现我在下面提到的布局。

三角形可绘制布局:

<?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>

Overlay Fragment 布局(我使用你的“气泡”背景作为 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>

结果:

您还可以将三角形更改为自定义三角形可绘制对象并将其用作 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>

或者你可以只用一个 drawable 来实现它!

背景布局(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>