[스탠포드iOS] View

1. View

View는 좌표공간

위계구조를 가지고 있음

서로 겹칠수도 있음

모든 뷰는 하나의 슈퍼뷰를 가짐

여러개의 자식뷰를 가질 수 있음

 

* UIWindow

The UIView at the very, very top of the view hirearchy(even includes status bar)

가장 상위의 뷰 계층에 존재

앱마다 한개씩 존재

 

뷰를 넣고 빼는 동작을 하는 함수

addSubview는 부모뷰에, removeFromSuperView는 삭제될 그 뷰에 호출

addSubview(aView: UIView) //sent to aView's(soon to be) superview
removeFromSuperView() 	  //this is sent to be the view you want to remove(not its superview)

ViewController는 view라는 변수를 가지고 사용하지 않았음

하지만 최상위 계층 UIView로 향하는 포인터임

최상위뷰는 bounds가 바뀌는 뷰

ex) 기기 회전 시 최상위 뷰 bounds 변경 - 안에 있는 요소의 재배치 일어남

var view: UIView

UIView 초기화

생성자는 피하는 것이 좋음

변수선언으로 초기화 불가할때도 있음 - 중요 생성자 두개 있음

init(frame: CGRect)
init(coder: NSCoder)

init(frame: CGRect)

- 뷰를 코드에서 만들때 호출

- frame은 superView안에서의 위치. 뷰가 어디에 있을건지 입력

init(coder:NSCoder) 

- 스토리보드에서 뷰를 만들때 사용

func setup() { ... }
override init(frame: CGRect) { 	//a designed initializer
	super.init(frame: frame)
    setup()
}

required init(coder aDcoder: NSCoder) { //a required initializer
	super.init(coder: aDecoder)
    setup()
}

required init은 필수 구현 필요(스토리보드에서 뷰를 구현하지 않더라도!)

모든 뷰는 NSCoding 프로토콜을 준수하기 때문에 require init을 구현해야 함

setup함수에 모든 초기화 관련 코드를 넣어 놓고 2개의 생성자를 override

→ 그 내부에서 setup함수 호출하도록 하는게 좋음

 

※ 내용 참고한 블로그

required init / init(frame, coder) 차이 : https://eun-dev.tistory.com/41

 

awakeFromNib()

스토리보드에서 나오는 모든객체에 호출 가능(코드에서 객체생성일땐 호출되지 않음)

2. CGFloat

드로잉할 때 값은 CGFloat

let cfg = CGFloat(aDouble)

3. CGPoint

x, y좌표. 하나의 점(좌표)을 나타냄

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

4. CGSize

width, height. 너비와 높이를 나타냄

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

5. CGRect

직사각형의 시발점, 직사각형의 크기를 가지고 있음

struct CGRect{
    var origin: CGPoint
    var size: CGSize
}

let rect = CGRect(origin: aCGPoint, size: aCGSize)

var minX: CGFloat //최소 x
var midY: CGFloat //가운데 y
intersects(CGRect) -> Bool //CGRect가 다른 직사각형이랑 교차하는지
intersect(CGRect) //겹치는 부분 가져오기
contains(CGPoint) //CGPoint를 포함하고 있는지

6. View Coordinate System(드로잉 좌표계)

origin

왼쪽 최상단에 위치

드로잉에 사용되는 모든 단위들은 포인트라고 부름(포인트는 픽셀이 아님)

 

bound vs frame

bound는 드로잉할 때 사용되며 자체적인 좌표계를 가짐

frame은 슈퍼뷰의 좌표계 상 뷰를 완전히 덮는 직사각형

슈퍼뷰 안에 뷰를 넣는다면 그 뷰의 frame을 지정해줘서 특정위치에 넣을 수 있음

frame과 bound의 높이와 너비 같지 않음 - View 회전 가능

 

center

슈퍼뷰 좌표계 기준 정중앙

var bounds: CGRect
var frame: CGRect
var center: CGPoint

