如何在单击按钮时实现带有一些图像的小弹出窗口 [英] How to implement a small popup with some images on a button click

问题描述

当用户单击三个蓝点按钮时，我想要这样的弹出窗口.如何在android中实现这种类型的弹出视图.有可用的库吗??

I want a popup like this when user click on the three blue dot button. how to achieve this type of popup view in android . any library is available .?

推荐答案

您可以使用此库来实现您的目标

you can use this library to achieve your goal look at this

• Android工具提示库1
• Android工具提示库2
• Android工具提示库3
• > Android工具提示库4

，如果要创建自定义内容，则不使用以下课程 创建一个这样的自定义类

and if you want create your custom than use following class create one custom class like this

public class TooltipWindow {

private static final int MSG_DISMISS_TOOLTIP = 100;
private Context ctx;
private PopupWindow tipWindow;
private View contentView;
private LayoutInflater inflater;

public TooltipWindow(Context ctx) {
    this.ctx = ctx;
    tipWindow = new PopupWindow(ctx);

    inflater = (LayoutInflater) ctx.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    contentView = inflater.inflate(R.layout.tooltip_layout, null);
}

void showToolTip(View anchor) {

    tipWindow.setHeight(LayoutParams.WRAP_CONTENT);
    tipWindow.setWidth(LayoutParams.WRAP_CONTENT);

    tipWindow.setOutsideTouchable(true);
    tipWindow.setTouchable(true);
    tipWindow.setFocusable(true);
    tipWindow.setBackgroundDrawable(new BitmapDrawable());

    tipWindow.setContentView(contentView);

    int screen_pos[] = new int[2];
    // Get location of anchor view on screen
    anchor.getLocationOnScreen(screen_pos);

    // Get rect for anchor view
    Rect anchor_rect = new Rect(screen_pos[0], screen_pos[1], screen_pos[0]
            + anchor.getWidth(), screen_pos[1] + anchor.getHeight());

    // Call view measure to calculate how big your view should be.
    contentView.measure(LayoutParams.WRAP_CONTENT,
            LayoutParams.WRAP_CONTENT);

    int contentViewHeight = contentView.getMeasuredHeight();
    int contentViewWidth = contentView.getMeasuredWidth();
    // In this case , i dont need much calculation for x and y position of
    // tooltip
    // For cases if anchor is near screen border, you need to take care of
    // direction as well
    // to show left, right, above or below of anchor view
    int position_x = anchor_rect.centerX() - (contentViewWidth / 2);
    int position_y = anchor_rect.bottom - (anchor_rect.height() / 2);

    tipWindow.showAtLocation(anchor, Gravity.NO_GRAVITY, position_x, position_y);

    // send message to handler to dismiss tipWindow after X milliseconds
    handler.sendEmptyMessageDelayed(MSG_DISMISS_TOOLTIP, 4000);
}

boolean isTooltipShown() {
    if (tipWindow != null && tipWindow.isShowing())
        return true;
    return false;
}

void dismissTooltip() {
    if (tipWindow != null && tipWindow.isShowing())
        tipWindow.dismiss();
}

Handler handler = new Handler() {
    public void handleMessage(android.os.Message msg) {
        switch (msg.what) {
            case MSG_DISMISS_TOOLTIP:
                if (tipWindow != null && tipWindow.isShowing())
                    tipWindow.dismiss();
                break;
        }
    }

    ;
};

}

现在，为此创建克里特岛的自定义布局，例如 tooltip_layout

now Crete your custom layout for this like tooltip_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical" >

<ImageView
    android:id="@+id/tooltip_nav_up"
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:layout_gravity="center"
    android:background="@drawable/nav_up" />

<TextView
    android:id="@+id/tooltip_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/tooltip_bg"
    android:gravity="center"
    android:padding="10dp"
    android:text="Tooltip using PopupWindow:)"
    android:textColor="@android:color/white"
    android:textSize="20dp"
    android:textStyle="bold" />
    </LinearLayout>

像这样创建一个可绘制文件nav_up

<?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="-50%"
        android:pivotY="80%"
        android:toDegrees="45" >
        <shape android:shape="rectangle" >
            <solid android:color="#000000" >
            </solid>

            <stroke
                android:width="2dp"
                android:color="#000000" />
        </shape>
    </rotate>
</item>

现在像这样使用此工具提示

TooltipWindow tipWindow = new TooltipWindow(MainActivity.this);
 @Override
public void onClick(View v) {
    if (!tipWindow.isTooltipShown())
        tipWindow.showToolTip(v);
}

如有任何疑问，请问我

这篇关于如何在单击按钮时实现带有一些图像的小弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！