您现在的位置是：首页 > 文章详情

Android开源：EasyGuideLayer

日期：2018-12-02点击：519收藏

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

特性

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

示例代码与效果图

1. 对Actiity进行蒙层展示：

CODE:

// 创建引导层展示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()

效果图：

2. 展示简单蒙层：无引导View

CODE:

// 提供统一的蒙层实例创建使用 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:

// 创建位置-文案关系列表。 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:

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:

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()

效果图：