[Android開源]：EasyGuideLayer: 這多是最簡單、靈活、強大的頁面蒙層組件了！

時間 2019-11-26

標籤 android 開源 easyguidelayer 最簡單靈活強大頁面組件欄目 Android 简体版

原文原文鏈接

顧名思義，EasyGuideLayer是用於進行Android頁面蒙層引導的組件。java

特性

鏈式調用。調用邏輯清晰直觀
支持同時設置多個引導層
支持高亮區域的自定義繪製
支持高亮區域點擊監聽
支持指定任意View設置蒙層引導
支持進行蒙層展現、隱藏事件監聽
支持直接使用drawable建立引導View

示例代碼與效果圖

1. 對Actiity進行蒙層展現：

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

2. 展現簡單蒙層：無引導View

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

3. 展現gravitiy控制效果

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

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()
複製代碼

效果圖：ui

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()
複製代碼

效果圖：