Android 通用带箭头提示窗

已于 2023-07-26 17:34:40 修改
阅读量1.3k 收藏 3
点赞数 1
文章标签： android
于 2023-07-26 17:32:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liuyu0915/article/details/131770472
版权

简介

自定义PopupWindow, 适用于提示类弹窗。

使用自定义Drawable设置带箭头的背景，测试控件和弹窗的尺寸，自动设置弹窗的显示位置，让箭头指向锚点控件的中间位置，且根据锚点控件在屏幕的位置，自动适配弹窗显示位置。 

适用于描述、解释弹窗。

一、效果

带箭头弹窗显示在控件的左侧，箭头相对控件居中对齐 ，且与控件左边框挨着

 示例代码如下：

二、使用

        GuZhiExplainPupopWindow window = new GuZhiExplainPupopWindow(this);
        //设置弹窗显示文案
        window.setTips("1234567890-34567890-【qweqwertyuiop[sdfghjkl;zxcvbnm,.我们一起走向富强");
        //获取窗口的背景drawable对象
        ArrowsDrawable ad = window.getArrowsDrawable();
        //设置drawable箭头的大小
        ad.setArrowsHeight(ConvertUtils.dp2px(8));
        //设置drawable中箭头与边框距离
        ad.setArrowsPadding(ConvertUtils.dp2px(10));
        //设置drawable的padding, 实际是设置显示文案的TextView的padding
        //ad.setPadding(ConvertUtils.dp2px(10));
        window.setPadding(ConvertUtils.dp2px(10));
        //设置drawable背景色
        ad.setColor(Color.DKGRAY);
        findViewById(R.id.tv33).setOnClickListener(view -> {
            if (!window.isShowing()) {
                //设置窗口显示位置（AUTO_HORIZONTAL 是水平位置，在控件的左侧或右侧，根据控件中心在屏幕中的位置决定）
                window.setShowPosition(GuZhiExplainPupopWindow.AUTO_HORIZONTAL);
                //显示弹窗，偏移量是0，默认是箭头在控件居中位置
                window.show(view, 0, 0);
            }
        });

三、自定义布局

重写initView方法，并设置TipsTv， 同时需要注意的是，在设置弹窗布局时，根布局的宽高属性是wrap_content，设置其它是不生效的，如果需要指定textView的宽或高，或弹窗尺寸，根布局使用某ViewGroup控件，再设置其子控件的尺寸。

        GuZhiExplainPupopWindow window = new GuZhiExplainPupopWindow(this, R.layout.pupopwindow_view_guzhi_explain) {
            @Override
            public void initView(View contentView) {
                //自定义布局初始化控件
                super.initView(contentView);
                TextView customTv = contentView.findViewById(R.id.explain_tv);
                setTipsTv(customTv);
            }
        };

四、源码

package com.ttkx.deviceinfo.bkchart.popupwindow;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Color;
import android.graphics.Point;
import android.graphics.Rect;
import android.graphics.drawable.ColorDrawable;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.PopupWindow;
import android.widget.TextView;

import com.blankj.utilcode.util.ConvertUtils;
import com.blankj.utilcode.util.Utils;
import com.ttkx.deviceinfo.R;
import com.ttkx.deviceinfo.bkchart.ArrowsDrawable;
import com.ttkx.deviceinfo.bkchart.GuZhiActivity;

import java.lang.annotation.Retention;
import java.lang.annotation.RetentionPolicy;

import androidx.annotation.IntDef;
import androidx.core.widget.PopupWindowCompat;

/**
 * 估值说明弹窗
 * Created by liuyu
 */
public class SimpleTipsPupopWindow extends PopupWindow {

    private ArrowsDrawable mBgDrawable;
    private TextView mTipsTv;
    private int mShowPosition = TOP;
    public static final int AUTO_VERTICAL = Gravity.CENTER_VERTICAL;
    public static final int AUTO_HORIZONTAL = Gravity.CENTER_HORIZONTAL;
    public static final int LEFT = Gravity.LEFT;
    public static final int TOP = Gravity.TOP;
    public static final int RIGHT = Gravity.RIGHT;
    public static final int BOTTOM = Gravity.BOTTOM;

