[iOS] 스탠포드 CS193P 5강 - 2

Views

👉 뷰는 사각형의 공간을 나타냅니다. 공간은 좌표 시스템에 의해 정의되고 그려집니다. 그리고 터치 이벤트들을 처리하는 기능을 수행합니다.

👉 뷰는 계층적인 특징을 갖고 있는데 특정 뷰는 항상 하나의 superview를 갖고, subview를 갖고 있지 않거나 1개 이상 가질 수 있습니다.

👉 뷰들이 그려지는 순서는 최근에 subview로 추가된 뷰가 가장 위에 그려지게 됩니다.

👉 뷰는 subview의 겹치지 않은 부분을 자를 수도 있습니다. 자르지 않는 것이 기본입니다. (참고한 문장: A view can clip its subviews to its own bounds or not (the default is not to)). 

👉 UIView는 뷰 계층의 가장 위에 있습니다. UIView위에 UIWindow가 있긴 한데 UIWindow는 보통 iOS 앱에서는 한 개이고 기기의 외부 화면을 출력하지 않는 이상 다룰 일이 없습니다. 
CS193P 강의에서는 UIWindow를 다루지 않습니다.

---

 

UIView 초기화

UIView를 초기화 하는 방법 (뷰에는 다음의 세가지 초기화 방법이 있습니다.)

• init() 👉 UIView가 상속받은 UIResponder가 상속받은 NSObject의 init() 메소드가 호출된다
• init(frame: CGRect) 👉 코드로 뷰를 만들 때 호출하는 용도
• init(coder: NSCoder) 👉 스토리 보드에서 편집하고 앱이 실행될 때 호출하는 용도

위 초기화 메소드들은 클래스 인스턴스의 속성 값들을 설정하는 역할을 합니다. Optional 속성 값은 설정하지 않고 nil로 두어도 상관없지만 그 외의 속성 값들은 필수로 설정해야 됩니다.

awakeFromNib()

이 메소드는 초기화 메소드가 아니지만 초기화가 끝난 직후에 실행되는 메소드입니다. Only 인터페이스 빌더 파일에서 나온 뷰에서만 실행되는 메소드입니다. 그래서 init(coder: NSCoder) 가 실행된 후에 실행됩니다.
(🤔 TMI: NiB는 "NeXTSTEP Interface Builder" 의 약자입니다.)

---

 

좌표 시스템 구조 (Coordinate System Data Structures)

CG(Core Graphics)

CGFloat 👉 UIView의 좌표 시스템에선 항상 Double이나 Float이 아닌  CGFloat을 사용해야 됩니다.

let cgf = CGFloat(10.0)

CGPoint 👉 두 개의 CGFloat으로 이루어진 struct이고 x, y 값을 가집니다.

var point = CGPoint(x: 37.0, y: 55.2)
point.y -= 30
point.x += 20.0

CGSize 👉 두개의 CGFloat으로 이루어진 struct 이고 width, height 값을 가집니다.

var size = CGSize(width: 100.0, height: 50.0)
size.width += 42.5
size.height += 75

CGRect 👉 좌표와 사이즈 등을 사용해서 사각형을 나타내는 struct입니다. 초기화 방법은 아래 코드를 포함해서 여러 방법이 있습니다.

struct CGRect {
  var origin: CGPoint
  var size: CGSize
}
let rect = CGRect(origin: aCGPoint, size: aCGSize)

CGRect 초기화 방법

---

 

뷰 좌표 시스템 (View Coordinate System)

좌측 상단이 원점

origin
좌표의 원점(0,0)에 해당하는 위치는 좌측 상단이고 x 값이 증가하면 오른쪽, y값이 증가하면 아래쪽으로 가게 됩니다.

points
좌표계 단위는 points입니다. 픽셀(pixel)이 아닌 이유는 픽셀은 기기의 스크린을 구성하는 작은 점인데 각 기기의 ppi(Pixels Per Inch) 값이 다르기 때문입니다. 만약 뷰의 위치나 크기를 픽셀 값으로 정의한다면 아이폰 12 pro(460 ppi) 시뮬레이터를 사용해서 개발한 앱을 아이폰 11(326 ppi)에서 실행했을 때 뷰의 보이는 크기가 달라질 겁니다.

bounds
UIView에는 직사각형 속성을 나타내는 bounds 변수가 있습니다. bounds는 UIView가 그려지는 좌표계의 원점과 높이 너비를 알려주는 변수입니다.

var bounds: CGRect

 

Where is the UIView?
center 변수가 UIView의 해당 뷰의 superview의 좌표계의 center 좌표를 나타냅니다.
frame 변수는 superview 좌표계를 포함하는 직사각형을 나타냅니다.

var center: CGPoint
var frame: CGRect

 

bounds vs frame
bounds와 frame의 크기는 같지 않습니다. 아래처럼 View가 회전할 경우 bounds의 크기는 변하지 않지만 frame의 크기는 더 커지게 됩니다.

view가 회전할 때 frame의 크기가 변한 모습

Creating views

• 스토리보드를 활용하는 방법
  (강의에서는 이 방법을 대부분 활용한다고 합니다.)
• UIKit을 활용한 코드로 작성하는 방법

