阅读 239

Android 通用 PopupWindow,再也不用找 UI 小姐姐切 .9 图片了,大致能为你节省 30 分钟的开发时间

BGATransformersTip-Android

Android 通用 PopupWindow,再也不用找 UI 小姐姐切 .9 图片了,大致能为你节省 30 分钟的开发时间

功能介绍

  • 支持配置浮窗展示在锚点控件的任意位置

  • 支持配置指示箭头(是否展示、展示在浮窗的任意位置、高度、圆角、颜色)

  • 支持配置浮窗背景色

  • 支持配置浮窗边框阴影(是否展示、宽度、颜色)

  • 支持配置浮窗以外的其他区域是否变暗

  • 浮窗超出屏幕区域后会自动移动浮窗到屏幕区域内

  • 对于只有文字的浮窗,直接使用 SimpleTextTip,不用写布局文件

效果图

12
34


效果图


使用说明

添加 Gradle 依赖

Downloadbga-transformerstip 后面的「latestVersion」指的是左边这个 Download 徽章后面的「数字」,请自行替换。


dependencies {     implementation 'cn.bingoogolapple:bga-transformerstip:latestVersion@aar' } 复制代码

方式一:在 Java 代码中设置浮窗位置,在布局文件中设置浮窗背景、箭头位置

  • 这种方式的优点是可以提前查看预览效果,提升开发效率


preview


  • 添加浮窗布局文件,在布局文件中设置浮窗背景、箭头位置

<?xml version="1.0" encoding="utf-8"?> <cn.bingoogolapple.transformerstip.view.TransformersTipLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:gravity="center_vertical"     android:orientation="horizontal"     app:ad_arrowExtraOffsetX="0dp"     app:ad_arrowExtraOffsetY="0dp"     app:ad_arrowGravity="to_top_center"     app:ad_arrowHeight="6dp"     app:ad_bgColor="@android:color/black"     app:ad_radius="4dp"     app:ad_shadowColor="#33000000"     app:ad_shadowSize="6dp">     <TextView         android:id="@+id/tv_tip_content"         android:layout_width="200dp"         android:layout_height="wrap_content"         android:layout_margin="10dp"         android:text="B -> bingo\nG googol\nA -> apple\nBGA -> bingoogolapple"         android:textColor="@android:color/white" />     <TextView         android:id="@+id/tv_tip_close"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginTop="6dp"         android:layout_marginEnd="6dp"         android:layout_gravity="top"         android:padding="4dp"         android:text="x"         android:textColor="@android:color/white" /> </cn.bingoogolapple.transformerstip.view.TransformersTipLinearLayout> 复制代码
  • 在 Java 代码中设置浮窗位置