    public SimpleTipsPupopWindow(GuZhiActivity context) {
        this(context, View.inflate(context, R.layout.pupopwindow_view_guzhi_explain, null));
    }

    public SimpleTipsPupopWindow(GuZhiActivity context, int layoutId) {
        this(context, View.inflate(context, layoutId, null));
    }

    public SimpleTipsPupopWindow(GuZhiActivity context, View contentView) {
        super(context);
        setContentView(contentView);
        setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        setOutsideTouchable(true);
        init(contentView);
    }

    private void init(View contentView) {
        mBgDrawable = new ArrowsDrawable(ArrowsDrawable.TOP, ConvertUtils.dp2px(5));
        mBgDrawable.setCornerRadius(ConvertUtils.dp2px(4));
        mBgDrawable.setArrowsPadding(ConvertUtils.dp2px(10));
        mBgDrawable.setArrowsHeight(ConvertUtils.dp2px(5));
        boolean redMode = true;
        mBgDrawable.setColor(Color.parseColor(redMode ? "#e6292F3C" : "#f22b3346"));
//        mBgDrawable.setPadding(ConvertUtils.dp2px(10));
        mTipsTv = contentView.findViewById(R.id.explain_tv);
        initView(contentView);
    }

    /**
     * 用于自定义布局 初始化
     * @param contentView
     */
    public void initView(View contentView) {
    }

    /**
     * 设置tips TextView
     * @param tv
     */
    public void setTipsTv(TextView tv) {
        mTipsTv = tv;
    }

    private int makeDropDownMeasureSpec(int measureSpec) {
        int mode;
        if (measureSpec == ViewGroup.LayoutParams.WRAP_CONTENT) {
            mode = View.MeasureSpec.UNSPECIFIED;
        } else {
            mode = View.MeasureSpec.EXACTLY;
        }
        return View.MeasureSpec.makeMeasureSpec(View.MeasureSpec.getSize(measureSpec), mode);
    }

    public void setTips(String tips) {
        if (mTipsTv != null) {
            mTipsTv.setText(tips);
        }
    }

    public void show(View anchor, int os, int oy) {
        if (mBgDrawable == null) {
            return;
        }
        int showPosition = mShowPosition;


        int offsetX = 0;


        int offsetY = 0;
        int locationX = getLocationOnScreen(anchor)[0];
        int locationY = getLocationOnScreen(anchor)[1];

        if (showPosition == LEFT || showPosition == RIGHT || showPosition == AUTO_HORIZONTAL) {
            mBgDrawable.setArrowsPosition(ArrowsDrawable.LEFT, mTipsTv);
            getContentView().measure(makeDropDownMeasureSpec(getWidth()), makeDropDownMeasureSpec(getHeight()));
            int windowWidth = this.getContentView().getMeasuredWidth();
            os += anchor.getWidth();
            offsetY = (int) -(anchor.getHeight() / 2 + mBgDrawable.getArrowsCenterDistance());
            if (showPosition == LEFT) {
                boolean showLeft = locationX >= windowWidth;
                offsetX = disHor(showLeft, windowWidth, anchor, os);
            } else if (showPosition == RIGHT) {
                boolean showLeft = !(getAppScreenWidth() - (locationX + anchor.getWidth()) > windowWidth);
                offsetX = disHor(showLeft, windowWidth, anchor, os);
            } else if (showPosition == AUTO_HORIZONTAL) {
                int screenWidth = getAppScreenWidth();
                boolean showLeft = locationX + anchor.getWidth() / 2 >= screenWidth / 2;
                offsetX = disHor(showLeft, windowWidth, anchor, os);
            }
        } else {
            mBgDrawable.setArrowsPosition(ArrowsDrawable.TOP, mTipsTv);//先设置箭头drawable方向为垂直方向的，因箭头尺寸会影响到计算窗口的高度
            getContentView().measure(makeDropDownMeasureSpec(getWidth()), makeDropDownMeasureSpec(getHeight()));
            int windowHeight = this.getContentView().getMeasuredHeight();
            os += anchor.getWidth() / 2;
            offsetX = (int) (os - mBgDrawable.getArrowsCenterDistance());
            if (showPosition == TOP) {
                int distanceTop = locationY - getStatusBarHeight();//锚点控件距离顶部距离
                //计算锚点控件在屏幕中的位置
                offsetY = disVer(distanceTop >= windowHeight, windowHeight, anchor, oy);
            } else if (showPosition == BOTTOM) {
                int distanceBottom = getLocationOnScreen(anchor)[1] - anchor.getHeight() - getNavBarHeight();//锚点控件距离底部距离
                offsetY = disVer(distanceBottom < windowHeight, windowHeight, anchor, oy);
            } else if (showPosition == AUTO_VERTICAL) {
                int appScreenHeight = getAppScreenHeight();
                int anchorCenterY = locationY + anchor.getHeight() / 2;
                offsetY = disVer(appScreenHeight / 2 < anchorCenterY, windowHeight, anchor, oy);
            }
        }
        //设置textView的padding，防止设置drawable背景不生效
        Rect padding = mBgDrawable.getPadding();
        mTipsTv.setPadding(padding.left, padding.top, padding.right, padding.bottom);
        PopupWindowCompat.showAsDropDown(this, anchor, offsetX, offsetY, Gravity.START);
    }

