빠르게 레이아웃 깨지는 이슈를 파악하는 방법

iOS 앱을 개발하다보면 몇번 겪어보셨을 만한 레이아웃 깨지는 이슈를 빠르게 확인하는 방법을 공유하고자 합니다.

보통 앱을 개발할 때 기준단말을 정해놓고 나중에 그 이외의 단말에 대해 UI를 확인하는데요.

이때 정말 화가 나는게 나는 레이아웃 제약조건을 잘 걸어놨는데 깨지는 콘솔로그가 출력된다는겁니다.

제약조건이 깨진다고는 하지만 화면 상으로는 깨지는게 안보이구요..

이럴때 정말 곤란합니다.

제가 UI를 디버깅 하는 방법을 공유합니다..

 

1. view Hierarchy 를 캡쳐

디버깅 Area에 보면 십자가 모양이 보입니다.

View의 계층구조를 캡쳐하는건데요. 

캡쳐하면 시뮬레이터나 디바이스에 보이는 현재 UI를 캡쳐하고, 계층구조를 보여줍니다.

옆에 슬라이더와 아래 메뉴를 사용하여 보다 정교하게 UI를 분석 할 수 있습니다.

옆에 네비게이터에 보면 아래처럼 계층구조가 보이고, 그 안에 제약조건도 살펴볼 수 있습니다.

만약 여기서 레이아웃이 잘못 적용(중복 적용)되어있다면 오른쪽에 보라색 느낌표가 뜹니다!

그 레이아웃을 확인해보시면 됩니다.

2. breakPoint 사용

xib나 storyboard같은 UI Builder 사용하여 만들면, 레이아웃이 중복적용되어있거나 빠져있는 경우에 경고를 날려줍니다. 

하지만, 코드로 구성할 때는 이를 알 수 없죠..

딸랑 콘솔에 아래처럼 UI가 중복되어 깨지니까 확인해봐라 라는 메세지만 던져줍니다

019-07-19 10:54:34.555663+0900 -dev[14376:3982513] [LayoutConstraints] Unable to simultaneously satisfy constraints.
	Probably at least one of the constraints in the following list is one you don't want. 
	Try this: 
		(1) look at each constraint and try to figure out which you don't expect; 
		(2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x28159c410 UIView:0x11dd14410.bottom == UIView:0x11dd1c850.bottom + 49   (active)>",
    "<NSLayoutConstraint:0x28169ab70 UIView:0x11dd14410.bottom == UIView:0x11dd1c850.bottom   (active)>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x28159c410 UIView:0x11dd14410.bottom == UIView:0x11dd1c850.bottom + 49   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.

 

그럴땐 저 콘솔에서 출력해주는 메세지를 자세히 보고 하라는 대로 해봅시다.

맨 아랫줄이 중요합니다.

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.

 

1) 브레이크 포인트를 만든다.

  심폴릭 브레이크 포인트를 선택합니다.

심볼 부분에 UIViewAlertForUnsatisfiableConstraints 를 입력한다.

2) 앱을 실행 후 제약조건이 깨지는 부분으로 가서 디버깅한다.

그럼 브레이크 포인트가 깨지는 부분에 가서 멈춰버립니다.

그럼 콜스택을 보고 확인해보면 정말 쉽게 확인할 수 있을거에요!