利用 maskedCorners 設定部分圓角

想幫 iOS App 的元件設定圓角並不是太難的事,一般來說,只要以下兩行程式即可搞定,cornerRadius 設定圓角弧度,clipsToBounds 讓元件可以被切成圓角。

imageView.clipsToBounds = true
imageView.layer.cornerRadius = 30

但是如果只想要某一角有圓角呢 ? 這也做得到,只是有點麻煩。不過在 iOS 11,現在 CALayer 多了新屬性 maskedCorners,只要一行程式即可實現。

maskedCorners 的型別為 CACornerMask,定義如下。

public struct CACornerMask : OptionSet {
public init(rawValue: UInt)
public static var layerMinXMinYCorner: CACornerMask { get }
public static var layerMaxXMinYCorner: CACornerMask { get }
public static var layerMinXMaxYCorner: CACornerMask { get }
public static var layerMaxXMaxYCorner: CACornerMask { get }
}

如下圖所示,{ } 裡定義的四個變數,剛好對應長方形的四個頂點。比方 layerMinXMinYCorner 表示 X 和 Y 都是最小值,對應長方形的左上角。(因為 iOS 的座標系統,愈向右 X 愈大,愈向下 Y 愈大)

當我們希望只有左上角有圓角時,只要將 maskedCorners 設為 layerMinXMinYCorner 即可。

imageView.layer.maskedCorners = .layerMinXMinYCorner

想要多個地方圓角也不是問題。比方想要左上和右下都是圓角,只要在 [ ] 裡加入 layerMinXMinYCorner 和 layerMaxXMaxYCorner。

imageView.layer.maskedCorners = [.layerMinXMinYCorner, .layerMaxXMaxYCorner]

--

--

彼得潘的 Swift iOS App 開發問題解答集
彼得潘的 Swift iOS App 開發問題解答集

Published in 彼得潘的 Swift iOS App 開發問題解答集

彼得潘和學生們在開發 Swift iOS App 路上曾經解決的問題集

彼得潘的 iOS App Neverland
彼得潘的 iOS App Neverland

Written by 彼得潘的 iOS App Neverland

彼得潘的 Swift iOS App 程式設計入門,文組生的 Swift iOS App 程式設計入門,彼得潘的 Flutter 跨平台 App 程式設計入門講師,彼得潘的 Swift 程式設計入門,App程式設計入門作者,http://apppeterpan.strikingly.com

Responses (1)