Android 可绘制工具提示箭头框 [英] Android drawable tooltip arrow box

问题描述

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

LayoutInflater inflater = (LayoutInflater)getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);查看视图 = 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);

弹出式布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android";android:layout_width=match_parent"android:layout_height=wrap_content"><线性布局android:layout_width=match_parent"android:layout_height="wrap_content";android:padding="50dp"android:layout_marginTop=50dp"android:background="@drawable/shadow_recta";机器人:方向=垂直"机器人:重力=中心"><文本视图android:layout_width=match_parent"android:layout_height="wrap_content";android:layout_marginTop=20dp"android:text="文本长文本"/><按钮android:layout_width=match_parent"android:layout_height="wrap_content";android:text="按钮"/></LinearLayout>

可绘制文件:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:gravity="top|center_horizo​​ntal";><rotate android:fromDegrees="0";android:toDegrees="-45";android:pivotX=0%"android:pivotY=50%"><shape android:shape=矩形"><size android:width="24dp";机器人:高度=24dp"/><stroke android:color="@android:color/holo_blue_bright"机器人:宽度=1dp"/></形状></旋转></项目><项目><shape android:shape=矩形"><size android:width="206dp";机器人:高度=76dp"/><solid android:color="@android:color/white"/><stroke android:color="@android:color/holo_blue_bright"机器人:宽度=1dp"/><corners android:radius="2dp";/></形状></项目><item android:gravity="top|center_horizo​​ntal"><旋转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=矩形"><solid android:color="@android:color/white";/><尺寸android:width="24dp"机器人:高度=24dp"/><中风机器人:宽度=1dp"android:color=@android:color/holo_blue_bright"/></形状></旋转></项目></层列表>

预期图像:

我得到的输出:

请帮助我按照预期的图像创建一个框.

解决方案

其实没那么难，关键是三个，让这个layer-list Drawable:>

• 工具提示(三角形)必须是固定大小.

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

• 调整边距和内边距(在 Drawable 内).

---

1.创建layer-list Drawable:

<item//背景部分android:top="17dp">//margin top，【旋转】矩形高度的一半<形状机器人:形状=矩形"><固体android:color="@color/purple_200";/><角落机器人:半径=8dp"/><padding//重要的部分android:top="17dp"/>//偏移顶部边距，完美显示工具提示</形状></项目><item//工具提示部分android:width="24dp"//大小必须固定机器人:高度=24dp"android:end="32dp"//边距结束(右)机器人:重力=结束"；//放置任何你想要的地方android:top="-12dp">//margin top，负一半高度，显示这个旋转矩形的一半<旋转android:fromDegrees="45"><形状机器人:形状=矩形"><固体android:color="@color/purple_500";/>//在您的实验和测试后改回背景部分颜色</形状></旋转></项目></层列表>

2.应用于View:

//在Drawable中应用填充底部，而不是在这里<TextView//只是为了比较android:layout_width="wrap_content";android:layout_height="wrap_content";android:layout_marginTop=16dp"android:text=我是山姆"android:textColor="@color/black";android:textSize="40sp";android:background="@color/purple_200";android:paddingHorizo​​ntal="16dp"/>

结果:

---

小数学:

• 未旋转的矩形高度为 24dp.
• 旋转矩形高度为(24^2)*2 = 33.9411的平方根.
• 旋转矩形高度的一半是16.9706，所以我们取17.

---

应用垂直填充的提示:

• 修改背景部分的填充顶部(例如:17dp + 8dp = 25dp).

• 修改工具提示(旋转矩形)部分的顶部边距以抵消(例如:-12dp - 8dp = -20dp).

I tried the below code to create a popup window with a tooltip-like arrow on top. picture attached. But I am getting something different as a result.
popup inflater :

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);

popup layout :

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

drawable file :

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

Expected image :

Output i am getting :

Please help me to create a box as in the expected image.

解决方案

It's not that difficult, key points are three to make this layer-list Drawable:

• The tooltip (triangle) must be fixed size.

• The background must NOT be fixed size, since the content size is unknown.

• Adjust the margin and padding (inside the Drawable).

---

1. Create the 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. Apply to 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"/>

Result:

---

Little Math:

• Un-rotated rectangle height is 24dp.
• Rotated rectangle height is square root of (24^2)*2 = 33.9411.
• Half of the Rotated rectangle height is 16.9706, so we take 17.

---

Tips For applying vertical padding:

• Modify the padding top of Background part (ex: 17dp + 8dp = 25dp).

• Modify the margin top of Tooltip (rotated rectangle) part to cancel out (ex: -12dp - 8dp = -20dp).

这篇关于Android 可绘制工具提示箭头框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！