<스위프트 프로젝트> 커스텀 뷰 만들기!

<https://github.com/ChangYeop-Yang/Study-iOS/tree/master/%5BiOS%5D%20Kakao%20Pay%20Subject>

 

이 분 코드를 보고 해석하며 공부하는 중입니다. 감사합니다...... 

 

<https://github.com/ChangYeop-Yang/Study-iOS/blob/master/%5BiOS%5D%20Kakao%20Pay%20Subject/KakaoPaySubject/KakaoPaySubject/Custome%20Degin%20Files/CardView.swift>

 

CardView

 

이 코드를 플레이그라운드로 돌려보면서 이해보려 하는데 

 

//: A UIKit based Playground for presenting user interface
  
import UIKit
import PlaygroundSupport

@IBDesignable
class CardView: UIView {
    
    @IBInspectable var cornerRadius:        CGFloat = 3
    @IBInspectable var shadowOffsetWidth:   Int     = 0
    @IBInspectable var shadowOffsetHeight:  Int     = 3
    @IBInspectable var shadowColor:         UIColor = .black
    @IBInspectable var shadowOpacity:       Float   = 0.3
    
    override func layoutSubviews() {
        layer.cornerRadius  = cornerRadius
        layer.masksToBounds = false
        layer.shadowColor   = shadowColor.cgColor
        layer.shadowOffset  = CGSize(width: shadowOffsetWidth, height: shadowOffsetHeight)
        layer.shadowOpacity = shadowOpacity
        layer.shadowPath    = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
    }
}

class MyViewController : UIViewController {
    override func loadView() {
        /*
        let view = UIView()
        view.backgroundColor = .white

        let label = UILabel()
        label.frame = CGRect(x: 150, y: 200, width: 200, height: 20)
        label.text = "Hello World!"
        label.textColor = .black
        
        view.addSubview(label)
        self.view = view
        */
        let view = UIView()
        let cardView = CardView()
        view.backgroundColor = .white
        view.addSubview(cardView)
        self.view = view
    }
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

 

 

 

이렇게 하면 화면에 아무것도 안나온다 ㅋㅋ ㅠ 왜그런건지 알아보는중, 밑에 라운드 뷰 하다가 알았는데, cornerRadius가 너무 작아서 제대로 안그려진거다. frame.height/2 이런식으로 하니까 괜찬네.

 

찾던중 layoutSubview를 잘 몰라 찾아봤다. <https://oaksong.github.io/2018/03/02/layout-subviews/> 여기 설명이 자세하다

뷰컨에서 뷰를 변경 됬을때 하위 뷰까지 호출해서 오토 콘스트레인트에 따라 리사이징 한다는거 같다.

 

        cardView.frame = CGRect(x : 150 , y : 200 , width : 200, height: 20)

이 코드를 추가해서 프레임에서 위치를 지정해 주니

 

이렇게 이상하게 떴다 ㅋㅋ

 

지금 다시해 보는데, shadowColor가 CGColor여야 하는건가? UIColor와 CGColor의 차이가 뭐지? [https://zeddios.tistory.com/239]

음 요약하면 CGColor는 코어 그래픽에 관한것이고, UIColor는 UIKit 관련? ㅋㅋ;; 애플 문서를 다시 보자.

 

그래도 위에 블로그래에서 아래처럼 하면 된다는 것을 알았다.

        layer.shadowColor = UIColor.black.cgColor

지금은 [https://developer.apple.com/documentation/quartzcore/calayer/1410970-shadowoffset]

shadowOffset을 보고 있는데, 정확한 원리는 잘 모르겠다. 초기값이 0,-3이라함....

 

 

신기하네, shadow라는게 뒤에 그려지는 개념인듯?

음 그런데 layer.shadowPath를 주석처리 하니까 아래 처럼 뜬다. 저 UIBezierPath가 그림자의 길을 알려주나 보다.....

 

 

 

 

 

RoundView

cornerRadius를 변경하니 저렇게 됐다

 

self.layer.masksToBounds = false?

clipsToBounds 설명을 찾았다. [https://baked-corn.tistory.com/110]

 

layer는 UIView의 레이어 프로퍼티이다. CALayer에 대해서 읽어봤다. UIView를 지원하는 역할을 한다 함.

에니메이션 같은건 uikit이 coreAnimation에 위임하는 형태라 합니다. 즉 뷰에 에니메이션과 그림을 그리는건 CALayer의 역할입니다.

 

그리고 self.layer.masksToBounds와 clipsToBounds는 같은 기능이라 합니다. clipsToBound는 uiview에 속하고 , masksToBounds는 레레이어에 속하는 것이라 합니다.

 

이 둘의 역할은 섭뷰나 섭레이어가 슈퍼뷰의 경계에 잘려 가리게 할 것인지, 그냥 보여줄 것인지를 결정한다 합니다.  

 

둘다 엇갈리게 하면 어떻게 되나 궁금했는데 ,부모에서 설정한게 먼저 적용된다. clipsToBounds는

 

위의 동건님 블로그를 보고나니 CALayer 코어 레이어라는 것에 대해 궁금해서 애플 문서를 봤다.[https://developer.apple.com/documentation/quartzcore/calayer]

 

Overview

Layers are often used to provide the backing store for views but can also be used without a view to display content. A layer’s main job is to manage the visual content that you provide but the layer itself has visual attributes that can be set, such as a background color, border, and shadow. In addition to managing visual content, the layer also maintains information about the geometry of its content (such as its position, size, and transform) that is used to present that content onscreen. Modifying the properties of the layer is how you initiate animations on the layer’s content or geometry. A layer object encapsulates the duration and pacing of a layer and its animations by adopting the CAMediaTiming protocol, which defines the layer’s timing information.

 

음 대충 요약하면 뷰를 지원하는게 역할인데, 자체적인 시각 요소들을 가지고 있다 함. 예를 들면 배경색, 경계, 그림자, 그리고 시각 콘텐츠, 그리고 콘텐츠에 대한 기하 정보도 갖는다. 위치,사이즈,트랜스폼등.