Android 通用 PopupWindow,再也不用找 UI 小姐姐切 .9 图片了,大致能为你节省 30 分钟的开发时间
BGATransformersTip-Android
Android 通用 PopupWindow,再也不用找 UI 小姐姐切 .9 图片了,大致能为你节省 30 分钟的开发时间
功能介绍
支持配置浮窗展示在锚点控件的任意位置
支持配置指示箭头(是否展示、展示在浮窗的任意位置、高度、圆角、颜色)
支持配置浮窗背景色
支持配置浮窗边框阴影(是否展示、宽度、颜色)
支持配置浮窗以外的其他区域是否变暗
浮窗超出屏幕区域后会自动移动浮窗到屏幕区域内
对于只有文字的浮窗,直接使用 SimpleTextTip,不用写布局文件
效果图
使用说明
添加 Gradle 依赖
bga-transformerstip 后面的「latestVersion」指的是左边这个 Download 徽章后面的「数字」,请自行替换。
dependencies { implementation 'cn.bingoogolapple:bga-transformerstip:latestVersion@aar' } 复制代码
方式一:在 Java 代码中设置浮窗位置,在布局文件中设置浮窗背景、箭头位置
这种方式的优点是可以提前查看预览效果,提升开发效率
添加浮窗布局文件,在布局文件中设置浮窗背景、箭头位置
<?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 来设置浮窗相对于锚点控件展示的位置
ArrowGravity 说明
通过 ArrowGravity.xxxx 来设置箭头相对于浮窗的位置
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