    private int disHor(boolean showLeft, int windowWidth, View anchor, int ox) {
        int offsetX;
        if (showLeft) {//锚点控件在屏幕中上方，反之在屏幕中下方
            mBgDrawable.setArrowsPosition(ArrowsDrawable.RIGHT);
            offsetX = -windowWidth + ox - anchor.getWidth();
        } else {
            mBgDrawable.setArrowsPosition(ArrowsDrawable.LEFT);
            offsetX = ox;
        }
        return offsetX;
    }

    private int disVer(boolean showTop, int windowHeight, View anchor, int oy) {
        int offsetY = 0;
        if (showTop) {//锚点控件在屏幕中上方，反之在屏幕中下方
            mBgDrawable.setArrowsPosition(ArrowsDrawable.BOTTOM);
            offsetY = -(windowHeight + anchor.getHeight() + oy);
        } else {
            mBgDrawable.setArrowsPosition(ArrowsDrawable.TOP);
            offsetY = oy;
        }
        return offsetY;
    }

    public ArrowsDrawable getArrowsDrawable() {
        return mBgDrawable;
    }

    public void setPadding(int padding) {
        mBgDrawable.setPadding(padding);
    }

    @IntDef({LEFT, RIGHT, TOP, BOTTOM, AUTO_VERTICAL, AUTO_HORIZONTAL})
    @Retention(RetentionPolicy.SOURCE)
    public @interface ShowPosition {

    }

    /**
     * 设置显示位置（相对于锚点控件 左边、上方、右边、下面）
     * 注意：窗口相对控件的方向，与箭头方向是相反的。
     * LEFT, RIGHT, TOP, BOTTOM
     *
     * @param showPosition
     */
    public void setShowPosition(@ShowPosition int showPosition) {
        mShowPosition = showPosition;
    }

    private static int[] getLocationOnScreen(View view) {
        int[] location = new int[2];
        view.getLocationOnScreen(location);
        return location;
    }

    private static int getStatusBarHeight() {
        // 获得状态栏高度
        Resources resources = Resources.getSystem();
        int resourceId = resources.getIdentifier("status_bar_height", "dimen", "android");
        return resources.getDimensionPixelSize(resourceId);
    }

    private static int getNavBarHeight() {
        Resources res = Resources.getSystem();
        int resourceId = res.getIdentifier("navigation_bar_height", "dimen", "android");
        if (resourceId != 0) {
            return res.getDimensionPixelSize(resourceId);
        } else {
            return 0;
        }
    }

    private static int getAppScreenHeight() {
        WindowManager wm = (WindowManager) Utils.getApp().getSystemService(Context.WINDOW_SERVICE);
        if (wm == null) return -1;
        Point point = new Point();
        wm.getDefaultDisplay().getSize(point);
        return point.y;
    }