7. Creating Views

뷰 생성 및 label 서브뷰로 생성

let newView = UIView(frame: myViewFrame)
let newView = UIView() (frame will be CGRectZero)

let labelRect = CGRect(x: 20, y: 20, width: 100, height: 50)
let label = UILabel(frame: labelRect)
label.text = "Hello"
view.addSubView(label)

드로잉 할 때 사용하는 메소드

drawRect

하나의 인자만 받는데 최적화를 할 때 사용(시스템이 호출)

시스템이 뷰 어느 부분을 그리고 싶은지 말해줌

override func drawRect(regionThatNeedsToBeDrawn: CGRect)

하지만 drawRect는 직접 호출해서는 안됨

뷰를 다시 그리는 함수에는 아래 두 가지가 있음

setNeedsDisplay() //뷰가 다시 그려질 필요가 있다고 말함
setNeedsDisplayInRect() //직사각형 부분만 다시 그려질 필요가 있다고 말함

drawRect 실행 방법

(1) Core Grapics

(2) UIBezierPath

밑단에서는 공통으로 Core Grapics로 동작

 

Core Grapics

(1) 그릴 수 있는 Context가 필요 : UIGraphicsGetCurrentContext()

(2) Path 생성(호, 직선, 공간 등)

(3) 경로를 그리는데 필요한 속성 설정(컬러, 폰트, 선굵기 등)

(4) 경로가 있는 곳에 선을 그리거나 경로로 닫힌 영역에 선이나 텍스쳐로 채움

 

UIBezierPath

자동으로 Context처리 가능

lineto, arcs 등 함수 존재

UIColor로 색을 채우거나 선을 그리거나 함

8. Drawing

UIBezierPath 사용

UIColor에 호출해서 색을 채우고 선색을 채운다. (UIBezierPath 아님)

//트라이 앵글 그리기
let path = UIBezierPath()
path.moveToPoint(CGPoint(80, 50))
path.addLineToPoint(CGPoint(140, 150))
path.addLineToPoint(CGPoint(10, 150))
path.closePath()

//attributes 지정
UIColor.greenColor().setFill() //내부를 채울 색
UIColor.redColor().setStroke() //선색
path.lineWidth = 3.0 //선 두께 설정
path.fill() 	//색이 채워짐
path.stroke()	//선이 생김

Cliping

모서리가 둥근 사각형을 만들고 clipping path로 설정

카드를 그린다면 모서리는 그려지지 않고 깎여나감

addClip()

Hit detection

한 점이 삼각형 안에 있는지 없는지 알 수 있음

func containsPoint((CGPoint) -> Bool

9. UIColor

let green = UIColor.greenColor()

greenColor()라는 것은 타입 메소드임 (static class func greenColor())

 

UIView의 백그라운드 설정

투명도 설정 가능 (alpha값 0 - 완전 투명, 1 - 완전 불투명)

투명한 뷰를 그린다면 opaque값을 false로 해주어야 함(기본적으로 모든것을 불투명하다고 가정)

var backgroundColor: UIColor
let transparentYello = UIColor.yellowColor().colorWithAlphaComponent(0.5)
var opaque = false
var alpha: CGFloat //뷰 자체에 알파값 설정하면 전체를 투명하게 할 수 있음

불투명한 뷰가 없고 투명한 뷰를 그렸을 때 

subView 리스트는 하위리스트의 첫번째 뷰를 맨 뒤로 보내는 순서로 되어있음

하위뷰 리스트는 하위뷰를 추가하면서 만들어지는데 addSubView를 할 때 앞에 놓여짐

insertSubViewAt : 원하는 위치에 뷰를 넣을 수 있게 해줌

 

뷰 숨기기

hidden값을 true라고 설정

hidden을 true로 설정하면 어떠한 터치이벤트도 받지 않음

특정 상태일때만 보이는 뷰가 필요할 때 사용

var hidden: Bool