android - Android 可绘制工具提示箭头框
问题描述
我尝试使用以下代码创建一个弹出窗口,顶部带有类似工具提示的箭头。附图片。但结果我得到了一些不同的东西。
弹出式充气机:
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>
请帮我按照预期的图像创建一个盒子。
解决方案
这并不难,关键点是三个layer-list
Drawable
:
工具提示(三角形)必须是固定大小。
背景不能是固定大小,因为内容大小是未知的。
调整边距和内边距(在 内
Drawable
)。
1. 创建layer-list
Drawable
:
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item //background part
android:top="17dp"> //margin top, half of the 【rotated】 rectangle height
<shape
android:shape="rectangle">
<solid
android:color="@color/purple_200" />
<corners
android:radius="8dp" />
<padding //important part
android:top="17dp" /> //offset the margin top, shows up the tooltip perfectly
</shape>
</item>
<item //tooltip part
android:width="24dp" //size must be fixed
android:height="24dp"
android:end="32dp" //margin end (right)
android:gravity="end" //place wherever you want
android:top="-12dp"> //margin top, negative half of its height, display half of this rotated rectangle
<rotate
android:fromDegrees="45">
<shape
android:shape="rectangle">
<solid
android:color="@color/purple_500" /> //change back to background part color after your experiment and testing
</shape>
</rotate>
</item>
</layer-list>
2. 适用于View
:
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hi, I'm Sam"
android:textColor="@color/black"
android:textSize="40sp"
android:background="@drawable/chat_background" //here
android:paddingHorizontal="16dp"/> //apply padding bottom in Drawable, not in here
<TextView //just for comparison
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:text="Hi, I'm Sam"
android:textColor="@color/black"
android:textSize="40sp"
android:background="@color/purple_200"
android:paddingHorizontal="16dp"/>
结果:
小数学:
- 未旋转的矩形高度为
24dp
。 - 旋转矩形高度为
square root of (24^2)*2 = 33.9411
。 - 旋转矩形高度的一半是
16.9706
,所以我们取17
。
应用垂直填充的提示:
修改背景部分的填充顶部(例如:)
17dp + 8dp = 25dp
。修改工具提示(旋转矩形)部分的顶部边缘以抵消(例如:)
-12dp - 8dp = -20dp
。
推荐阅读
- python - 如何为此添加代理?
- c# - tls 1.2 与 .net 3.5 框架问题
- python - 从其他文件调用时,Tkinter 小部件不起作用
- django - 如何在一个 JSON 请求中发布多个对象?
- graph - 在绘制条形图时尝试更改数字格式
- docker - 如何使用 github 操作部署 tar.gz 格式的图像
- python - Python- KeyError:从数据帧过滤时为假
- kotlin - 如何将 Closeable 包装为流动?
- apache-dolphinscheduler - 如何将工具栏中的 datax 切换到 Addax 或工具栏新工具
- pyspark - 读取嵌套的 JSON 文件,其中 structType 列的值为 pyspark 中的字符串