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 點,增加矩形的高度。

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

vocus|新世代的創作平台

正值的邊距

當你給 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))

    }

}
留言
avatar-img
Michelle Chen的沙龍
9會員
34內容數
紀錄iOS開發上遇到的問題或是一些流程筆記。主要都是Swift。
Michelle Chen的沙龍的其他內容
2024/09/06
本文介紹了使用KeyboardLayoutGuide的方法,以及在不同iOS版本和設備上遇到的佈局問題。透過調整TextView的底部對齊方式,成功解決了在模擬器和真實設備上出現的錯誤,提供了有用的建議給開發者。本文還探討了為何在iOS15與Xib的組合使用中會出現問題,以及解決方案。
Thumbnail
2024/09/06
本文介紹了使用KeyboardLayoutGuide的方法,以及在不同iOS版本和設備上遇到的佈局問題。透過調整TextView的底部對齊方式,成功解決了在模擬器和真實設備上出現的錯誤,提供了有用的建議給開發者。本文還探討了為何在iOS15與Xib的組合使用中會出現問題,以及解決方案。
Thumbnail
2024/08/07
使用者回報的超級奇怪線上問題,用數字鍵盤(NumberPad)更改欄位時,送出後尾數都會消失。例如:30 ⭢ 3,52 ⭢ 5。 尋尋覓覓了兩天終於被我找到這篇,apple的奇葩的bug 重現條件 iOS17 手機設定是繁體中文語系 前一個用過的鍵盤是Cangjie倉頡 or Suchen
2024/08/07
使用者回報的超級奇怪線上問題,用數字鍵盤(NumberPad)更改欄位時,送出後尾數都會消失。例如:30 ⭢ 3,52 ⭢ 5。 尋尋覓覓了兩天終於被我找到這篇,apple的奇葩的bug 重現條件 iOS17 手機設定是繁體中文語系 前一個用過的鍵盤是Cangjie倉頡 or Suchen
2024/07/03
這篇文章探討瞭如何在iOS應用程式中客製化Alert,包括改變字體大小、內嵌連結以及讓Alert的高度隨著字數增長並提供scroll操作。同時使用SwiftUI進行客製化,並介紹瞭解決高度超出範圍後文字捲動與scrollView固定高度的方法。
Thumbnail
2024/07/03
這篇文章探討瞭如何在iOS應用程式中客製化Alert,包括改變字體大小、內嵌連結以及讓Alert的高度隨著字數增長並提供scroll操作。同時使用SwiftUI進行客製化,並介紹瞭解決高度超出範圍後文字捲動與scrollView固定高度的方法。
Thumbnail
看更多
你可能也想看
Thumbnail
高中數學主題練習—求空間中直線參數式
Thumbnail
高中數學主題練習—求空間中直線參數式
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
本篇教學會詳細介紹條 (Bar) 的基本特性,以及在 UI 畫面上的應用,如拖曳、調整大小、空格限制等。此外,教學也針對不同的造型特性進行解說,包括橫向或縱向條、拖曳圖示 (thumb) 調整,以及無法滑動時的隱藏或顯示設定。
Thumbnail
本篇教學會詳細介紹條 (Bar) 的基本特性,以及在 UI 畫面上的應用,如拖曳、調整大小、空格限制等。此外,教學也針對不同的造型特性進行解說,包括橫向或縱向條、拖曳圖示 (thumb) 調整,以及無法滑動時的隱藏或顯示設定。
Thumbnail
UIEdgeInsets 是一個結構體,用來表示矩形的邊距。它通常在視圖佈局中使用,用於修改視圖的框架(frame)。邊距值可以是正數或負數,這會對矩形的大小產生不同的影響。 UIEdgeInsets 結構體 UIEdgeInsets 結構體包含四個屬性: top:矩形頂部的邊距 left:
Thumbnail
UIEdgeInsets 是一個結構體,用來表示矩形的邊距。它通常在視圖佈局中使用,用於修改視圖的框架(frame)。邊距值可以是正數或負數,這會對矩形的大小產生不同的影響。 UIEdgeInsets 結構體 UIEdgeInsets 結構體包含四個屬性: top:矩形頂部的邊距 left:
Thumbnail
高中數學主題練習—兩向量夾角
Thumbnail
高中數學主題練習—兩向量夾角
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
高中數學主題練習—點與圓之關係
Thumbnail
高中數學主題練習—點與圓之關係
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
高中數學主題練習—兩向量夾角
Thumbnail
高中數學主題練習—兩向量夾角
Thumbnail
在Excel中實作使用者介面(UI)是一個有趣且實用的技能,能夠幫助你更好地呈現資料、提供功能並增強使用者體驗。本文將逐步介紹如何在Excel中建立基本的UI元素,例如按鈕、下拉式選單和文字框,並擴展功能,例如資料驗證和動態更新。
Thumbnail
在Excel中實作使用者介面(UI)是一個有趣且實用的技能,能夠幫助你更好地呈現資料、提供功能並增強使用者體驗。本文將逐步介紹如何在Excel中建立基本的UI元素,例如按鈕、下拉式選單和文字框,並擴展功能,例如資料驗證和動態更新。
Thumbnail
高中數學主題練習—兩向量夾角
Thumbnail
高中數學主題練習—兩向量夾角
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News