“`html

Swift 按鈕圖片與文字的上下排版教學

簡介

在 Swift 中，預設的 UIButton 會將圖片與文字並排顯示，但有時我們希望能夠將圖片放在上面，文字放在下面或相反。為了達成這個效果，我們可以透過擴展 UIButton 來自訂其排版方式。本文將教你如何在 Swift 中達成這個效果，並提供完整的實作範例。

宣告 UIButton

首先，我們需要創建一個 UIButton 並設定它的圖片與文字。以下是如何宣告 UIButton 並調用我們自訂的排版方法：

“`swift
let lineBtn = UIButton(type: .system)
lineBtn.setImage(UIImage(named: “your_image_name”), for: .normal) // 替換為你的圖片名稱
lineBtn.setTitle(“按鈕文字”, for: .normal)
lineBtn.centerImageAndButton(10, imageOnTop: true) // 設定圖片在上，文字在下
“`

擴充 UIButton

為了實現圖片與文字的上下排版，我們需要擴展 UIButton，並新增一個名為 `centerImageAndButton` 的方法。以下是完整的實作範例：

“`swift
extension UIButton {
func centerImageAndButton(_ gap: CGFloat, imageOnTop: Bool) {
guard let imageView = self.currentImage,
let titleLabel = self.titleLabel?.text else { return }

let sign: CGFloat = imageOnTop ? 1 : -1
self.titleEdgeInsets = UIEdgeInsets(top: (imageView.size.height + gap) * sign,
left: -imageView.size.width,
bottom: 0,
right: 0)

let titleSize = titleLabel.size(withAttributes: [NSAttributedString.Key.font: self.titleLabel!.font!])
self.imageEdgeInsets = UIEdgeInsets(top: -(titleSize.height + gap) * sign,
left: 0,
bottom: 0,
right: -titleSize.width)
}
}
“`

錯誤排除

在實作過程中，可能會遇到以下幾個常見問題：
1. **按鈕無法顯示圖片或文字**：檢查是否正確設置了圖片和文字，並確保圖片名稱無誤。
2. **排版效果不如預期**：確認 `gap` 參數是否符合你的需求，適當調整間距可以達到更好的排版效果。

延伸應用

我們可以進一步擴展 UIButton 的功能，例如：
– 添加不同狀態下的圖片與文字排版。
– 根據 UI 設計需求動態調整圖片與文字的位置。


按鈕圖片在上

這是一個示範按鈕，圖片在上，文字在下的效果。

Q&A（常見問題解答）

如何讓圖片在下，文字在上？

只需將 `imageOnTop` 參數設為 `false` 即可。

我可以使用自定義圖片尺寸嗎？

可以，請在設置圖片之前，先將圖片調整為所需的尺寸。

這個方法可以用於其他 UI 元素嗎？

此方法專為 UIButton 設計，但你可以根據需要進行調整以應用於其他 UI 元素。
“`
—

Categorized in:

swift