iOS - 실무관련/Auto Layout13 실습편 - Dynamic Font 이미지 크기에 따라서 text의 크기가 변경되는 인증서 실습을 해보겠다. [잘못된 방법의 예시 - 비율 문제] 1. image View를 화면에 놓고 인증이미지를 선택해준다. 2. cmd + = 을 눌러서 실제 이미지의 크기를 화면에 만들어주고 leading, trailing을 각 20씩 잡아주고 vertical정렬을 해준다. Content Mode에 대해서 scaleToFill: 이미지의 높이와 너비가 ImageView의 크기와 동일하게 늘어난다. AspectFit: 이미지의 가장 긴 부분(height or width)이 ImageView와 일치하도록 늘어난다. (이미지 왜곡x) AspectFill: 이미지의 가장 짧은 부분(height or width)이 ImageView와 일치하도록 늘어난다. (이.. 2022. 3. 27. 12. 코드로 컴포넌트 추가하기 1. 객체 생성 let myButton = UIButton.init(type: .system) //시스템 타입의 버튼 객체 생성 2. 타이틀 작성 myButton.setTitle("MyButton", for: .normal) //버튼의 title을 작성하고 일반 버튼으로 설정 3. addSubview self.view.addSubview(myButton) //현재 ViewController에 addSubview를 통해서 버튼을 올리는 것 현재까지의 코드 import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let myButton = UIButton.init(type: .sy.. 2022. 3. 27. 11. Botton [Button inset] Label과 다르게 버튼은 터치로 눌러야하기 때문에 Xcode자제에서 기본적으로 컨텐츠에 비해서 여백을 만들어준다. Label도 위아래 여백이 있는거 처럼 보이지만 여백이 없이 text에 딱 맞춰진 것이다. 따라서 Label에는 inset을 조절하는 부분이 없다. 버튼으로 돌아와서 버튼의 사이즈 인스펙터로 가면 Content insets이라는 부분이 있다. 이 부분을 통해서 버튼의 여백을 조정해보자. 현재 버튼의 위아래 여백은 있는데 왼쪽, 오른쪽의 여백은 없으므로 추가해보자. (좌우 10) 여백이 추가는 되었지만 컨텐츠의 크기가 줄어들었기 때문에 "Cmd + ="을 눌러서 여백과 컨텐츠에 맞는 버튼의 크기로 만들자. 이렇게 해주면 기본적으로 위아래 여백 + 양쪽 10씩의 여백.. 2022. 3. 27. 10. StackView StackView의 장점은 여러개의 컴포넌트를 정렬해야할 때 복잡한 Constraints를 단순화 시켜서 간단하게 만들 수 있다. StackView를 화면에 놓고 다른 컴포넌트들을 StackView위에 놓으면 StackView안에 컴포넌트들이 들어가게 된다. 하지만 위의 방식처럼 StackView에 컴포넌트를 추가하는 경우 View자체를 2개이상 추가했을 때 상위View에 View가 들어가서 중첩 View가 될 수 있다. 다음 방법으로 진행하면 오류가 나지 않게 만들 수 있다. [오류 없는 StackView] 1. StackView에 넣을 컴포넌트들을 우선적으로 화면에 배치해준다. 폰트와 글자 길이가 다른 Label 3개를 추가해주었다. 2. 추가한 컴포넌트를 모두 클릭하고 우측하단에 있는 Embed i.. 2022. 3. 27. 9. Margin 1. View를 추가하고 배경색을 바꿔준다. 2. Constrains를 모두 0으로 잡아준다. 이 때 우리가 항상 체크해제했던 Constrains to margins을 체크해준뒤 잡아준다. 딱히 달라진건 없다. marging을 체크한다는 것은 View안의 무언가를 넣었을 때와 관련있기 때문에 View 외부의 어떤 Constraints와는 관련이 없어서 아무 변화가 없다. View의 사이즈 인스펙터를 보면 아래와 같은 layout margins이 있다. layout marginsdml Defaults 값은 8이다. 무슨말인지는 아래의 과정으로 확인해보자. 3. 이제 새로운 View를 추가해서 margin을 체크했을 때랑 하지 않았을 때의 차이를 보자. [체크해제] [체크] "layout marginsdml.. 2022. 3. 27. 8. ScrollView ScrollView를 사용하는 상황은 이미지 또는 컨텐츠가 화면의 크기로 감당할 수 없을 때 사용한다. [큰 이미지를 스크롤 뷰로 보기] 1. 우선 이미지를 준비해서 imageView를 이용해서 이미지를 추가한다. (Content Mode: Scale To Fill) Editor - size to fit Contetnt을 클릭하면 아래와 같이 화면크기보다 이미지의 크기가 큰것을 확인할 수 있다. 이 크기를 우리는 스크롤 View를 이용해서 나타내보려고 한다. 이미지 크기는 다시 원래 상태로! 2. 해당하는 컨텐츠를 클릭하고 우측하단에 Embed in View - ScrollView를 클릭해준다. 3. 이제 ScrollView를 전체화면크기로 키우기 위해서 Constraints의 값을 모두 0으로 해준다... 2022. 3. 27. 7. Size Class 이번에는 핸드폰 화면 방향이 세로모드와 가로모드가 되었을 때의 오토레이아웃에 대해서 배워보자 1. 우선 위에는 버튼이 있고 아래에는 textView가 있는 화면을 구성해보자. 2. Constraints를 top 30 leading 30 trailing 30 bottom 30으로 잡아보자. 버튼이 잘 안보이기 때문에 색상을 넣어주자. HIG - Adaptivity and Layout - Size Class를 보면 [세로모드] width: Compact (작음) height: Regular (보통) [가로모드] width: Compact or Regular (Any) height: Compact (작음) 즉, 세로모드일 떄는 height: Regular 가로모드일 때는 height: Compact 라는 것을.. 2022. 3. 27. 6. priority★★★ priority: 우선순위 내가 우선순위를 설정했다는 것은 여러개의 컴포넌트들이 화면에 있을 때 우선순위가 높은 것들이 먼저 크기, 위치가 지정이 되고 낮은 것들은 나중에 지정이 되는 것이다. Content Hugging Priority: 주어진 크기보다 작아질 수 있다. Content Compression Resistance Priority: 주어진 크기보다 커질 수 있다. priority는 1부터 1000까지 설정할 수 있다. 수가 높을 수록 우선순위가 높은 것이다. 1000은 어떤 상황에서도 먼저 변화지 않는 상태를 만들어 놓는 것이다. [Hugging priority 실습] Content Hugging Priority: 주어진 크기보다 작아질 수 있다. 1. 화면에 Label 두개를 놓는다. 2... 2022. 3. 27. 5. Multiplier Multiplier: 곱, 비율 [Multiplier 개념] Multiplier는 쓰기가 까다로운 상황들이 있어 정확하게 알고 써야한다. 1. View를 추가하고 Contraints를 각 0으로 설정해서 화면에 꽉 차도록한다. (SafeArea내부에서 꽉차게) 2. View를 선택하고 Leading의 Multiplier를 조절해보자. 0.5(50%): 기존의 반 1(100%): 기존과 동일 2(200%): 기존의 두배 하지만 직접 조절해보면 아무런 변화가 없다. 그 이유는 Leading부분이 시작하는 곳이 0이기 때문에 0 * 0.5 = 0, 0 * 1 = 0, 0 * 2 = 0 으로 변화가 없다. 그러면 Constant를 조정해주면 변화가 생기지 않을까? 전혀 변화가 없다. 그 이유는 Constant는.. 2022. 3. 27. 4. Align Align: 정렬 화면에 새로운 두개의 View를 놓고 크기를 다르게 설정해보자. 노란색(200 200) 빨간색 (100 100) 크기에 대한 부분은 지정이 되었지만 위치에 대한 정보는 지정되지 않아서 오류가 뜬다. 그렇기 떄문에 아래와 같이 위치를 잡아보자. 노란색 (top: 20, leading: 20) [정렬해보기 - 2개] 이제 빨간 View를 노란 View와 정렬을 해보자. 1. 두 View를 동시에 클릭한다. 2. 우측 하단에 있는 align을 클릭해서 Top Edges, Leading Edges를 클릭해준다. 결과적으로 빨간색 View가 노란색 View의 top, leading에 맞게 정렬이 되고 크기는 아까 잡아둔대로 100 100으로 잡히게 된다. (Top Edges, Leading Ed.. 2022. 3. 27. 3. Constraints Equal Constraints Equal [두개 이상의 View의 Constraints] 위와 같이 UIView로 화면을 구성하고 4방향의 Constraints를 20씩 설정해주자. 여기서 Trailing의 Constraints는 화면으로부터 20의 Constraints가 잡히는 것이 아니라 노란색 View부터 20의 Constraints가 잡히는 것이다!!! [오류 발생1 - 왼쪽View, 오른쪽 View] Constraints을 잡게 되면 위와 같이 에러가 뜨는 것을 확인 할 수 있다. 그 이유는 노란색 View의 Constraints가 제대로 잡히지 않아서이다. 보라색 View의 Trailing은 노란색 View와 Constraints를 공유하기 떄문에 노란색 View 입장에서는 Leading이 잡히게 된다.. 2022. 3. 27. 2. SafeArea SafeArea Safe Area는 아이폰x부터 만들어졌다. 아이폰 11화면에 UIView를 올려놓고 가운데 정렬후에 bottom Constraints를 0, height, width는 기존의 크기로 해준다. [Bottom Constraints] 이렇게 설정을 하고 사이즈 인스펙터에서 bottom Constraints를 보면 Constraints가 0이 아닌 Safe Area로 되어있다. 즉, 화면자체에서 Constraints 0이 아니라 Safe Area 내부에서 Constraints 0이 기본적인 설정 값이다. [Top Constraints] 상단에도 똑같이 UIView를 추가해서 top Constraints 값을 0으로 해보자. 0으로 하게되면 bottom과 같이 Safe Area 내부의 Const.. 2022. 3. 27. 1. Constraints Constraints: 제약사항 우선 UIView를 아이폰11화면에 놓고 Constraints를 4방향으로 20씩 설정해보자. (margins은 체크를 해제해주자. margins에 대한 설명은 다른 챕터에서...) 설정을 모두 하게되면 아래와 같이 된다. 여기서 Constraints를 잘보면 왼쪽, 오른쪽으로는 디바이스의 끝까지 갔지만 위아래를 보면 어느정도의 영역을 두고 Constraints 20이 설정된 것을 볼 수 있다. 즉, SafeArea라는 영역 내에서 Constraints 20씩 설정이 된 것이다. 이제 UIView를 누르고 사이즈 인스펙터 영역을 보면 우리가 어떤 값으로 Constraints을 설정했는지 볼 수 있다. 사이즈 인스펙터를 보게되면 top, bottom, Leading, Tra.. 2022. 3. 27. 이전 1 다음