new TransformersTip(anchorView, R.layout.layout_demo1_tip) {     @Override     protected void initView(View contentView) {         // 点击浮窗中自定按钮关闭浮窗         contentView.findViewById(R.id.tv_tip_close).setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 dismissTip();             }         });     } }         .setTipGravity(TipGravity.TO_BOTTOM_CENTER) // 设置浮窗相对于锚点控件展示的位置         .setTipOffsetXDp(0) // 设置浮窗在 x 轴的偏移量         .setTipOffsetYDp(-6) // 设置浮窗在 y 轴的偏移量         .setBackgroundDimEnabled(true) // 设置是否允许浮窗的背景变暗         .setDismissOnTouchOutside(false) // 设置点击浮窗外部时是否自动关闭浮窗         .show(); // 显示浮窗 复制代码

方式二:在 Java 代码中设置浮窗位置、浮窗背景、箭头位置

  • 添加浮窗布局文件

<?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="horizontal">     <TextView         android:id="@+id/tv_tip_content"         android:layout_width="200dp"         android:layout_height="wrap_content"         android:layout_margin="10dp"         android:text="B -> bingo\nG googol\nA -> apple\nBGA -> bingoogolapple"         android:textColor="@android:color/black" />     <TextView         android:id="@+id/tv_tip_close"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginTop="6dp"         android:layout_marginEnd="6dp"         android:layout_gravity="top"         android:padding="4dp"         android:text="x"         android:textColor="@android:color/black" /> </LinearLayout> 复制代码
  • 在 Java 代码中设置浮窗位置、浮窗背景、箭头位置

new TransformersTip(anchorView, R.layout.layout_demo2_tip) {     @Override     protected void initView(View contentView) {         // 点击浮窗中自定按钮关闭浮窗         contentView.findViewById(R.id.tv_tip_close).setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v) {                 dismissTip();             }         });     } }         .setArrowGravity(ArrowGravity.TO_BOTTOM_CENTER) // 设置箭头相对于浮窗的位置         .setBgColor(Color.WHITE) // 设置背景色         .setShadowColor(Color.parseColor("#33000000")) // 设置阴影色         .setArrowHeightDp(6) // 设置箭头高度         .setRadiusDp(4) // 设置浮窗圆角半径         .setArrowOffsetXDp(0) // 设置箭头在 x 轴的偏移量         .setArrowOffsetYDp(0) // 设置箭头在 y 轴的偏移量         .setShadowSizeDp(6) // 设置阴影宽度         .setTipGravity(TipGravity.TO_TOP_CENTER) // 设置浮窗相对于锚点控件展示的位置         .setTipOffsetXDp(0) // 设置浮窗在 x 轴的偏移量         .setTipOffsetYDp(6) // 设置浮窗在 y 轴的偏移量         .setBackgroundDimEnabled(false) // 设置是否允许浮窗的背景变暗         .setDismissOnTouchOutside(false) // 设置点击浮窗外部时是否自动关闭浮窗         .show(); // 显示浮窗 复制代码

方式三:对于仅有文字的浮窗,可以直接使用 SimpleTextTip,不用再写布局文件了

new SimpleTextTip(anchorView)         .setTextContent("适用于只有文字的浮窗\n不写布局文件\n在 Java 代码中设置文本内容属性") // 设置浮窗文本内容         .setTextPaddingDp(12) // 设置文字与浮窗边框的间距         .setTextColor(Color.BLACK) // 设置文字颜色         .setTextSizeSp(14) // 设置文字大小         .setTextGravity(Gravity.CENTER) // 设置文字对其方式         .setLineSpacingExtraDp(4) // 设置文字行间距         .setArrowGravity(ArrowGravity.TO_BOTTOM_ALIGN_START) // 设置箭头相对于浮窗的位置         .setBgColor(Color.WHITE) // 设置背景色         .setShadowColor(Color.parseColor("#33000000")) // 设置阴影色         .setArrowHeightDp(6) // 设置箭头高度         .setRadiusDp(4) // 设置浮窗圆角半径         .setArrowOffsetXDp(0) // 设置箭头在 x 轴的偏移量         .setArrowOffsetYDp(0) // 设置箭头在 y 轴的偏移量         .setShadowSizeDp(6) // 设置阴影宽度         .setTipGravity(TipGravity.TO_TOP_ALIGN_START) // 设置浮窗相对于锚点控件展示的位置         .setTipOffsetXDp(0) // 设置浮窗在 x 轴的偏移量         .setTipOffsetYDp(6) // 设置浮窗在 y 轴的偏移量         .setBackgroundDimEnabled(false) // 设置是否允许浮窗的背景变暗         .setDismissOnTouchOutside(true) // 设置点击浮窗外部时是否自动关闭浮窗         .show(); // 显示浮窗 复制代码

TipGravity 说明

  • 通过 TipGravity.xxxx 来设置浮窗相对于锚点控件展示的位置TipGravity说明

ArrowGravity 说明

  • 通过 ArrowGravity.xxxx 来设置箭头相对于浮窗的位置


ArrowGravity说明


TransformersTipLinearLayout 和 TransformersTipRelativeLayout 自定义属性说明

<declare-styleable name="ArrowDrawable">     <!-- 背景色 -->     <attr format="reference|color" name="ad_bgColor" />     <!-- 阴影色 -->     <attr format="reference|color" name="ad_shadowColor" />     <!-- 箭头高度 -->     <attr format="dimension" name="ad_arrowHeight" />     <!-- 阴影宽度 -->     <attr format="dimension" name="ad_shadowSize" />     <!-- 浮窗圆角半径 -->     <attr format="dimension" name="ad_radius" />     <!-- 箭头在 x 轴的偏移量 -->     <attr format="dimension" name="ad_arrowExtraOffsetX" />     <!-- 箭头在 y 轴的偏移量 -->     <attr format="dimension" name="ad_arrowExtraOffsetY" />     <!-- 箭头相对于浮窗的位置 -->     <attr name="ad_arrowGravity">         <flag name="to_top_align_start" value="65" />         <flag name="to_top_center" value="129" />         <flag name="to_top_align_end" value="257" />         <flag name="align_top_to_start" value="34" />         <flag name="align_top_to_end" value="514" />         <flag name="center_to_start" value="36" />         <flag name="center_to_end" value="516" />         <flag name="align_bottom_to_start" value="40" />         <flag name="align_bottom_to_end" value="520" />         <flag name="to_bottom_align_start" value="80" />         <flag name="to_bottom_center" value="144" />         <flag name="to_bottom_align_end" value="272" />     </attr> </declare-styleable>


作者:bingoogolapple
链接:https://juejin.cn/post/6844903935723962382


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