// Example
let labelRect = CGRect(x: 20, y: 20, width: 100, height: 50)
let label = UILabel(frame: labelRect) // UILabel is a subclass of UIView 
label.text = “Hello”
view.addSubview(label)

Custom views
draw(_ rect: CGRect)를 사용해서 커스텀 뷰를 만들 수 있습니다. 하지만 직접 호출하지 않고 아래의 두 함수를 통해 그릴 수 있습니다.

• setNeedsDisplay()
• setNeedsDisplay(_ rect: CGRect)

Core Graphic Concept

1. 그려 넣을 컨텍스트가 있습니다(다른 컨텍스트에는 인쇄, 오프스크린 버퍼 등이 포함됨). UIGraphicsGetCurrentContext() 함수는 그리기(CGRect)에서 사용할 수 있는 컨텍스트를 제공합니다.
2. 경로 생성(out of lines, arcs 등)
3. 색상, 글꼴, 텍스처, 라인 폭, 라인캡 등과 같은 도면 속성을 설정합니다
4. 위에서 만든 경로를 지정된 속성으로 강조 표시하거나 채웁니다.

위 순서에서 경로에 해당하는 것이 UIBezierPath 입니다. 아래는 UIBezierPath를 활용해서 삼각형을 그리는 모습입니다.

let path = UIBezierPath()
path.move(to: CGPoint(80, 50))
path.addLine(to: CGPoint(140, 150))
path.addLine(to: CGPoint(10, 150))
path.close()

 

---

 

Drawing Text

• Character 👉 문자
• String 👉 Character로 이루어진 콜렉션
• NSAttributedString 👉 텍스트 스타일, 하이퍼링크, 데이터 등의 속성을 가질 수 있는 문자열 클래스
• NSMutableAttributedString 👉 NSAttributedString에 컨텐츠를 변형시킬 수 있는 메서드가 추가된 클래스

// NSAttributedString
let text = NSAttributedString(string: “hello”)
text.draw(at: aCGPoint)
let textSize: CGSize = text.size

// NSMutableAttributedString
let pizzaJoint = “café pesto”
var attrString = NSMutableAttributedString(string: pizzaJoint)
let firstWordRange = pizzaJoint.startIndex..<pizzaJoint.indexOf(“ “)!
let nsrange = NSRange(firstWordRange, in: pizzaJoint)
attrString.addAttribute(.strokeColor, value: UIColor.orange, range: nsrange)

---

 

Drawing Images

UIImageView 를 사용해서 이미지를 그릴 수 있습니다. 이미지는 프로젝트 내에 Assets.xcassets 파일에 있는 이미지를 가져다 쓸 수 있습니다.

// Assets.xcassets 파일 안에 
// "foo" 사진을 찾아서 UIImage에 넣어줍니다
let image: UIImage? = UIImage(named: "foo")

사진의 해상도는 각 기기의 해상도에 맞춰서 조절할 수 있습니다. 1x 2x 3x 이미지를 따로 설정해줄 수 있고, 1개의 옵션에만 이미지가 설정되어있다면 나머지 옵션에 해당 이미지가 자동으로 들어가게 됩니다.

해상도별 이미지를 설정해줄 수 있습니다

Assets.xcassets 말고 파일 시스템에서 직접 불러오는 방법도 있고, 이미지 데이터를 직접 넣어주는 방법도 있습니다. 하지만 이 강의에서는 파일 시스템을 통한 이미지 삽입은 하지 않습니다.

let image: UIImage? = UIImage(contentsOfFile: pathString)
let image: UIImage? = UIImage(data: aData) // raw jpg, png, tiff, etc. image data

---

 

Redraw on bounds change

iOS에서는 뷰의 경계가 바뀌었을 때 새로 드로잉 하지 않습니다. 그래서 화면이 회전되거나 뷰의 요소의 크기가 변했을 때 따로 처리해줘야 합니다. contentMode 변수를 활용해서 처리를 해줄 수 있습니다. 

var contentMode: UIViewContentMode
contentMode는 뷰가 어떤 종류의 컨텐층를 갖고 있는지 나타냅니다. 뭉개져도 되는지, 경계가 바뀌었을 때 새로 드로잉을 하는지 등을 알 수 있습니다.

• Don't scale the view 👉 새로 드로잉 하지 않고 비트만 움직입니다. (거의 안쓴다고 합니다.)
• Scale the bits of the view 👉 비트를 늘이거나 줄여서 새로운 경계에 맞춥니다.
• Redraw by calling draw(CGRect) 👉 뷰를 다시 그립니다.

Layout on bounds change

서브 뷰가 있는데 경계가 바뀌었을 때는 보통 Autolayout constraints를 활용하거나 layoutSubviews() 메서드를 오버라이드 해서 사용합니다. layoutSubviews() 메서드를 활용할 땐 꼭 super.layoutSubviews()를 잊지 않고 같이 써줘야 합니다.

override func layoutSubviews() {
	super.layoutSubviews()
	// 서브 뷰의 위치를 새로운 경계를 따라서 재배치 한다.
}

 

참고자료

• https://sujinnaljin.medium.com/uiview-init-에-대하여-581c61726778
• https://jinios.github.io/ios/2018/04/15/customView_init/

• https://youtu.be/BuNDzuvqR9c