# AutoLayout
내일배움캠프 7기 Day52 TIL (1)
코드베이스 UI 만들기 >#### ❗️ 주의사항 ❗️Main Storyboad를 삭제시 앱에서 확인이 불가하니 삭제하시 마시라 ① 우선 원하는 VC에 View를 선언해준다. ② 클래스 내에 UI를 표시하는 함수를 만들어준다. ③ 기본 View 위에 ①에서 선언한 View를 추가하여 층층이 쌓아가는 형식. ④ ①에서 선언한 View에 걸려있는 AutoLayout 기능을 해제해준다. ⑤ ①에서 선언한 View.왼쪽(leading)/오른쪽(trailing)/위(top)/아래(bottom)에 원하는 값을 지정하여 제약(constraint(equalTo:constant:)), 앵커(Anchor:닻)를 걸어 지정해준다. ⇒ .isActive = true 하여 활성화를 시켜준다. 전체 코드 👇👇 
[AutoLayout] IntrinsicContentSize, Hugging/Compression Priority
이번에는 그동안 미루고 있던 AutoLayout에 대해 공부를 하려고 합니다. Constraints를 통해 AutoLayout을 사용하는 것에는 문제가 없지만, 그동안 IntrinsicContentSize나 Priority 등의 이해 없이 무식하게 AutoLayout을 사용한 것 같아서 오늘 제대로 이해해보는 시간을 갖겠습니다. IntrinsicContentSize > 뷰에서 자기 자신이 표현해야 할 콘텐츠의 '자연스러운' 크기 IntrinsicContentSize는 UIView의 서브클래스 중 일부가 가지는 속성으로, 뷰에서 자기 자신이 표현해야 할 콘텐츠의 자연스러운 크기를 나타냅니다. 이 크기는 Autolayout 시스템에서 사용되어 뷰의 크기를 결정하는데 도움이 됩니다. 예를 들어, UILa
코드로 autoLayout 적용하기(SnapKit)(nft프로젝트)
이번 프로젝트를 진행하면서 가능한 코드로 UI를 그려보려고 했다. 📱 결과 화면 🚨 기존 코드 AutoLayout코드 가운데 UIImageView 제약조건 설정 코드 테두리를 나타내는 UIView 제약조건 코드 📖 공부 내용 1. translatesAutoresizingMaskIntoConstraints > iOS에는 Autoresizing이라는 개념이 있다. Autoresizing은 superView의 bounds가 변할 때 subView의 크기를 재설정 하는 것이다. AutoresizingMask을 사용하여 Autoresizing을 한다. 하지만 Autolayout과 같이 사용하
[SeSAC] iOS week1 05
파일 이동 finder에서 이동하는 게 아니라 Xcode 네비게이터 상에서 이동하는 게 안전하다 폴더링 Info는 위치를 변경해주면 build setting을 건드려야 하는 경우가 있어서 기본 위치에 두는 것을 권장한다 파일 삭제 Finder & Project project에서 보이는 파일들은 finder에서도 찾을 수 있음 **Move to Trash ** finder의 원본까지 깔끔하게 삭제 됨 **Remove Reference ** project에서는 날라가지만 finder에서는 살아있음 같은 이름으로 파일을 생성하지 못하는 등의 이슈가 발생할 수 있음 Remove Reference는 왜 있을까? 중요한 파일을 날
자동 레이아웃 정의 및 설정해보기
자동 레이아웃이란? 기기의 디스플레이 크기와 관계없이 동일한 레이아웃을 구현하는 기능이다. 자동 레이아웃 기능을 사용하면 이미지 뷰의 상,하,좌,우 여백이 알맞게 설정되어 디바이스가 바뀌어도 해당 디바이스의 여백에 맞게 배치된다. 미리보기(Preview) 디바이스마다 적용된 내용이 잘 나오는지 확인할 수 있게 제공되는 기능이다. 아래와 같은 상황에서 코드창에 커서 선택 후 ⌥+⌘+⏎ 키 입력하면 미리보기 창이 열린다. 미리보기 창에서 하단 + 버튼을 선택하면 보고싶은 디바이스 기종을 선택할 수 있다. 
AutoLayout 하는 법 3가지! (codebase)
AutoLayout을 코드로 작성하는 방법에는 3가지 방법이 있습니다 이 화면을 구현해볼거에요 > pinkView는 위에서 80, 좌우 간격 10 pinkView 20밑에 grayView 좌우간격 40 일단 기본설정 !! 이제 하나하나씩 살펴보죠 NSLayoutConstraint NSLayoutConstraint를 생성했을때 초기 코드 입니다. > item: 제약을 지정할 UI attribute: 제약을 지정할 UI의 제약 속성 relatedBy: 제약을 지정할 UI와 제약의 기준이 되는 UI 사이의 관계 toItem: 제약의 기준이 되는 UI attribute: 제약의 기준이 되는 UI의 제약 속성 multiplier: 제약의 비율 constraint: 제약의 상수값 대충 감이 오시
AutoLayout 적용
iPhone 14 Pro > ### iPone SE (3th generation) > ### iPad (10th generation) > #### 가로모드 >
AutoLayout
Autolayout 기존의 Frame-Based Layout과 다른 View들 간의 관계를 이용, 즉 제약조건(Constraint)을 이용하여 View의 위치와 크기를 동적으로 결정한다. 사용자 인터페이스(User Interface)를 배치하는 3가지 방법인 프로그래밍방식, autoresizing masks방식, Auto Layout방식 중 하나다.다른 2개의 방법과 달리 View들 간의 관계를 이용하기 때문에 뷰의 변경시 모든 뷰들을 일일히 변경할 필요가 없기 때문에 3가지 방법 중 유지 보수성이 제일 높다. 우선순위는 1~1000까지 있으며, 우선순위에 따라 적용되는 제약조건이 달라진다. 우선순위는 1000이 제일 높다. 왼쪽부터 위치를 정하는 Leading, 오른쪽부터 위치를 정하는Trailing, 위쪽부터 위치를 정하는 Top, 아래쪽부터 위치를 정하는 Bottom이 있으며, 이 외에도 길이의 중간인 CenterX와 높이의 중간인 CenterY가 있다.
🥛 Layout: iOS_Storyboard @Rising Camp1
본 내용은 학습을 목적으로 정리 된 내용으로 일부 틀린 내용이 있을 수 있습니다 🙏🏻 정의 iphone or ipad 등 target으로 하는 기기 디스플레이에 구현시킬 화면. Safe area: 화면에 일정 여백을 두어 내용이 깨지는 것을 방지 Margin: 일정 크기의 여백 AutoLayout Layout의 Margin을 편하게 지정해주는 기능 Xcode를 사용하여 Layout을 구성 할 때에 Margin을 지정하는 여러 방법이 있는데, iphone의 종류 혹은 ipad의 종류가 바뀌어도 일정 Margin을 유지한 상태로 만들어주기에 필수로 사용하는 기능이라해도 과언이 아니다. Code로 AutoLayout 설정 >referance https://developer.a
[iOS] AutoLayout
[패스트캠퍼스] 30개 프로젝트로 배우는 iOS 앱 개발 with Swift 초격차 패키지 Online을 학습하면서 나오는 이론 내용과 공식 문서에서 필요한 내용을 발췌하여 정리한 글입니다. > Part2. Basic 1. 명언 생성기 앱 만들기 AutoLayout >AutoLayout은 제약 조건(Constraints)을 이용해서 뷰의 위치를 지정하는 것이다. (두 View의 사이의 관계를 제약조건을 이용해서 뷰의 크기와 위치를 지정하는 것) 아이폰의 다양한 해상도 비율에 대응하기 위해 나온 개념으로 여러 해상도에서 화면을 똑같이 보여주기 위해 AutoLayout을 사용한다. 세로 보기뿐만 아니라 가로보기 화면도 지원한다. Stroyboard iOS에서 AutoLayout을 이용한 화면 구성은 Storyboard에서 확인할 수 있다. >Xcode File N
Stackview in ScrollView
사용처 iOS StackView는 구성에 따라 가로 또는 세로로 View를 쌓아주는 좋은 녀석이지만, 같은 사이즈로 뷰를 연속적으로 쌓기에는 그리 좋은 View가 아니기도 하다. 특히 Scroll이 되지 않는 다는 점은 꽤나 아쉬운 점인데, StackView를 ScrollView로 감싸면 이 문제를 해결 할 수 있다. 생각보다 자주 쓰는 방식이라 이것을 포스팅해둔다. ScrollView 먼저 스크롤 뷰를 추가하고, Constraints를 지정하여 뷰의 외부 사이즈를 잡는다. 보통은 전체 영역을 잡을 테니 이런 식으로.
RC 1st WEEK(3)-스토리보드 컴포넌트 및 AutoLayout 개념 조사
기록용으로 하는 포스팅입니다. 
AutoLayout + Component
플러그인 활용하기. 직접 outline, round 값까지 설정할 수 있다 아이콘 불러온 후 컴포넌트로 변환하면 해당 아이콘의 속성이 Frame가 되는 것을 알 수 있다. 해당 아이콘을 확대 축소 할때, 흰색 부분이 함께 리사이징 되기 위해선 Constraints 값 설정시 Scale로 설정하면 된다. 오토 레이아웃 기능 활용하기! 
Snapkit - iOS Library
Snapkit 깃허브 링크 Documents Snapkit이란? 기존의 Auto Layout을 조금 더 간결한 코드로 작성할 수 있도록 도와주는 라이브러리 편리한 것은 잘 모르겠고, 코드 수는 조금 줄일 수 있다... 기존의 AutoLayout 코드 Auto Layout을 코드베이스로 정해줄 때, 중요한 개념은 바로 크기와 위치를 정해주면 된다는 점이다. Snapkit이 레이아웃을 잡는 것을 편하게 도와주기는 하지만, 오토레이아웃에 대한 기본적인 이해가 없으면 이해하는 것에 어려움을 겪을 수 있을 것 같다. >
[Xcode] AutoLayout
Layout을 구성할 때 사용되는 3가지 주요 접근 방식은 다음과 같습니다. Frame-Based Layout Autoresizing masks AutoLayout 이 중에서도 AutoLayout에 대해 살펴보도록 하겠습니다. AutoLayout이란? View에 주어진 Constraints(제약 조건)에 따라 뷰의 크기와 위치 등을 동적으로 계산하여 배치는 것입니다. 뷰의 외/내부의 변화에 동적으로 반응하여 UI를 구성합니다. 제약 조건을 이용해 UI 정의 View 간의 관계 설정을 통해 크기 및 위치 계산 외/내부 변경 사항에 동적으로 반응 Frame 기반에 비해 느린 퍼포먼스 등을 AutoLayout의 주요한 특징이라고 할 수 있습니다. View의 속성 먼저 View의 속성에 대해 살펴봅시다. <img src="https://velog.velcdn.com/images/ihavebomin/post/1f8c298
[iOS] Storyboard Component & AutoLayout
Storyboard iOS 어플리케이션의 UI 흐름을 시각적으로 표현한 것으로 화면의 내용과 화면과 화면간의 연결을 보여준다 Storyboard는 ViewController와 View로 이루어진 Scene의 집합으로 이루어졌다. Scene들은 두 개의 ViewController의 전환을 나타내는 segue 객체로 연결 되어있다. UIComponent 프론트엔드에서 작동하는 다양한 컴포넌트들을 묶어 직접 구현하지 않아도 바로 사용할 수 있도록 제공하는 라이브러리 Label UILabel 한 줄 이상의 텍스트를 보여주는 오브젝트 Button UIButton 사용자 상호 작용으로 액션을 취할 수 있는 오브젝트 Segmented Control `UISegmentedC
iOS Autolayout
Apple은 지금까지 iPhone 3G ~ iPhone 14 Pro Max에 이르기까지 많고 다양한 크기의 iPhone을 출시하였다. 하지만 크기별로 어플리케이션을 다시 만들 수는 없는 법. 따라서 Xcode에서는 Storyboard와 Code를 통해서 자동으로 크기를 조절할 수 있도록 설정할 수 있다. Autolayout Autolayout은 두 가지 방식으로 설정할 수 있다. 하지만 그 전에 Autolayout의 구성요소부터 알아보자. Anchor 속성 View들은 다양한 값들을 가지는데, Autolayout을 하기 위해서는 총 6개의 Anchor를 알아야 한다. Leading: 왼쪽 부분 Trailing: 오른쪽 부분 Top: 위쪽 부분 Bottom: 아래쪽
Mysteries of Auto Layout, Part 2
Mysteries of Auto Layout, Part 2 2번째 파트입니다. The Layout Cycle 앱 실행하고 엔진 걸쳐서 레이아웃이 완성된다. 이전에 보여준 프로세스다. 사이클이 이렇게 이루어져 있다. Run loop으로 시작해서 레이아웃 변하는것을 계산하고 그다음에 구조에서 이를 확인하고 업데이트 시킨다. 간단한 예시 먼저 constraint를 수정하면 레이아웃 엔진이 이를 알게 되고 이미 이곳에서 변한것을 알게되지만 UI에서 업데이
Mysteries of Auto Layout, Part 1
WWDC Mysteries of Auto Layout, Part 1 > Auto Layout is a powerful constraint-based layout engine that can drive complex and dynamic interfaces on both iOS and OS X. AutoLayout은 constraint-based 레이아웃 엔진이다. StackView StackView는 자식 레이아웃을 알아서 관리하기 때문에 제약을 간소화할 수 있다. stackView로 axis에 따른 alignment와 distribution을 설정할 수 있다. alignment horizontal vertical