認識 UIButton 的 Force Left-to-Right、Force Right-to-Left、Content Insets、Image Insets、Title Insets

UIButton 這幾個屬性幾乎是每個專案必用，好好認識它們，這對專案開發會是很大的幫助。一言以蔽之，這些屬性依序是在設定 UIButton 的圖片在左、圖片在右、圖片+Title 的邊界、圖片的邊界、Title 的邊界等等。以下逐一開始說明之。

Force Left-to-Right(圖片在左)

在 UIButton 上設定圖片 + 文字，在預設的狀況下(Unspecified)，圖片就會是在左邊。而試著在 Xcode → Show the Attributes inspector → Semantic 下調整成 Force Left-to-Right 試試，也將會是一樣的結果。

Force Right-to-Left(圖片在右)

相對於 Force Left-to-Right 的是 Force Right-to-Left，試著在 Xcode → Show the Attributes inspector → Semantic 下調整成 Force Right-to-Left 試試，圖片即會在文字的右邊。

Force Right-to-Left

Content Insets

圖片 + 文字的上、左、下、右邊距(圖1)，若是設定Top=10，則圖 + 文則會向下移動，該怎麼理解呢？試著想像在 Top 塞入 10pt 的空間，圖文就會被往下推，反之，在 Top 移掉 10pt 的空間，也就是設定 設定Top=-10，則圖文則會 向上移動。直接上圖較好理解(圖1–1~1–4)。

Content Insets = 圖片 + 文字的邊距(圖1)

• Top Content Inset

Top Content Inset(圖1–1)

• Left Content Inset

Left Content Inset(圖1–2)

• Bottom Content Inset

Bottom Content Inset(圖1–3)

• Right Content Inset

Right Content Inset(圖1–4)

Image Inset

圖片的上、左、下、右邊距(圖2)，若是設定Top=10，則文字則會向下移動。直接上圖(圖2–1~2–4)。

Image Insets = 圖片的邊距(圖2)

• Top Image Inset

Top Image Inset(圖2–1)

• Left Image Inset

Left Image Inset(圖2–2)

• Bottom Image Inset

Bottom Image Inset(圖2–3)

• Right Image Inset

Right Image Inset(圖2–4)

Title Insets

文字的上、左、下、右邊距(圖3)，若是設定Top=10，則圖片則會向下移動。直接上圖(圖3–1~3–4)。

Title Insets = 文字的邊距(圖3)

• Top Title Inset

Top Title Inset(圖3–1)

• Left Title Inset

Left Title Inset(圖3–2)

• Bottom Title Inset

Bottom Title Inset(圖3–3)

• Right Title Inset

Right Title Inset(圖3–4)

如果您喜歡我的文章，請多按幾下「拍手」給我鼓勵，或是按「follow」讓我持續提供好文章給您。