Android 可绘制工具提示箭头框

Question

我尝试使用下面的代码创建一个弹出窗口，顶部有一个类似工具提示的箭头。附图片。但结果我得到了不同的东西。
弹出式充气机：

LayoutInflater inflater = (LayoutInflater)
                        getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
              View  view = inflater.inflate(R.layout.popup, null);
              mypopupWindow = new PopupWindow(view,500, RelativeLayout.LayoutParams.WRAP_CONTENT, true);            
              mypopupWindow.setBackgroundDrawable(new ColorDrawable(Color.WHITE));
              mypopupWindow.showAsDropDown(v,-153,0);

弹出布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="50dp"
        android:layout_marginTop="50dp"
        android:background="@drawable/shadow_recta"
        android:orientation="vertical"
        android:gravity="center">
     <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="text long text" />
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Button"/>
</LinearLayout>

可绘制文件：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="top|center_horizontal" >
        <rotate android:fromDegrees="0" android:toDegrees="-45"
            android:pivotX="0%" android:pivotY="50%" >
            <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="@android:color/white" />
            <stroke android:color="@android:color/holo_blue_bright"  android:width="1dp"/>
            <corners android:radius="2dp" />
        </shape>
    </item>

    <item android:gravity="top|center_horizontal">
        <rotate
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fromDegrees="-45"
            android:pivotX="-50%"
            android:pivotY="60%"
            android:toDegrees="35">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/white" />
                <size
                    android:width="24dp"
                    android:height="24dp" />
                <stroke
                    android:width="1dp"
                    android:color="@android:color/holo_blue_bright" />
            </shape>
        </rotate>
    </item>
</layer-list>

预期图像：

我得到的输出：

请帮我创建一个如预期图像所示的盒子。

Answer 1

这并不难，关键是三个layer-list Drawable：

\n

\n

• 工具提示（三角形）必须是固定大小的。

  \n
\n

• 背景不得是固定大小，因为内容大小未知。

  \n
\n

• 调整边距和填充（在 内Drawable）。

  \n
\n

\n\n

1. 创建layer-list Drawable：

\n

<layer-list\n    xmlns:android="http://schemas.android.com/apk/res/android">\n\n    <item                      //background part\n        android:top="17dp">    //margin top, half of the \xe3\x80\x90rotated\xe3\x80\x91 rectangle height\n\n        <shape\n            android:shape="rectangle">\n\n            <solid \n                android:color="@color/purple_200" />\n\n            <corners \n                android:radius="8dp" />\n\n            <padding                    //important part\n                android:top="17dp" />   //offset the margin top, shows up the tooltip perfectly\n\n        </shape>\n\n    </item>\n\n    <item                       //tooltip part\n        android:width="24dp"    //size must be fixed\n        android:height="24dp"\n        android:end="32dp"     //margin end (right)\n        android:gravity="end"  //place wherever you want \n        android:top="-12dp">   //margin top, negative half of its height, display half of this rotated rectangle\n\n        <rotate \n            android:fromDegrees="45">\n\n            <shape \n                android:shape="rectangle">\n\n                <solid \n                    android:color="@color/purple_500" />    //change back to background part color after your experiment and testing\n\n            </shape>\n\n        </rotate>\n\n    </item>\n\n</layer-list>\n

\n

2. 申请View：

\n

<TextView\n    android:layout_width="wrap_content"\n    android:layout_height="wrap_content"\n    android:text="Hi, I\'m Sam"\n    android:textColor="@color/black"\n    android:textSize="40sp"\n    android:background="@drawable/chat_background"    //here\n    android:paddingHorizontal="16dp"/>                //apply padding bottom in Drawable, not in here\n\n<TextView                                             //just for comparison\n    android:layout_width="wrap_content"\n    android:layout_height="wrap_content"\n    android:layout_marginTop="16dp"\n    android:text="Hi, I\'m Sam"\n    android:textColor="@color/black"\n    android:textSize="40sp"\n    android:background="@color/purple_200"\n    android:paddingHorizontal="16dp"/>\n

\n

结果：

\n

\n\n

小数学：

\n

\n
• 未旋转的矩形高度为24dp。
\n
• 旋转后的矩形高度为square root of (24^2)*2 = 33.9411。
\n
• 旋转矩形高度的一半是16.9706，所以我们取17。
\n

\n\n

应用垂直填充的提示：

\n

\n

• 修改背景部分的顶部填充（例如：17dp + 8dp = 25dp）。

  \n
\n

• 修改工具提示（旋转矩形）部分的边距顶部以取消（例如：-12dp - 8dp = -20dp）。

  \n
\n

\n

Answer 2

这是您的需求：

• 笔画风格
• 仅显示箭头顶部部分

1.将我的示例答案从纯色样式更改为描边样式：

• 适用于背景部分和工具提示部分。

  <stroke
      android:color="@color/purple_200"
      android:width="2dp"/>    //border thickness, keep this in mind
  
  <solid
      android:color="@color/white" />    //white background color, must have
  

• 现在您注意到旋转矩形的下半部分也显示出来了，如何隐藏它？嗯，我们的想法是做一些东西来覆盖/覆盖它——但不是完全覆盖。我们还需要一层。

2. 复制工具提示部分，使其成为第三层，我们只需将其向下移动 的距离border width + 1dp = 3dp，并给它一个纯白色的背景色：

<item
    android:width="24dp"
    android:height="24dp"
    android:end="32dp"
    android:gravity="end"
    android:top="-9dp">    //here, -12 + 3 = -9

    <rotate
        android:fromDegrees="45">

        <shape
            android:shape="rectangle">

            <solid
                android:color="@color/purple_500" />    //change back to white after your testing

        </shape>

    </rotate>

</item>

结果：