2022_iOS 앱 개발자 워크숍/2, Auto Layout12 Auto Layout : 개인 프로젝트에 적용해보기 이번에는 제가 개인적으로 만들었던 프로젝트에 오토레이아웃을 적용시켜보겠습니다. 간단하게 프로젝트를 소개하자면 외국인을 위해 대한민국을 소개하는 앱이며 맛집 소개해주는 기능과 도시별 소개영상, 화씨,섭씨 변환 기능을 갖춘 앱 입니다. 먼저 Main.storyboard 입니다. 지금은 어느 제약조건도 추가하지 않은 상태로 있어, 화면을 회전하면 UI가 화면에 맞지 않습니다. 첫 번째 씬에서 Label을 선택해, 제약조건을 추가 해보겠습니다. 저는 현재 지정한 위치에서 그대로 사용하고 싶어서 제약조건에 입력되어있는 값 그대로 추가하겠습니다. 화면을 돌려 확인해보면, 제약조건이 에러없이 수행되는것을 확인 할 수 있습니다. 다른 UI도 같은 방법으로 제약을 추가해주면 됩니다. - 해당 씬에 모든 제약을 추가한 결.. 2022. 1. 17. Auto Layout : Priority Priority는 우선순위를 정하는 속성입니다. 1000~1 사이의 숫자로 우선순위를 정하며, 1000은 필수제약을 의미하고 나머지 작은 값들은 옵션제약을 의미합니다. 항상 우선순위가 높은 제약이 먼저 적용되고, 서로 충돌하는 제약이 같은 우선순위를 가지고 있으면, 제약오류가 발생됩니다. Center X, Y 제약과 Width=240, Height=128 제약이 추가된 View를 하나 만들겠습니다. 이어서 다시 View에 대해 100의 Width 제약을 추가하겠습니다. Greate Than or Equal의 제약으로 추가된것을 확인할 수 있습니다. 이는 X-code에서 제약충돌을 방지하기 위해 두 번째 만든 Width제약의 릴레이션을 Greate Than or Equal로 설정한 것입니다. 그럼 100의.. 2022. 1. 14. Auto Layout : Constant Constant는 상수입니다. item1.attribute1 = multiplier*item2.attribute2+constant 공식에서 제약에 대한 값으로, 제약을 생성한 후에도 변경할 수 있습니다. 그렇기 때문에 런타임의 제약을 업데이트하는 용도로 사용합니다. YellowView를 하나 생성하고 Center X,Y 제약과 너비 240, 높이 180의 제약을 추가하겠습니다. YellowView를 선택하고 Size Inspector를 클릭하면 Constraints를 확인 할 수 있습니다. 그 중 Width Equals의 Edit을 눌러보겠습니다. - 그럼 Constant에 초기에 준 240의 값이 설정되어 있습니다. 값을 300으로 변경해보겠습니다. 이렇게 Edit를 통해 너비와 높이에 대한 값을 수정.. 2022. 1. 14. Auto Layout : Multiplier Multiplier 는 item1.attribute1 = multiplier*item2.attribute2+constant 공식에서 두 번째 항목 ( item2 )에 적용할 승수를 나타내며, 기본값은 1로 설정되어 있습니다. 다음과 같이 두 개의 View를 추가 해주었습니다. 첫 번째 RedView에는 너비와 높이 제약, CenterX 제약을 추가했습니다. 두 번째 GreenView에는 RedView와 동일한 너비와 높이를 갖는 제약을 추가했고 동일하게 CenterX 제약을 추가했습니다. Green View를 선택한 후 Size Inspector에서 Constraints 항목을 보겠습니다. 해당 제약 목록 중 Edit을 누르면 Multiplier의 값이 1로 지정되어있는것을 확인할 수 있습니다. 이 값을.. 2022. 1. 14. Auto Layout : 관계 설정 Auto Layout 중에서 관계 설정에 대해 알아보겠습니다. 제약을 추가할 때에는 기본적으로 두 항목 사이의 관계를 릴레이션으로 지정하게 됩니다. 공식은 다음과 같이 있습니다. 첫 번째 공식이 기본값으로 설정되어있으며 사용자에 설정에 따라 ≥ (Less Than or Equal) 와 ≤ (Greater Than or Eqaul) 도 사용 할 수 있습니다. 실습으로 자세히 알아보겠습니다. 세 개의 레이블을 추가해주겠습니다. 첫 번째 레이블에 50의 Height 제약을 추가해보겠습니다. Height 제약의 릴레이션을 Less Than or Equal로 바꾸겠습니다. 현재 상태에서 높이가 50보다 작거나 같다는 제약을 만족시킬 수 있기 때문에 문제가 발생하지 않습니다. 이번에는 Greater Than or .. 2022. 1. 14. Auto Layout : Width, Height 제약 추가 이번에는 뷰에 대해 너비와 높이에 대한 제약조건을 추가하는 방법을 알아보겠습니다. 너비와 높이 제약조건을 추가할 때에는 하나의 고정된 Constant 값으로 추가할 수 있으며, 다른 뷰와의 관계나 뷰를 추가할 수 있습니다. Label과 View를 하나씩 추가하겠습니다. Label에는 고정된 너비와 높이를 추가하겠습니다. 위쪽과 왼쪽으로부터 100, 너비와 높이 200의 제약조건이 추가되었습니다. 이번에는 View에 제약조건을 추가해보겠습니다. View를 선택한 상태로 제약조건을 추가하는 화면을 보면 윗 마진에 대한 옵션이 있습니다. 현재는 바로 위에 Label이 있기 때문에 옵션 중 맨 아래 즉, Label로 부터의 마진으로 선택되어 있습니다. Label에 관계없이 윗 마진을 주고싶을 땐 Safe Are.. 2022. 1. 13. 이전 1 2 다음
