UIEdgeInsets用法

閱讀時間約 5 分鐘

UIEdgeInsets 是一個結構體,用來表示矩形的邊距。它通常在視圖佈局中使用,用於修改視圖的框架(frame)。邊距值可以是正數或負數,這會對矩形的大小產生不同的影響。

UIEdgeInsets 結構體

UIEdgeInsets 結構體包含四個屬性:

  • top:矩形頂部的邊距
  • left:矩形左側的邊距
  • bottom:矩形底部的邊距
  • right:矩形右側的邊距

正值和負值的影響

  • 正值:正值會使矩形縮小,即向內縮進指定的邊距值。例如,如果你設置 top 為 10,矩形的頂部會向下移動 10 點,縮小矩形的高度。
  • 負值:負值會使矩形擴大,即向外擴展指定的邊距值。例如,如果你設置 top 為 -10,矩形的頂部會向上移動 10 點,增加矩形的高度。
  • 正值和負值的影響

示例

假設你有一個矩形,其初始框架是 (x: 0, y: 0, width: 100, height: 100)。

使用正值的邊距

let insets = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
let insetRect = rect.inset(by: insets)

結果:

  • insetRect 的框架會是 (x: 10, y: 10, width: 80, height: 80)。
  • 矩形的每一邊都向內縮進了 10 點,因此寬度和高度都減少了 20 點。

使用負值的邊距

let insets = UIEdgeInsets(top: -10, left: -10, bottom: -10, right: -10)
let rect = CGRect(x: 0, y: 0, width: 100, height: 100)
let insetRect = rect.inset(by: insets)

結果:

  • insetRect 的框架會是 (x: -10, y: -10, width: 120, height: 120)。
  • 矩形的每一邊都向外擴展了 10 點,因此寬度和高度都增加了 20 點。

在視圖佈局中的應用

UIEdgeInsets 通常在設置視圖的邊距(例如,內容邊距或安全區域邊距)時使用。例如:

let button = UIButton(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
button.contentEdgeInsets = UIEdgeInsets(top: 10, left: 20, bottom: 10, right: 20)

這樣設置後,按鈕的內容(如標題或圖片)會有 10 點的頂部和底部邊距,以及 20 點的左右邊距。

  • 負值:負值會使矩形擴大,即向外擴展指定的邊距值。例如,如果你設置 top 為 -10,矩形的頂部會向上移動 10 點,增加矩形的高度。

正值是縮小?負值是擴大?

raw-image

正值的邊距

當你給 UIEdgeInsets 設置正值時,這些值表示從矩形的邊緣向內縮進的距離。換句話說,正值表示你要從矩形的每一個邊緣向內移動,這樣就會使矩形變小。

視覺化理解

假設你有一個初始矩形,框架為 (x: 0, y: 0, width: 100, height: 100)

正值邊距的應用

如果你設置 UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10),這意味著:

  • 頂部:矩形的頂部邊緣向下移動 10 點。
  • 左側:矩形的左邊邊緣向右移動 10 點。
  • 底部:矩形的底部邊緣向上移動 10 點。
  • 右側:矩形的右邊邊緣向左移動 10 點。

這樣一來,矩形的每一邊都向內縮進了 10 點,導致矩形的寬度和高度都減少了 20 點(每邊 10 點,共兩邊)。

結果,新的矩形框架變為 (x: 10, y: 10, width: 80, height: 80)

總結

正值使矩形縮小的原因在於,這些值表示從矩形的邊緣向內縮進的距離。這樣做會減少矩形的總寬度和高度,使其變得更小。

實際應用

