iOS UIButton 的相片圖片伸展

Thomas Mak wrote at 2018-10-20.

#ios #lang-zh #swift

UIButton 的圖片如何做到相片圖片伸展?利用 Content Mode 設定圖片視圖(UIImgeView)為 Aspect Fill 或 Aspect Fit。

是可以的,只是這個設定不是直接放在 Interface Builder,而是要通過 Code 對 UIButton 內的 imageView 進行設定而已。

*注:contentMode 是 UIImageView 的,而不是 UIImage 的。原因是 contentMode 控制的是圖片的顯示框中圖片如何擺放,所以是 UIImageView 的屬性而不是 UIImage 的。

至於背景圖片,因為沒有 imageView,所以不能用 contentMode 的方法。我們可以直接設定 UIButton 的背景圖片為 ResizableImage,然後通過 .resizableImage(withCapInsets: UIEdgeInsets(top:, left:, bottom:, right:) 來實現。

UIButton 的前後景有這分別是因為前景圖片原意是 UIButton 作為 Icon 與文字並排使用的。而後景圖片則是 Button 的材質(Texture),所以前者有 UIImageView,後者則是一個放在文字後方的延伸至整個按鈕的 UIImage。

imageButton.imageView?.contentMode = .scaleAspectFill

imageButton2.imageView?.contentMode = .scaleAspectFit

let image = UIImage(named: "button.png")?.resizableImage(withCapInsets: UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10))
backgroundButton.setBackgroundImage(image, for: .normal)

Comments

no comments yet.