각각 다른 해상도에도 일정한 화면을 보여주기 위해 각 sub view에 비율을 세팅해 구성한 프로젝트.
🍎 모든 화면에 맞는 Stack View
지금까지는 화면에 해상도에 따라 사이즈를 맞추는 stack view를 만들어 본 적이 없었다.
이번 프로젝트에서는 어떤 해상도에도 일정한 화면을 보여주는 stack view를 만들어봤다.
🍎 Vertical Stack View의 Priority를 낮춰 바뀌는 해상도에 대한 유동적인 대응하기
UI는 하나의 Vertical Stack View가 5개의 Horizontal Stack View를 감싸고 있는 형태이며, 각각의 Alignment와 Distribution은 다음과 같다.
vertical
Horizontal
먼저 Vertical Stack View의 Alignment와 Distribution을 보면 Fill과 Fill로 되어있다. 즉, Vertical Stack view내 sub view들의 가로로 쭈욱 늘리고, 세로로 겹겹이 쌓여있을때 sub view들을 vertical stack view의 높이만큼 꽉 채워주겠다는 의미이다.
다음, Horizontal Stack View의 Alignment와 Distribution을 보면 Fill과 Equal Spacing이다. 즉, 아이템들을 세로로 쭈욱 늘리고 아이템이 가로로 겹겹이 쌓여있을때 sub view들을 horizontal stack view의 넓이만큼 늘려주겠다는 의미이다.
또, 제일 중요한 부분은 'AC'와 '0'을 제외한 모든 버튼의 Aspect Ratio는 1:1이다. 'AC'는 '9'의 trailing에, '0'은 '2'의 trailing에 맞춰주었다. (사진 참고)
이제 마지막으로 Vertical Stack View와 해당 vertical stack view의 superview인 UIView 사이에 제약조건 중 Bottom Priority를 1000(Require)에서 750(High)로 낮춰줘 각기 다른 화면 사이즈에서 동일한 비율로 UI를 보여줄 수 있다.
🍎 스토리보드에서 간단하게 버튼 속성 조정하기
UIButton 클래스를 상속하는 커스텀 클래스를 아래와 같이 만들어준다.
각각의 버튼의 Custom Class를 방금 만들어준 클래스로 지정한다.
이제 attributes inspector에서 선택해주면 끝!
모든 버튼의 속성을 'On'으로 했을때 결과
발견한점
@IBDesignable을 어트리뷰트를 사용하면 스토리보드에서 실시간으로 변하는것을 볼 수 있다고 배웠는데, 많이 기다리지 않아서 그런것인지, 아니면 다른 추가적인 작업이 또 필요한지 모르겠지만 아예 바뀌지 않았다.
🍎 계산 결과에 소수점이 있는지 확인하고 없다면 정수로 바꾸기
계산기의 로직은 다루지 않으려고 했는데 나중에 사용할 수 있을것 같아 기록!
바로 코드를 보자!
if let result =Double(result), result.truncatingRemainder(dividingBy:1)==0{self.result ="\(Int(result))"}
먼저 일반적으로 사용했던 나머지 연산자 '%'는 두개의 피연산자 모두 정수여야 가능하다. 즉, 하나라도 실수라면 나머지 연산자(%) 사용 불가. 둘 중 하나라도 실수인 피연산자가 있다면 truncatingRemainder(dividingBy:) 메서드를 사용하자.
위의 코드는 result(실수)를 1로 나누었을 때 나머지가 0과 같다면 'x.0' 이니 일반 정수로 표현할 수 있게 필터링하는 코드이다.