绘制带边框的工具提示

Question

我正在尝试实现像这样的带边框的工具提示（不完全是，只是我想要平滑边框的部分）：

到目前为止，这是我尝试过的：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:gravity="top|right">

        <rotate android:fromDegrees="45" android:toDegrees="0"
            android:pivotX="50%" android:pivotY="0%" >
            <shape android:shape="rectangle">
                <size android:width="24dp" android:height="24dp" />
                <stroke android:color="@android:color/holo_blue_bright" android:width="1dp"/>
            </shape>
        </rotate>
    </item>
    <item>
        <shape android:shape="rectangle">
            <size android:width="206dp" android:height="76dp" />
            <solid android:color="@color/white"/>
            <stroke android:color="@android:color/holo_blue_bright"  android:width="1dp"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item android:gravity="top|right">
        <rotate android:fromDegrees="45" android:toDegrees="0"
            android:pivotX="50%" android:pivotY="0%" >
            <shape android:shape="rectangle">
                <size android:width="24dp" android:height="24dp" />
                <solid android:color="@color/white"/>
            </shape>

        </rotate>
    </item>

</layer-list>

这是我的输出：

Answer 1

我得到了一些东西，虽然它并不完美。这是输出：

请注意边缘不是很光滑。这是修改后的代码：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="top|right" android:right="10dp">
        <rotate android:fromDegrees="45" android:toDegrees="0"
            android:pivotX="50%" android:pivotY="0%" >
            <shape android:shape="rectangle">
                <size android:width="24dp" android:height="24dp" />
                <stroke android:color="@android:color/holo_blue_bright" android:width="1dp"/>
            </shape>
        </rotate>
    </item>
    <item>
        <shape android:shape="rectangle">
            <size android:width="206dp" android:height="76dp" />
            <solid android:color="@color/white"/>
            <stroke android:color="@android:color/holo_blue_bright"  android:width="1dp"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item android:gravity="top|right" android:right="10dp" android:top="1dp">
        <rotate android:fromDegrees="45" android:toDegrees="0"
            android:pivotX="50%" android:pivotY="0%" >
            <shape android:shape="rectangle">
                <size android:width="24dp" android:height="24dp" />
                <solid android:color="@color/white"/>
            </shape>

        </rotate>
    </item>

</layer-list>

Answer 2

你应该只使用 9-patch。在 Android Studio 上，选择 "create 9-patch file" :

然后，在左侧和顶部标记您想要复制的部分，larger/smaller您就拥有了图像。

并为您希望包含内容的部分在右侧和底部进行标记。

在很多情况下，这些是相同的区域。但就你的情况而言，我认为不会是这样。

我还建议使图像尽可能小，这样它就可以达到您允许的最小尺寸。这会节省一点 space.

您可以在文档中阅读更多相关信息：

绘制带边框的工具提示

Drawing a tooltip with a border

android

android-xml

android-drawable