오늘 한 일 / 배운점

• 앱에 들어갈 컨텐츠 내용 조사
• UI 구현

과제

• UI 구현

느낀점

오늘부터 UI 구현 작업을 시작했는데
검색 내용이 들어가는 UITextField 옆에 취소 버튼을 나란히 놓는 작업이 있었다
현재 iPhone15 Pro를 기본으로 잡고 시뮬레이터를 돌리고 있는데
만약에 iPhone SE처럼 더 작은 화면이나 Pro Max나 Plus 모델처럼 더 큰 화면에서 이 앱을 실행한다고 생각했을 때
일단 취소 버튼은 width 값이 변할 일은 없고
저 UITextField를 건드려야 할 것 같은데 width 값이 고정이 되어버리면 이상할 것 같아서
화면길이에 따라 가로 길이를 동적으로 늘려주고 싶었다

근데 자꾸 이렇게 겹쳐지는 건 왜일까..

...

// addSubview
view.addSubview(searchTextField)
view.addSubview(cancelButton)
        
// makeConstraints
searchTextField.snp.makeConstraints {
    $0.top.equalTo(view.safeAreaLayoutGuide).offset(20)
    $0.leading.equalToSuperview().offset(24)
    $0.trailing.equalTo(cancelButton).offset(-16)
}

cancelButton.snp.makeConstraints {
    $0.centerY.equalTo(searchTextField)
		$0.trailing.equalToSuperview().offset(-24)
}

...

일단 figma에 지정된 대로 top 제약 잡고
부모 뷰의 왼쪽으로부터 24 떨어진 곳에 searchTextField의 leading을 맞추고
부모 뷰의 오른쪽으로부터 -24 떨어진 곳에 cancelButton의 trailing을 맞추고
searchTextField의 trailing을 cancelButton의

ㄱ-
지금 TIL 쓰면서 이유를 발견했다

$0.trailing.equalTo(cancelButton).offset(-16)

cancelButton을 그대로 갖다가 equalTo에 넣어버렸네 ㅠㅠ

$0.trailing.equalTo(cancelButton.snp.leading).offset(-16) // 수정

지금 cancelButton의 leading을 searchTextField의 trailing에 맞춰주니 잘 뜬다!!

근데 Hierarchy를 보면 가로 길이가 모호하다고 한다
난 동적으로 가로 길이를 정하고 싶으니까 일부러 width를 안정한 건데 말이다

이 부분에 대해서 계속 고민하고 찾아보다가 결국 튜터님께 여쭤봤는데
내가 textField, Button 둘 다 가로 길이를 안정하고 화면크기에 따라 맞춰 나오기를 바랐는데
그렇게 되면 어느 쪽이 가로 길이를 더 크게 가져가고 이런 부분이 모호하니까
만약 textField를 동적으로 크기 조절하고 싶은 거라면 cancelButton은 가로를 고정하라는 것

searchTextField.snp.makeConstraints {
    $0.top.equalTo(self.safeAreaLayoutGuide.snp.top)
    $0.leading.equalToSuperview().offset(24)
    $0.trailing.equalTo(cancelButton.snp.leading).offset(-16)
    $0.height.equalTo(50)
}

cancelButton.snp.makeConstraints {
    $0.centerY.equalTo(searchTextField)
    $0.trailing.equalToSuperview().offset(-24)
    $0.width.equalTo(41)
}

cancelButton에 가로 값을 넣어주니

굿..
경고창이 사라졌다