快速學會在Android App中調整元素間距 - 使用Kotlin extension程式碼設定間距
2022, Dec 25
前言
今天要跟大家分享一個超簡單的小技巧，
讓你在設計 Android App 時可以用程式碼調整元素的間距。
這個方法用起來不僅方便，而且還可以讓你的設計更加美觀。
就算你是剛入門工程師，也可以輕鬆掌握！
跟著我一起來學吧！
基本的方法
在Android中調整元素間距有多種方法，本文將介紹使用Kotlin extension程式碼設定間距的方法。
在這之前我們先了解一下
在xml裡面設定view間距的話
最直接的僅需一行而已
android:layout_marginLeft="30dp"
有些情況下
當需求方要求你動態設定 Android View 元素間的間距時
通常可以用下面的的方法:
這個方法需要實例化一個 LayoutParams
並且需要設定上下左右間距後才能 set 到你的 View 上
但如果你需要在多個地方都使用這個設定間距的方法
那就會讓程式碼變得冗長且難以維護。
為了解決這個問題，
你可以使用 Kotlin Extension 去實作設定間距的方法，
這樣就能夠讓你的程式碼更簡潔且易於維護。
使用kotlin extension來完成
step0. 這邊先展示一下完整的擴充function
這段程式碼已經可以直接使用了
複製到你的專案內
直接拿到你的view呼叫就行了！
vb.btConfirmZero.margin(top = 0F)
vb.btConfirmOne.margin(bottom = 30F,right = 2F)
vb.btConfirmTwo.margin(bottom = 10F,left = 3F)
這邊都懂的話可以直接跳到step5.
Step1. 要如何實作呢？
首先先建立一個function如下
上面程式碼解說
-
這邊我們傳入一個 function type 命名為block
它其實就是一種Kotlin變數(可能別的語言也有 但是Java還沒支援)
(Function type解釋可以參考:點此)
使用function type 可以讓你用lambda去操作(Java雖有lambda，不過目前並沒有function type) -
我們這邊使用泛型
且用了型別轉換去轉換泛型
有可能因為編譯時被認為是隱式型別強轉而產生錯誤
因此如果在沒有明確類別
直接強轉則可能遇到
`xxxxClass cannot be cast to zzzzClass` 這種的錯誤
或是有些編譯器會直接提示你`unchecked cast`警告語
當然你也可以 帶入clazz: Class之類的 來判斷實際的類是什麼
但這樣code會變得更多
當類別一多時就會寫更多的code、一直做重複的事...等等
所以這邊用了`reified`來作為解決方法
他是一種kotlin提供來解決這類問題的一個用法
-> 使用reified必需帶`inline`
之後我們就可以這樣呼叫
上面程式碼解說
這邊其實就是為了符合不同的 ViewGroup.LayoutParams讓未來如果有更多繼承 ViewGroup.LayoutParams 的實體類想進行操作
可以更有彈性
Step2. 寫一個dp to px的method
- 這邊很簡單 主要是為了配合設定間距時使用的是pixel 所以寫了個轉換方法
Step3. 透過擴充好的layoutParams去對layout的parameter做修改
上面程式碼解說
這邊透過剛寫好的 View.layoutParams 去操作我們要設定的view以前在java要設定都一定要一次輸入上下左右四個parmater
因此這邊我們用
left: Float? = null, top: Float? = null, right: Float? = null, bottom: Float? = null
來預設四個位置的間距都是null
再使用kotlin null safe的特性去檢查，如
left?.run { leftMargin = convertDpToPixel(this) }
確定有值才會去設定margin間距值
我們既不用擔心會null exception又能彈性的只輸入我們想改的位置就好