[UIKit] autolayout, code base UI

2023. 11. 11. 02:02·iOS/UIKit

autolayout

레이아웃을 자동으로 계산해준다!

 

핵심

1. 뷰의 위치

- 가로 [x축]

- 세로 [y축]

- 앵커로 제공

 

2. 뷰의 크기

- 가로, 세로

- 앵커기반 스크린사이즈로 뷰의 크기 제공가능

 

위치 + 크기 -> autolayout -> 화면 렌더링

 

앵커를 왼쪽, 오른쪽에 설정하고 고정 너비를 주면 오류,,

왜냐! 앵커를 기준으로 계산해서 그리는데 고정 너비 값 때문에 충돌이 나기 때문임

 

 

코드로 autolayout 설정하기 예시

// ⭐️ 필수: 자동으로 autolayout 설정해주는 옵션 꺼주기
myView.translatesAutoresizingMaskIntoConstraints = false
// 최상위 view로 부터 top: 30, leading: 15, trailing: 15 띄우고 고정 height: 45
myView.topAnchor.constraint(equalTo: view.topAnchor, constant: 30).isActive = true
myView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15).isActive = true
myView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -15).isActive = true
myView.heightAnchor.constraint(equalToConstant: 45).isActive = true


// 위와 동일한 코드 isActive 하나하나 주기 귀찮을 때
NSLayoutConstraint.activate([
	myView.topAnchor.constraint(equalTo: view.topAnchor, constant: 30),
	myView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 15),
	myView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -15),
	myView.heightAnchor.constraint(equalToConstant: 45)
])

Y축 가운데 설정

myView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

 

 

모서리 둥글게 넣기

view.layer.cornerRadius = 5
view.clipsToBounds = true
// or view.layer.masksToBounds = true

 

 

클로저 형태로 속성 세팅하기

// addSubView까지 하고 싶다면 lazy 키워드 추가
private var myView: UIView = {
    let view = UIView()
    // 속성 세팅
    return view
}()

 

 

스택 뷰 생성

private lazy var stackView: UIStackView = {
    let stview = UIStackView(arrangedSubviews: [myFirstView, mySecondView, myButton])
    stview.spacing = 18                   // 간격 설정
    stview.axis = .vertical               // 정렬 축
    stview.distribution = .fillEqually    // 분배 설정
    stview.alignment = .fill              // 좌, 우, 가운데, 채우는 정렬
    return stview
}()

 

 

autolayout을 동적으로 조정한 후 애니메이션 주고 싶을 때

(오토 레이아웃을 설정을 한 것을 따로 변수에 넣어 놓고 그 변수에 접근해서 나중에 변경을 시키는 형식으로 가능)

UIView.animate(withDuration: 0.3) {
	self.myView.layoutIfNeeded()
}

'iOS > UIKit' 카테고리의 다른 글

[UIKit] 코드로만 로그인 화면 만들기, MVC 적용  (0) 2023.11.12
[UIKit] Alert  (0) 2023.11.12
[UIKit] TextField Delegate  (0) 2023.11.12
'iOS/UIKit' 카테고리의 다른 글
  • [UIKit] 코드로만 로그인 화면 만들기, MVC 적용
  • [UIKit] Alert
  • [UIKit] TextField Delegate
임구마🍠
임구마🍠
임구마🍠
임구마 블로그
임구마🍠
전체
오늘
어제
  • 분류 전체보기 (67)
    • iOS (13)
      • Swift (2)
      • SwiftUI (3)
      • UIKit (4)
      • Xcode (2)
      • WWDC (1)
    • SW 테스팅 (9)
      • CSTS (3)
      • ISTQB (5)
    • 네트워크 (5)
    • 자료구조 (2)
    • 알고리즘 (2)
    • 개인 공부 (29)
      • Git & Github (3)
      • 프로그래머스 (24)
      • 자격증 (2)
    • 기타 (7)
      • 원티드 프리온보딩 (1)
      • 취준 (1)
      • 컨퍼런스 (2)
      • 면접 (3)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

CSTS
또주세요
SQLD
자격증
네트워크 병목 현상
세션기반인증
jwt
ISTQB
SwiftUITutorials
토큰기반인증
나도 갈래
INFCON2023
colorLiteral
combinelastest
갈래요
인프콘
네트워크 성능 분석
EnvironmentObject
StateObject
쿠키기반인증
INFCON
SwiftUI
코드스니펫
wwdc19
imageLiteral
데이터바인딩
subscription
introducing
ObservedObject
인프콘2023

최근 댓글

최근 글

hELLO· Designed By정상우.v4.5.3
임구마🍠
[UIKit] autolayout, code base UI

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.