Android开源:EasyGuideLayer

作者 : 开心源码 本文共4799个字,预计阅读时间需要12分钟 发布时间: 2022-05-12 共151人阅读

这可能是最简单、灵活、强大的页面蒙层组件了!顾名思义,EasyGuideLayer是用于进行Android页面蒙层引导的组件。

特性

  • 链式调用。调用逻辑清晰直观
  • 支持同时设置多个引导层
  • 支持高亮区域的自己设置绘制
  • 支持高亮区域点击监听
  • 支持指定任意View设置蒙层引导
  • 支持进行蒙层展现、隐藏事件监听
  • 支持直接使用drawable创立引导View

示例代码与效果图

1. 对Actiity进行蒙层展现:

CODE:

<pre style=”margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; word-break: break-word;”>

// 创立引导层展现itemval item = GuideItem.newInstance(findViewById<View>(R.id.layer_layout)) // 引导view的相对位置 .setGravity(Gravity.BOTTOM) // 用于创立引导View的layout布局,此处为普通的TextView .setLayout(R.layout.guide_text_layout) // 设置展现的高亮块形状:椭圆形 .setHighLightShape(GuideItem.SHAPE_OVAL) // 此处进行引导View的时间、内容显示控制。比方此处修改TextView的显示内容 .setOnViewAttachedListener { view, controller -> (view as TextView).text = "此处展现下方的各种蒙层展现效果" }EasyGuideLayer.with(activity) // 使用activity实例进行创立。 .addItem(item) // 将引导层增加进来 .setDismissOnClickOutside(true)// 点击外部区域时自动隐藏 .show()

效果图:

2. 展现简单蒙层:无引导View

CODE:

<pre style=”margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; word-break: break-word;”>

// 提供统一的蒙层实例创立使用private fun createDefaultGuide() =  EasyGuideLayer.with(anchor)// 指定用于创立蒙层的View .setBackgroundColor(0x33000000) .setOnGuideShownListener { shown:Boolean -> EasyToast.DEFAULT.show("蒙层已${if (shown) "展现" else "消失"}") }.setDismissOnClickOutside(true)...// 直接创立不增加引导View进行展现createDefaultGuide().show()

效果图:

3. 展现gravitiy控制效果

CODE:

<pre style=”margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; word-break: break-word;”>

// 创立位置-文案关系列表。private val gravities = listOf( Gravity.LEFT or Gravity.TOP to "左上", Gravity.TOP to "顶部", Gravity.RIGHT or Gravity.TOP to "右上", Gravity.LEFT to "左边", Gravity.RIGHT to "右边", Gravity.LEFT or Gravity.BOTTOM to "左下", Gravity.BOTTOM to "底部", Gravity.BOTTOM or Gravity.RIGHT to "右下" )fun showWithGravity() { var index = 0 val item = GuideItem.newInstance(findViewById<View>(R.id.anchor_center)) // 设置gravity与通用引导View item.setGravity(gravities[index].first).setLayout(R.layout.guide_text_layout) item.setOnViewAttachedListener { view, controller -> (view as TextView).text = gravities[index].second view.setOnClickListener { // 点击后重置gravity信息并重新展现 try { index++ item.setGravity(gravities[index].first) controller.getGuideLayer().show() } catch (e:IndexOutOfBoundsException) { // 所有gravity效果展现完成后。让蒙层消失 controller.dismiss() } } } createDefaultGuide() .addItem(item) .show()}

效果图:

4. 展现不同的高亮样式

CODE:

<pre style=”margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; word-break: break-word;”>

val layer = createDefaultGuide()// 背景色调深点便于查看高亮块layer.setBackgroundColor(0x66000000) // 顶部高亮块:使用椭圆形状val topItem = GuideItem.newInstance(findViewById<View>(R.id.anchor_top)) .setHighLightShape(GuideItem.SHAPE_OVAL) .setOnHighLightClickListener { EasyToast.DEFAULT.show("顶部高亮区域被点击") }// 中间高亮块:使用矩形形状val centerItem = GuideItem.newInstance(findViewById<View>(R.id.anchor_center)) .setHighLightShape(GuideItem.SHAPE_RECT) .setOnHighLightClickListener { EasyToast.DEFAULT.show("中央高亮区域被点击") }// 底部高亮块:使用自己设置绘制,圆角矩形形状val bottomItem = GuideItem.newInstance(findViewById<View>(R.id.anchor_bottom)) .setOnDrawHighLightCallback { canvas, rect, paint -> canvas.drawRoundRect(rect, 30f, 30f, paint) }.setOnHighLightClickListener { EasyToast.DEFAULT.show("底部高亮区域被点击") }layer.addItem(topItem).addItem(centerItem).addItem(bottomItem).show()

效果图:

5. 动态计算调整引导View位置

CODE:

<pre style=”margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; word-break: break-word;”>

val item = GuideItem.newInstance(findViewById<View>(R.id.anchor_center)) .setLayout(R.layout.guide_text_layout) .setOnViewAttachedListener { view, controller -> (view as TextView).text = "中央展现hehehehe " }.setOffsetProvider { point, rectF, view -> // 在此根据具体尺寸计算出中央位置 point.offset(((rectF.width() - view.width) / 2).toInt(), 0) }.setGravity(Gravity.TOP)createDefaultGuide().addItem(item).show()

效果图:

用法

具体用法说明请直接前往开源库进行详细理解:EasyGuideLayer

开源简介

EasyGuideLayer是开源基础组件集成库EasyAndroid中的基础组件之一。

EasyAndroid作为一款集成组件库,此库中所集成的组件,均包含以下特点,你可以放心使用~~

1. 设计独立

组件间独立存在,不相互依赖,且若只要要集成库中的部分组件。也可以很方便的只copy对应的组件文件进行使用

2. 设计轻巧

由于是组件集成库,所以要求每个组件的设计尽量精练、轻巧。避免由于一个小功能而引入大量无用代码.

每个组件的方法数均不超过100. 大部分组件甚至不超过50。

得益于编码时的高内聚性,若你只要要使用EasyGuideLayer. 那么可以直接去拷贝EasyGuideLayer源码文件到你的项目中,直接进行使用,也是没问题的。

EasyAndroid开源库地址:

yjfnypeu/EasyAndroid

EasyGuideLayer组件地址:

yjfnypeu/EasyAndroid/blob/master/utils/src/main/java/com/haoge/easyandroid/easy/EasyGuideLayer.kt

最后;感谢你到这里,喜欢的话请帮忙点个赞让更多需要的人看到哦。更多Android进阶技术,面试资料整理分享,职业生涯规划,产品,思维,行业观察,谈天说地。可以加Android架构师群;701740775。

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Android开源:EasyGuideLayer

发表回复