把button的圖片從預設的置左改成置右

 extension UIButton {

    func configRightImage() {

        self.titleEdgeInsets = UIEdgeInsets(top: 0, left: -(self.imageView?.frame.size.width ?? 0), bottom: 0, right: self.imageView?.frame.size.width ?? 0)

        self.imageEdgeInsets = UIEdgeInsets(top: 0, left: (self.titleLabel?.frame.size.width ?? 0) - 10, bottom: 0, right: -(self.titleLabel?.frame.size.width ?? 0))

    }

}
6會員
35Content count
紀錄iOS開發上遇到的問題或是一些流程筆記。主要都是Swift。
留言0
查看全部
發表第一個留言支持創作者!
Michelle Chen的沙龍 的其他內容
iOS15推出了新的按鈕外觀設定功能,讓設定變得更加直觀。使用不同的圓角設定和圖片位置可以輕鬆創建不同風格的按鈕。另外,新的選取效果變化功能也讓按鈕設計更加靈活。本文將介紹這些新功能的使用方法和效果。
本文介紹如何使用UINavigationBarAppearance調整四種場景下的UI外觀,並探討客製化返回鍵UI又保留返回手勢的做法,可以有效地客製化NavigationBar的外觀,並避免一些NG作法。
這篇文章介紹了 Swift 中字串的比較方法,並討論了使用日期字串進行比較的結果。同時也介紹了數字字串、符號字串和表情符號字串的比較原理。最後指出比較日期字串還是要轉成Date才是安全的做法。
最近碰到個神奇的需求,App啟動時,才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面,以及解決在推播的情況下造成跳轉無效的問題。
這篇文章主要討論了在 iOS 開發中,使用 UIImagePickerController 來選取 GIF 圖片時會變成靜態截圖的問題,並推薦了使用新的 PHPickerViewController 選取 GIF 檔案。同時提供了一些處理 GIF 圖片的方法。
這篇文章介紹了 iOS 中常用的 Design Patterns,包括 MVC、MVVM、Singleton、Delegation、Observer 等。同時比較了 Delegate 和 Notification 的使用時機。參考資料中還有更多相關資訊。
iOS15推出了新的按鈕外觀設定功能,讓設定變得更加直觀。使用不同的圓角設定和圖片位置可以輕鬆創建不同風格的按鈕。另外,新的選取效果變化功能也讓按鈕設計更加靈活。本文將介紹這些新功能的使用方法和效果。
本文介紹如何使用UINavigationBarAppearance調整四種場景下的UI外觀,並探討客製化返回鍵UI又保留返回手勢的做法,可以有效地客製化NavigationBar的外觀,並避免一些NG作法。
這篇文章介紹了 Swift 中字串的比較方法,並討論了使用日期字串進行比較的結果。同時也介紹了數字字串、符號字串和表情符號字串的比較原理。最後指出比較日期字串還是要轉成Date才是安全的做法。
最近碰到個神奇的需求,App啟動時,才要用firebase remoteConfig去決定初始畫面。該文章詳細介紹了在App啟動時如何利用firebase remoteConfig去決定初始畫面,以及解決在推播的情況下造成跳轉無效的問題。
這篇文章主要討論了在 iOS 開發中,使用 UIImagePickerController 來選取 GIF 圖片時會變成靜態截圖的問題,並推薦了使用新的 PHPickerViewController 選取 GIF 檔案。同時提供了一些處理 GIF 圖片的方法。
這篇文章介紹了 iOS 中常用的 Design Patterns,包括 MVC、MVVM、Singleton、Delegation、Observer 等。同時比較了 Delegate 和 Notification 的使用時機。參考資料中還有更多相關資訊。
你可能也想看
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
在TOEFL(托福)閱讀及寫作考題中,經常出現與「天文學」相關的學術英文考題。無此類「科普知識」的考生,可以從已知中文常識,例如法國精品名牌包Hermes、美國在2010年結束營運的釷星汽車(Saturn)等有趣常識,f輕鬆學銀河系八大行星英文詞彙,
Thumbnail
本文探討了日文中被動句的不同使用方式,並詳細闡述了這些結構的含義和使用方法。
Thumbnail
這本書探討了輸出對於改變真實世界的重要性,作者著重於生活中的實踐,以及腦科學的概念,並鼓勵讀者擁有輸出的勇氣。
透過有限資源與Vision無限的矛盾,配合高速運轉的大腦建立出墊腳石,再善用保護好心地自然形成階梯。 理想就該這麼用。
Thumbnail
SUMIF是EXCEL中一個超級實用的統計函數,他可以依據指定的關鍵字進行加總。 SUMIF有條件加總 函數說明=SUMIF(條件範圍,條件,加總範圍) 但如果遇到很多個資料範圍,大多數的人就會使用很多個SUMIF計算後再相加,如下範例所示。 其實這樣多範圍的資料不需要3個SUMIF,
Thumbnail
理財大概是每個人都關心的話題,尤其一句著名廣告詞「你不理財.財不理你」更是把理財的重要性講得再貼切不過! 故事內容其實只圍繞在一個家庭:73歲的奶奶、55歲的媽媽、29歲已婚育有一女的姊姊以及24歲剛出社會不久的OL。 這設定很有意思,理財從學生時代(助學貸款開始),一直到73歲只要還有
Who would want to be a chief executive? 誰想成為執行長? 取材自紐約時報:By Ravi Mattu / Published May 14, 2023 / Updated June 9, 2023 ing應用分析
最近看到愈來愈多台灣人寫文章,會用「迎來」這個詞;但這個詞真的有點被濫用;姑且不論這個詞是中國用語,撇開這個不提,「迎來」都可以換成更好的說法。
Thumbnail
重點摘要: 1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息 2.SEP 上修失業率預期,但快速的降息速率將有助失業率觸頂 3.未來幾個月經濟數據將繼續轉弱,經濟復甦的時點或是 1Q25 季底附近
Thumbnail
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎? 新版式整體視覺上「更加凸顯圖片」,為了搭配這次的更新,我們推出首次貼文策展 ❤️ 使用貼文功能並完成這次的指定任務,還有機會獲得富士即可拍,讓你的美好回憶都可以用即可拍珍藏!
在TOEFL(托福)閱讀及寫作考題中,經常出現與「天文學」相關的學術英文考題。無此類「科普知識」的考生,可以從已知中文常識,例如法國精品名牌包Hermes、美國在2010年結束營運的釷星汽車(Saturn)等有趣常識,f輕鬆學銀河系八大行星英文詞彙,
Thumbnail
本文探討了日文中被動句的不同使用方式,並詳細闡述了這些結構的含義和使用方法。
Thumbnail
這本書探討了輸出對於改變真實世界的重要性,作者著重於生活中的實踐,以及腦科學的概念,並鼓勵讀者擁有輸出的勇氣。
透過有限資源與Vision無限的矛盾,配合高速運轉的大腦建立出墊腳石,再善用保護好心地自然形成階梯。 理想就該這麼用。
Thumbnail
SUMIF是EXCEL中一個超級實用的統計函數,他可以依據指定的關鍵字進行加總。 SUMIF有條件加總 函數說明=SUMIF(條件範圍,條件,加總範圍) 但如果遇到很多個資料範圍,大多數的人就會使用很多個SUMIF計算後再相加,如下範例所示。 其實這樣多範圍的資料不需要3個SUMIF,
Thumbnail
理財大概是每個人都關心的話題,尤其一句著名廣告詞「你不理財.財不理你」更是把理財的重要性講得再貼切不過! 故事內容其實只圍繞在一個家庭:73歲的奶奶、55歲的媽媽、29歲已婚育有一女的姊姊以及24歲剛出社會不久的OL。 這設定很有意思,理財從學生時代(助學貸款開始),一直到73歲只要還有
Who would want to be a chief executive? 誰想成為執行長? 取材自紐約時報:By Ravi Mattu / Published May 14, 2023 / Updated June 9, 2023 ing應用分析
最近看到愈來愈多台灣人寫文章,會用「迎來」這個詞;但這個詞真的有點被濫用;姑且不論這個詞是中國用語,撇開這個不提,「迎來」都可以換成更好的說法。