    private static int getAppScreenWidth() {
        WindowManager wm = (WindowManager) Utils.getApp().getSystemService(Context.WINDOW_SERVICE);
        if (wm == null) return -1;
        Point point = new Point();
        wm.getDefaultDisplay().getSize(point);
        return point.x;
    }
}

liuyu0915
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
DrawerArrowDrawable：引领Android导航图标的新风尚
gitblog_00090的博客
05-16 362
DrawerArrowDrawable：引领Android导航图标的新风尚 项目地址:https://gitcode.com/ChrisRenke/DrawerArrowDrawable 项目介绍 在Android开发中，一个引人注目的界面细节就是抽屉式导航菜单的指示器，而DrawerArrowDrawable正是这样一个专为回退箭头和旋转滑动抽屉指示器设计的简单可移植图形元素。这个开源项目由Ch...
android 带箭头提示框,Android PopupWindow与Tooltip箭头
weixin_29191081的博客
05-28 867
我看到很多关于通过传递null或新的Drawable()到setBackgroundDrawable()删除PopupWindow的边框的问题。我有相反的问题。我想在我的PopupWindow周围的边框，最好用一个工具提示箭头指向我的锚。目前，我的PopupWindow没有边框。我已经尝试调整边距，在xml中的背景，布局，列表视图和列表视图行的宽度和高度无效。有人可以帮助我得到一个边框和顶部的图像...
android实现箭头流程列表_Android开发关于ExpandableListView上下箭头左右显示的笔记...
weixin_39835178的博客
01-26 252
释放双眼，带上耳机，听听看~！关键属性：android:layoutDirection=""当安卓的layoutDirection = “rtl” 时，箭头在右边显示布局：android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/backgroundColor"...
下拉菜单内容与箭头距离 安卓_不得不吐槽的Android PopupWindow的几个痛点（实现带箭头的上下文菜单遇到的坑）...
weixin_39642687的博客
12-19 178
importandroid.app.Activity;importandroid.graphics.drawable.ColorDrawable;importandroid.os.Bundle;importandroid.view.LayoutInflater;importandroid.view.MotionEvent;importandroid.view.View;importandroid....
Android 自定义曲线箭头和直线箭头
nibinusm22b的博客
04-08 2095
在日常的开发中，我们很少会用到自定义箭头，但是有时候会有一些特殊要求会要求绘制箭头，所有特意记录一下 在绘制箭头的时候，一般分为直线箭头和曲线箭头，分别如下面图所示 一般来讲，曲线箭头会有三个坐标，开始坐标，中点坐标，终点坐标，而直线箭头分为两个坐标，开始坐标和结束坐标 直线箭头很简单，先绘制两个点的直线，再根据 atan2,sin,cos计算出角度，最终计算出终点和角度的终点值 曲线箭头则稍微有点不一样，先根据quadTo 赛贝尔画出曲线,再根据终点，和直线箭头一样，计算出角度，从而计算出箭头
Android自定义ViewGroup实现带箭头的圆角矩形菜单
01-04
本文和大家一起做一个带箭头的圆角矩形菜单，大概长下面这个样子：  要求顶上的箭头要对准菜单锚点，菜单项按压反色，菜单背景色和按压色可配置。 最简单的做法就是让UX给个三角形的图片往上一贴，但是转念一想...
Android代码-BubbleView是带箭头的气泡控件容器类
08-06
BubbleView for Android 中文版README BubbleView is a control/container with an arrow for Android, which can be fully customized by code or XML layout file. Arrow direction: up, down, left, right or ...
Android自定义下拉刷新控件RefreshableView
09-01
头布局文件（headView）通常包含一个指示器（如箭头或旋转动画）、进度条和提示文字。在这个例子中，布局是线性的，包含了ImageView、ProgressBar和TextView。在实际使用中，你可以根据需求自定义头部视图的样式和...
超简单的Android上拉下拉实现 PullableLayout
12-03
本篇将详细介绍如何在Android中实现一个名为“PullableLayout”的通用上拉下拉功能，并支持多种视图组件如ListView、ScrollView、TextView、ImageView以及WebView。 首先，`PullableLayout`是一个自定义布局，它...
android气泡式对话列表
09-14
代码实现的是像handcent sms或者chomp sms那样的气泡短信样式，也是iphone上的气泡聊天模式。实现这种效果的重点是ListView的divider和listSelector
Android仿UC长按图片弹出的PopupWindow效果
06-02
仿ios中uc长按图片弹出的popupwindow效果，改点属性可以直接使用。
Android下拉刷新框架实现代码实例
09-01
1. Header：这是下拉刷新的可视部分，通常包含一个下拉箭头、提示文字和进度条。随着用户下拉的距离，Header的状态会变化，展示不同的样式。 2. Content：这是实际显示数据的部分，可以是ListView、RecyclerView或...
Android kotlin 实现列表item点击事件出现引导(带箭头和描述)功能(RecyclerView+BRVAH3.0.6+androidx)
彬sir哥的博客
10-26 1044
RecyclerView+BRVAH3.0.6+androidx
android中marker动画,Android MPAndroidChart 自适应Markerview
weixin_29924309的博客
05-25 341
前言Android里面只要用过图表的应该都知道MPAndroidChart这个库。这个库在iOS里面也有对应Charts，所以一般移动端做图表，Android和iOS两端都要实现同样的效果，他们是不错的一个选择。但是，对于图表这种包含的情况非常复杂的东西，很难满足大家各种各样的需求，所以很多都需要自定义。下面就是给大家分享一下自己写的自适应MarkerView。先上图正常居中显示超过左边界超过上边...
android代码画一个箭头,如何绘制箭头（在Android中）？
weixin_30183847的博客
05-26 1745
我刚接触Android，并且一直在研究Canvas。我正在尝试绘制箭头，但是在绘制轴时运气不好，没有一个箭头在起作用。我进行了一些搜索，找到一个Java示例，但是Android没有GeneralPathor AffineTransform。现在，我的代码如下所示(箭头看上去完全不像箭头)：public class DrawableView extends View {Context mContex...
【Code-Snippet】Android样式
weixin_33811539的博客
03-22 2548
概述 今天我们来探究一下android的样式。 其实，几乎所有的控件都可以使用 background属性去引用自定义的XML样式，所以研究样式显得特别重要。 先来看一段样式代码： <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/an...
android代码画一个箭头,如何使用android图形类绘制箭头？
weixin_29982199的博客
05-26 613
如何使用图形类绘制箭头？我使用Android图形类,基本上我试图在地图上显示路径.所以我需要在画布上打印一个箭头.帮帮我搞清楚！谢谢！这是我用来绘制线条的方法之一.我想在每一行的边缘打印一个箭头.// ArrayList ArrayListPoints = new ArrayList(); // Assign the shortest path here// ArrayLi...
android 带箭头的选择器
最新发布
12-24
Android 带箭头的选择器是一种在用户界面中常用的控件，它通常用来在用户点击后弹出一个下拉列表，用户可以从中进行选择。这种选择器通常包含一个箭头图标，当用户点击时，会弹出一个下拉菜单，用户可以在菜单中选择他们所需要的项目。这种选择器在Android开发中非常常见，因为它提供了一种简洁而有效的方式来让用户进行选择。在布局文件中，可以通过使用Spinner或者PopupMenu来实现一个带箭头的选择器。使用Spinner时，可以在布局文件中添加一个Spinner控件，并在代码中为其设置适配器，以显示选择项。而使用PopupMenu时，可以在任何视图上调用showAsDropDown()方法以显示一个包含选择项的下拉菜单。带箭头的选择器非常适合用于用户需要从一个固定的选项列表中进行选择的场景，比如选择性别、选择日期、选择城市等。在Android开发中，我们可以通过简单的布局文件和少量的代码来实现一个带箭头的选择器，以提供良好的用户体验，并让用户能够方便地进行所需的选择。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值