前言

Divider 是能將要在 UI 呈現的重點內容，更加清晰且顯眼地表達。在我們想呈現列表形式的資料時，透過 Divider 的劃分，讓用戶能明顯辨識之間的層級與關係。由於 Divider 是蠻簡單的元件，Material Design 介紹的篇幅也很少，這邊就將實作與設計一起講解

大綱

• Design
  • Usage
  • Types
• Implementation
  • Using
  • Key properties
  • Style

Design

Using

原則

• 輔助性的 : 在佈局中，作為排版與分割內容之間的輔助工具，不應太過顯眼，甚至超過內容本身
• 次要的 : 只有在內容無法只使用空白分隔的時候，才去使用
• 不常見的 : 使用上，避免在非群組之間使用與分隔，過於濫用會分散用戶的注意力

Types

Full-bleed

寬度與當前佈局的整體寬度相同，完全切割內容成幾個部分

1. 分離列表中各個不相關元素，作為之間的間隔線
2. 放在能展開的元素之間，作為區分群組與元素之間的關係

Inset dividers ( 內嵌分隔線 )

使用上可以用來區隔列表中的不同元素，或是群組上的區隔。例如電子郵件。它們應與圖標或頭像等錨定元素一起使用，並與應用欄標題左對齊

在應用上，若性質上能分組分群，就透過 divider 來劃分，不要都是獨立分隔

Middle dividers

能放在佈局的中間。是最適合分離相關內容，例如，購物車最後結算的總額

Dividers with subheaders

與副標題搭配以區別群組的特性與屬性。在副標題上方放置分隔線以加強副標題與內容的聯繫關係

通常是用在有明確的分組之間，需要透過副標題的輔助，讓用戶知道當前分隔群組的屬性

Implementation

Using

使用時要注意，MaterialDivider 上設置 android:layout_height="wrap_content" 以確保為分隔線設置正確的大小，若想要自定義大小，請透過app:dividerThickness 來修改

in layout

<com.google.android.material.divider.MaterialDivider
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

默認情況下，分隔符是 Full-bleed 的。可以使用 app:dividerInsetStart 和 app:dividerInsetEnd 來實現 Inset 或 Middle 分隔線的外觀

<com.google.android.material.divider.MaterialDivider
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:dividerInsetStart="16dp"
    app:dividerInsetEnd="16dp"/>

或是在編程中改變

divider.setDividerInsetStart(insetStart)
divider.setDividerInsetEnd(insetEnd)

MaterialDividerItemDecoration

MaterialDividerItemDecoration 是可以應用在 RecyclerView 的一個物件，與我們常用的 ItemDecoration 類似，都是能幫助我們在生成 RecyclerView 的時候，可用作 LinearLayoutManager 的 Item 之間的分隔符。支援水平和垂直方向。如果對 ItemDecoration 不熟的，剛好我也寫過一篇文章，可以參考參考（業配環節）

in Adapter

class DividerAdapter(private val size: Int) : Adapter<DividerAdapter.DividerViewHolder>() {
    inner class DividerViewHolder(private val binding: ItemviewDividerItemBinding) :ViewHolder(binding.root) {
        fun bind(position: Int) {
            binding.dividerItemTv.text = "divider $position"
        }
    }
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DividerViewHolder {
        return DividerViewHolder(ItemviewDividerItemBinding.inflate(LayoutInflater.from(parent.context), parent, false))
    }

    override fun onBindViewHolder(holder: DividerViewHolder, position: Int) {
        holder.bind(position)
    }

    override fun getItemCount(): Int {
        return this.size
    }
}

in Fragmetn / Activity

private val mAdapter :DividerAdapter by lazy { DividerAdapter(20) }

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
        
        // set divider 
        val materialDivider = MaterialDividerItemDecoration(requireContext(),LinearLayoutManager.VERTICAL)
        materialDivider.dividerColor = resources.getColor(R.color.white,null)
        materialDivider.dividerInsetStart = 20
        materialDivider.dividerInsetEnd = 20

        binding.dividerWithRecycler.apply {
            setHasFixedSize(true)
            layoutManager  = LinearLayoutManager(requireContext())
            addItemDecoration(materialDivider)
            adapter = mAdapter
        }
    }

Key properties

Dividers

Style

Custom Style

Divider Color 預設是吃 colorOnSurface，屬性上沒有很多，所以範例的部分我就小改一下

<style name="Widget.App.MaterialDivider" parent="Widget.MaterialComponents.MaterialDivider">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.MaterialDivider</item>
        <item name="dividerThickness">4dp</item>
        <item name="dividerInsetEnd">10dp</item>
        <item name="dividerInsetStart">10dp</item>
</style>

<style name="ThemeOverlay.App.MaterialDivider" parent="">
        <item name="colorOnSurface">@color/lightYellow</item>
</style>

如果無法透過 colorOnSurface 改動的話，可在 Style 裡面寫入 name="dividerColor" 來改變顏色

<style name="Widget.App.MaterialDivider" parent="Widget.MaterialComponents.MaterialDivider">
        ...
    <item name="dividerColor">@color/lightYellow</item>
        ...
</style>

小結

設計上常用於去呈現列表物件的關聯性與群組性，讓用戶一眼能辨識當中的層級，是非常方便的小元件。實作上也很簡單，但通常我們可能會常用 View 來直接使用類似功能，也不是不行，但 Divider 是 Material Design 幫我們包好的元件工具，善用的話可以在許多情境上省下許多麻煩

若對實作還是有點不懂的，這邊提供我的 Github 方便大家參考