顾名思义,EasyGuideLayer
是用于进行Android页面蒙层引导
的组件。java
CODE:android
// 建立引导层展现item
val 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()
复制代码
效果图:git
CODE:github
// 提供统一的蒙层实例建立使用
private fun createDefaultGuide() =
EasyGuideLayer.with(anchor)// 指定用于建立蒙层的View
.setBackgroundColor(0x33000000)
.setOnGuideShownListener { shown:Boolean ->
EasyToast.DEFAULT.show("蒙层已${if (shown) "展现" else "消失"}")
}.setDismissOnClickOutside(true)
...
// 直接建立不添加引导View进行展现
createDefaultGuide().show()
复制代码
效果图:canvas
CODE:bash
// 建立位置-文案关系列表。
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()
}
复制代码
效果图:ide
CODE:布局
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()
复制代码
效果图:ui
CODE:编码
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开源库地址:
EasyGuideLayer组件地址: