iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 27
0
Mobile Development

想知道自己iOS具現化系能力有多強嗎?實作幾個App就知道了系列 第 27

Day27-更改UIButton的Image大小,代誌不是你想的這麼簡單

上一篇提到設置了一個Sign In With Apple的按鈕,是使用UIButton裡面的Image以及Title屬性來設置的。


一開始我想設定以及調整Image的大小,因為這個大小與我所預期的不符,而導致這種情況的原因有以下兩點:
1.當圖片比按鈕小的時候,會顯示圖片本身的大小,例如按鈕是100x100,圖片是20x20,則圖片顯示20x20
2.當圖片比按鈕大的時候,圖片則變形並且塞滿按鈕本身


其實我試過很多方法來調整圖片大小,設定UIImageViewcontentMode,但是並沒有很完美的解決我的問題,再來也用過CGRect來設置UIImageView的大小,但是這個方法無效,好了!!以下進入正解!

我遇到的情況是第二個,當時我的解法是,將那張圖片的解析度從1024x1024調整到我需要的解析度64x64,調整完之後再重新丟到素材庫(Assets.xcassets)
https://ithelp.ithome.com.tw/upload/images/20201012/20129144CwikYS0nPk.png

讓圖片比按鈕小,圖片就顯示64x64


第二種方法則是使用UIEdgeInsets來更改Image的大小,我重新制定一個類別專門用來更改圖片大小:

@IBDesignable class ResizeImage: UIButton
{
    
    @IBInspectable var topInsets: CGFloat = 0.0
    @IBInspectable var leftInsets: CGFloat = 0.0
    @IBInspectable var rightInsets: CGFloat = 0.0
    @IBInspectable var bottomInsets: CGFloat = 0.0
    
    override func layoutSubviews()
    {
        super.layoutSubviews()
        imageEdgeInsets = UIEdgeInsets(top: self.topInsets , left: self.leftInsets, bottom: self.bottomInsets, right: self.rightInsets)
    }
}

此時在StoryBoard上可以更改圖片大小了,我先把按鈕的背景設為灰色,這樣看的時候比較明顯:
調整按鈕圖片大小


上一篇
Day26-玩弄一下IBDesignable與IBInspectable來方便設置漸層功能
下一篇
Day28-讓Xcode與模擬器並排顯示在同畫面
系列文
想知道自己iOS具現化系能力有多強嗎?實作幾個App就知道了30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言