iOS中容易用錯的常用知識點

座標系轉換

ios中的座標系有三種

視圖座標系：原點(0,0)視圖的左上角

窗口座標系：原點(0,0)窗口的左上角

世界座標系：原點(0,0)遊戲中世界的原點

平時開發中經常會遇到轉UIWindow座標問題，如：已知一個UI控件的座標，把它轉換到UIWindow時，它對應的UIWindow座標是什麼？

蘋果提供了一套相關的轉換方法，但是它缺少了座標在轉換時會涉及到三個UIView, 方法中沒有對這3個UIView關係的描述，這在使用座標轉換時就很容易搞迷糊了。

open func point(inside point: CGPoint, with event: UIEvent?) -> Bool

open func convert(_ point: CGPoint, to view: UIView?) -> CGPoint

open func convert(_ point: CGPoint, from view: UIView?) -> CGPoint

open func convert(_ rect: CGRect, to view: UIView?) -> CGRect

open func convert(_ rect: CGRect, from view: UIView?) -> CGRect

舉例如下：

override func viewDidLoad() {
    super.viewDidLoad()
    
    view.addSubview(myButton)
    
    let center2 = view.convert(myButton.center, to: UIApplication.shared.keyWindow)
}

下面這件代碼的意思是將self.view下面的子視圖self.myButton的中點從它的視圖座標系中轉換到keyWindow的窗口座標系中時，得到的座標是什麼。

這句代碼種涉及到的三個UIView: self.view, self.myButton, keyWindow。其中self.myButton是self.view的子視圖。這層關係需要清楚，就避免迷糊了。

view.convert(myButton.center, to: UIApplication.shared.keyWindow)

 

自定義UIButton中Image和title的位置關係

UIButton中Image和title的位置座標是可以自定義調整的，弄懂了下面這些就不用經常在UIView裏套Image和Label來自定義視圖了。

前置條件

手寫UIButton時，ButtonType選擇custom，style設置爲Default(這個沒有找到設置的地方，在xib上有這項，實際上手動創建的代碼style默認就是Default)

使用xib創建的UIButton時，把它的plain改成Default。ButtonType設置成custom。

就是截圖中的上面2項：

已知概念

1.UIButton中的image和image現在默認是上下，左右居中，並且image和title在水平方向是挨着的。

btn.contentEdgeInsets = .zero
btn.imageEdgeInsets = UIEdgeInsets(top: 2, left: 2, bottom: 2, right: 25)
btn.titleEdgeInsets = UIEdgeInsets(top: 2, left: 12, bottom: 2, right: 2)

2.上面btn相關的EdgeInset值的設置的效果 是和css中的padding內邊距效果一致的。即：值>0內容向內縮，值<0內容往外擴展。

3.image和title具有中間挨着的特性，默認情況下，無論image左移多少，title都會跟隨左移多少，以滿足image和title中間挨着的特性。

4.對於設置的EdgeInset中的偏移量是相對於image和title在沒有設置任何偏移量時的默認狀態的偏移。

瞭解了上面這些概念就可以愉快的自定義UIButton中image和lable的位置了。

let btn = UIButton(type: .custom)
btn.frame = CGRect(x: 100, y: 80, width: 40, height: 20)
btn.setTitleColor(.white, for: .normal)
btn.setTitle("jack", for: .normal)
btn.titleLabel?.font = UIFont.systemFont(ofSize: 10)
btn.setImage(UIImage.init(named: "loveHeat"), for: .normal)
btn.backgroundColor = UIColor.black.withAlphaComponent(0.6)
btn.layer.cornerRadius = 4;
btn.layer.masksToBounds = true;
btn.imageEdgeInsets = UIEdgeInsets(top: 3, left: 2, bottom: 1, right: 25)
btn.titleEdgeInsets = UIEdgeInsets(top: 0, left: 1, bottom: 0, right: 0)
btn.isUserInteractionEnabled = false

 

圖層遮罩mask

在APP啓動引導頁或者APP中的氣泡彈窗時，經常會用到圖層的mask遮罩來自定義一些氣泡形狀。當向view.layer的mask屬性添加一個圖層屬性時，有時候會搞混亂，這兩個圖層都有內容，它們作用在一起後，最終的顯示效果是哪個展示，哪個不展示呢

view.layer.mask = maskLayer

簡單的理解爲：將view.layer中的頁面內容按照maskLayer的路徑進行裁剪。得出一個有一定路徑邊界的view視圖。

舉例如下：

let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 200))
view.backgroundColor = .red

let maskLayer = CAShapeLayer()
let path = UIBezierPath(ovalIn: view.bounds)
maskLayer.path = path.cgPath

view.layer.mask = maskLayer

這裏我們首先創建了一個紅色的 UIView，然後創建了一個圓形的 CAShapeLayer，將其 path 屬性設置爲一個內切於 view 邊界的圓形 UIBezierPath，最後將 view 的 mask 屬性設置爲這個 CAShapeLayer，這樣就實現了將視圖裁剪成圓形的效果。