Android開源：EasyGuideLayer

開源安卓開發 · 發表 2018-12-03 18:48:52

摘要：這可能是最簡單、靈活、強大的頁面蒙層元件了！顧名思義，EasyGuideLayer是用於進行Android頁面蒙層引導的元件。特性鏈式呼叫。呼叫邏輯清晰直觀支援同時設定多個引導層支援高亮區域的自定義繪製支援高亮區域點選監聽 ...

這可能是最簡單、靈活、強大的頁面蒙層元件了！顧名思義，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開源庫地址:

ofollow,noindex">https://github.com/yjfnypeu/EasyAndroid

EasyGuideLayer元件地址:

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

Android開源：EasyGuideLayer

CODE:

效果圖：

CODE:

效果圖：

CODE:

效果圖：

CODE:

效果圖：

CODE:

效果圖：

1. 設計獨立

2. 設計輕巧

最後；感謝你到這裡，喜歡的話請幫忙點個贊讓更多需要的人看到哦。更多Android進階技術，面試資料整理分享，職業生涯規劃，產品，思維，行業觀察，談天說地。可以加Android架構師群；701740775。

您可能也會喜歡…