顧名思義，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()
複製程式碼

效果圖：

用法

具體用法說明請直接前往開源庫進行詳細瞭解：EasyGuideLayer

開源簡介

EasyGuideLayer是開源基礎元件整合庫EasyAndroid中的基礎元件之一。

EasyAndroid作為一款整合元件庫，此庫中所整合的元件，均包含以下特點，你可以放心使用~~

1. 設計獨立

元件間獨立存在，不相互依賴，且若只需要整合庫中的部分元件。也可以很方便的只copy對應的元件檔案進行使用

2. 設計輕巧

因為是元件整合庫，所以要求每個元件的設計儘量精練、輕巧。避免因為一個小功能而引入大量無用程式碼.

每個元件的方法數均不超過100. 大部分元件甚至不超過50。

得益於編碼時的高內聚性，若你只需要使用EasyGuideLayer. 那麼可以直接去拷貝EasyGuideLayer原始碼檔案到你的專案中，直接進行使用，也是沒問題的。

EasyAndroid開源庫地址:

github.com/yjfnypeu/Ea…

EasyGuideLayer元件地址:

github.com/yjfnypeu/Ea…