[iOS] 뷰와 뷰의 계층구조

 

뷰 VIEW

• 사용자에게 보일 수 있는 객체
• 뷰는 UIView 의 인스턴스이거나 UIView하위 클래스의 인스턴스이다.
• 뷰는 자신을 어떻게 그리는지 알고있다.
• 뷰는 터치와 같은 이벤트를 처리할 수 있다.
• 뷰는 뷰 계층 구조상에 존재한다. 뷰 계층의 구조의 루트는 앱의 윈도우이다.

 

뷰 계층 구조

클래스 계층도

 

UIWindow

• 모든 앱은 하나의 UIWindow 인스턴스를 가진다.
• 앱의 여러 뷰들은 이 UIWindow인스턴스 내 포함된다.

 

앱 내의 view 인스턴스 포함관계

 

 

화면이 그려지는 과정

• 윈도를 포함한 각 계층 구조의 뷰는 자신을 레이어에 그린다.
• 모든 뷰의 레이어들은 전체 화면에 합성된다.

 

 

 

새로운 프로젝트를 만들어 확인하기.

 

 

뷰와 프레임

- 프로그램으로 뷰 생성하기

- 초기화(생성자) : init(frame: CGRect)

 

 

 

실습1. 코드로 파란색 사각형  view 만들기

 

-ViewController

//
//  ViewController.swift
//  WorldTrotter
//
//  Created by 이정민 on 2022/09/04.
//

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let firstFrame = CGRect(x: 160, y:240, width: 100, height: 150)
        let firstView = UIView(frame: firstFrame)
        firstView.backgroundColor = UIColor.blue
        
        view.addSubview(firstView)
    }


}

view.addSubView(fistView)에서의 view

• ViewController는 하나의 UIView인스턴스 view를 가지고 있다.
• 이 view가 메모리에 적재된 직후 viewDidLoad 함수가 호출 된다.

 

 

- 실행화면

- 위 코드의 뷰 계층 구조

 

 

실습 2. 코드로 다른 사각형 만들기

방법 1. 

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let firstFrame = CGRect(x: 160, y:240, width: 100, height: 150)
        let firstView = UIView(frame: firstFrame)
        firstView.backgroundColor = UIColor.blue
        view.addSubview(firstView)
        
        let secondFrame = CGRect(x:20, y:30, width: 50, height: 50)
        let secondView = UIView(frame: secondFrame)
        secondView.backgroundColor = UIColor.green
        view.addSubview(secondView)
    }
}

 

- 실행화면

- 뷰의구조

 

방법 2

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
		
        ...
        
        let secondFrame = CGRect(x:20, y:30, width: 50, height: 50)
        let secondView = UIView(frame: secondFrame)
        secondView.backgroundColor = UIColor.green
        firstView.addSubview(secondView)
    }
}

 

- 실행화면

- 뷰의구조

 

 

 

 

Main.storyboard 를 이용한 뷰의 계층 구조 만들기

 

 

다섯개의 라벨 생성

 

라벨 하나 클릭 후 size inspector에서 show Frame Rectangle선택

위 화면을 코딩으로 한다면 .... 

let firstFrame = CGRect(x: 186, y: 159, width: 28, height: 21)

 

view 의 show에는 Frame Rectangle, Alignment Rectangle 두 가지 옵션이 있고 그림과 같은 의미이다.

 

 

라벨 커스터마이징 : 배경색 설정

 

배경 뷰 선택

속성 인스펙터 > background > custom

View의 색이 변경된 것을 확인 할 수 있다.

 

 

라벨 커스터마이징 : 글자색변경

 

 

Color > custom  색변경

Font > T클릭 > System-System / 크기조절

 

 

 

 

 

 

 

오토레이아웃 시스템

 

 

절대좌표 레이아웃 <> 오토레이아웃

• 절대 좌표 레이아웃은 화면의 크기에 따라 변경된다.

정렬 사각형과 레이아웃 속성

• 오토 레이아웃은 기본적으로 정렬 사각형 (alignment  rectangle)을 기반한다.

오토 레이아웃

 

정렬 사각형과 프레임 차이

 

제약조건

• 뷰와 뷰 사이의 관계를 정의하는것이다.
• 모든 레이아웃에 대한 속성의 제약조건을 정의하는 것은 아니다.
  -> 다른 레이아웃 제약 조건으로부터 추론 될 수 있다. (변의 시작점과 넓이를 알면 변의 끝점은 계산으로부터 구해진다.)
• 제약조건이 부족하거나 상충하면 오토 레이아웃 시스템은 오류와 경고를 띄운다.
  -> 이를 무시하면 의도하지 않은 화면이 될 수 있다..
• 모든 제약조건의 기술은 가장 가까운 이웃을 기반으로 정의된다.

 

화면 상단에서 8포인트 떨어짐
상위 뷰 안에서 가운데 정렬
크기는 텍스트 너비와 같음

 

->  아래와 같이 제약조건을 구체화 시킬 수 있다.

 

라벨의 윗변은 가장 가까운 이웃(라벨의 컨테이너인 ViewController의 view)에서 8포인트 떨어져야 한다.
라벨의 중심은 상위 뷰 (라벨의 컨테이너인 ViewController의 view) 의 중심과 같아야 한다.
라벨의 넓이는 해당 폰트의 크기로 렌더링 된 텍스트의 너비와 같아야 한다.
라벨의 높이는 해당 폰트의 크기로 렌더링 한 텍스트의 높이와 같아야 한다.

 

 

인터페이스 빌더(storyboard)에서 제약조건 추가하기.

 

오토레이아웃 툴

오토래아

• update frames
• Align Tool
• Pin Tool
• Resolve Auto Layout Issues Tool
• Stack Tool

 

라벨 선택 후 

 

- 오토레이아웃 적용 후

 

Label("212")의 위치는 화면의 크기에 따라 유동적이나 크기는 명시적 제약조건(크기적용)으로 유동적이지 않다.

따라서 글씨가 길어질 경우 아래와 같이 글씨가 잘못된 표시( ... ) 로 보이게 된다.

 

 

컨텐트 고유 크기

• 라벨 : 적용된 폰트로 주어진 글자를 표시할 수 있는 최소한의 공간.
• 이미지 : 이미지 자체의 크기

 

도큐먼트 아웃라인에서 라벨에 적용된 Constraints하위를 모두 지우면 글씨 길어져도 잘 표시된다.

이제 실행시 폰트와 내용에 따라 크기가 변한다.

 

 

 

 

잘못 배치한 뷰.

암시적 제약 조건이 적용된 상태에서 Label의 크기를 변경할 경우

-> 뷰를 선택 후 update frames를 클릭하면 다시 컨텐트 고유 크기로 변경된다.

 

update frames 방법1. 

 

update frames 방법2. 새로고침 같은 첫번째 버튼 누르기.

 

 

여러 제약조건 추가

1. 모든 제약조건 없애기

label선택 > "Resolve ... " 클릭 > clear constrains클릭

 

2. 상단 label중앙정렬

Align > Horizontally in Contrainer

 

3. 모든 Label 제약 조건 적용

모든 라벨 선택

Add new contrains선택 > 상위여백 8

Align에서 Horicontal Centers선택.

 

 

 

 

Pixel 

 

Pixel의 단점

• 화면의 크기는 일정하나 픽셀 수는 많아지고 있다.(고화질)
• 따라서 픽셀로 이미지를 나타내는 경우 동일한 크기의 화면에 대하여 그림은 작게 보이게 된다.

Pixel의 단점 극복 : Point

• 1point = N pixels와 같이 타겟폰에 따라 N을 변화시키고 프로그래밍은 타겟폰에 관계없이 하기.

Point에 따른 유동적인 Pixel

 

 

 

+ 문제해결

add new constraints disabled 상태로 아래의 사진처럼 Pin툴을 사용하여 오토레이아웃을 사용 못하는 경우가 있다.

 

Size Inspector에서  Layout을 Inferred로 설정하면 Pin툴을 사용하여 오토레이아웃을 활용 할 수 있게된다.

 

 

 

 

---

 

 

https://bomcomes.tistory.com/17

Xcode10 스토리보드 살펴보기

https://velog.io/@yooyeri/iOS-Auto-Layout

iOS Auto Layout

https://jinshine.github.io/2018/06/07/iOS/%EC%98%A4%ED%86%A0%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83(AutoLayout)%EA%B3%BC%20Layout%20%EA%B0%9C%EB%85%90/ 

[iOS] 오토레이아웃(AutoLayout)과 Layout 개념 - jinShine

https://baechukim.tistory.com/21

[iOS] 오토레이아웃(Auto Layout)의 모든 것 - 2