학습내용

Trouble 1: textView가 왜 안보이지?

이 글은 텍스트뷰가 화면에 죽어도 나오지 않기 때문에 열심히 찾아보다 intrinsic Content Size를 잘 이해하지 못해서 나온 문제라는 것을 인지하고 같은 실수를 하지 않기 위해 적어봅니다. intrinsic content size에 대한 내용 정리도 할겸요 :)

평소와 다름 없이 view를 코드로 아래와 같이 작성하다 상품이름을 textView 로 구현할 일이 생겼습니다.

상품 상세 페이지에 있는 상품 이름이 한 줄에 다 적히지 않기에...아래와 같이 코드를 짜 보았습니다.

private let itemTitleTextView: UITextView = {
        let textView = UITextView()
        textView.adjustsFontForContentSizeCategory = true
        textView.font = UIFont.preferredFont(forTextStyle: .title3)
        textView.translatesAutoresizingMaskIntoConstraints = false
        textView.autocapitalizationType = .none
        textView.autocorrectionType = .no
        textView.isUserInteractionEnabled = false
        textView.setContentCompressionResistancePriority(.defaultLow, for: .vertical)

        return textView
    }()

textView 를 화면에 띄워봐도 상품 이름이 화면에 안보이는 걸 확인하였습니다...

뭐가 문제인지 ㅠㅜㅠㅜ

일단 디버깅부터 해봐야겠죠?

상품 등록 날짜 위에 존재해야 하는 title textView가 아예 view에 올라와 있지도 않네요? 그러다 문득 intrinsic content Size문제이지 않을까 하는 생각이 들었어요.

TroubleShooting 1: isScrollEnabled...

역시 개발자하면 디버깅, 디버깅 하면 검색이죠 ㅎㅎ

@Rhyno 개발자님에 따르면

TextView는 좀 더 복잡합니다. Scrolling이 설정되어 있는 경우, Intrinsic Size가 설정되지 않습니다. Scrolling이 설정되어 있지 않은 경우, 자동 줄바꿈(line wrapping)을 고려하지 않은 텍스트의 크기로 결정됩니다. 또한 TextView 자체에 대한 Constraint가 있는 경우, 해당 Constraint를 만족시키는 선에서 Contents를 띄울 수 있도록 Intrinsic size를 조정합니다.

[출처]: 2019-10-10-Auto Layout 이야기(2) - Intrinsic Content Size

라고 하네요 ㅎㅎ

textView의 isScrollEnabled 는 기본적으로 true로 설정이 되어 있어요. 그렇기 때문에 intrinsic size가 설정이 되어있지 않기 때문에 stackView 에 넣어줘도 보이지가 않았던거죠.

이를 해결하기 위해서는 해당 textView의 height를 정해주거나 아니면 isScrollEnabled 를 false로 설정 해줘야 한다는 것을 깨달았습니다.

고심끝에 저는 상품 이름을 스크롤해서 본다는게 사용자 입장에서 어색하게 보일 수 있을 것 같기에

textView.isScrollEnabled = false 로 설정 해 주어서 문제를 해결할 수 있었습니다.

이렇게요!!

반가운 Apple Pencil이 드디어 화면에 보이게 되었어요!!

Trouble 2: textField가 이상하게 배치되네ㅠ

이제 상품 이름 textView가 정상적으로 보이는데요. 또다른 문제가 생겼습니다.

이번에는 textField가 말썽이네요.

discountedPrice textField가 이상하게 배치 되어서 몇날 며칠을 고민 했는지 몰라요...

왜...왜 왜왜 할인된 가격만 저 멀리 화면 중앙 쪽에 배치되는걸까요... 숫자 160을 165 바로 밑에 배치하고 싶은데 contentHugging, ContentCompression, spacing empty view, stackView.alignment 등등 안 만져본게 없는데... 왜 왜왜 그런지 모르겠어서 이것저것 만지던 와중에 문제 해결의 단서를 찾은 것 같습니다.

TroubleShooting 2: placeholder 내이놈!!

화면전환할 때 혹시 잠깐 보이는 좌측하단의 글씨가 보이실까요?

해당 페이지는 상세 페이지 역할을 하며 우측 상단의 네이게이션바에 있는 버튼을 클릭하면 유저가 자신이 올린 페이지의 수정이 가능하게 하도록 하려고 구상하고 있었어요.

그래서 해당 페이지의 모든 텍스트를 textField 또는 textView로 구현해서 유저가 수정버튼을 클릭할 시 해당 페이지가 바로 수정모드로 전환될 수 있게 하려 했죠.

그런데 수정모드에서 유저가 모든 text를 지우면 어떤 textField에 어떤 내용이 들어갈지 모를것 같고 이를 방지하기 위해 placeholder에 값을 할당하여서 이런 불상사를 방지하려고 했었죠!

그래서 필요한 텍스트필드에 placeholder 값을 지정 해 놓으니 또 위와 같이 placeholder가 잠깐 보이는 문제가 포착되었습니다. placeholder가 잠깐이라도 위와 같은 식으로 보여지면 사용자 입장에서 앱에 문제가 생긴 것으로 인식할 것 같아서 고심 끝에 네트워크 작업이 끝나기 전까지는 hideView() 메서드를 활용하여 placeholder를 가지고 있는 textField들을 숨겨놓았던 것이죠.

hideView() 메서드 적용을 해제 해 놓았다가 문제점을 확인 하였어요.

위 gif에서는 잘 안 보일 수 있지만 할인된 가격이 적혀질 textField에는 (optional) 할인 가격 이라는 매우 긴 placeholder가 자리를 먼저 잡게 되네요. 그래서 의심 했던게 placeholder의 너비가 먼저 지정이 되어서 그 너비에 맞게 네트워크로 받아온 숫자가 놓여지게 되는구나 생각을 했습니다.

그래서 바로 한 번 고쳐봤죠!

private let itemDiscountedPriceTextField: UITextField = {
        textField.placeholder = "(optional) 할인 가격"
  
        return textField
    }()

일단은 이렇게 줄여봤어요

private let itemDiscountedPriceTextField: UITextField = {
        textField.placeholder = "할인"
  
        return textField
    }()

시뮬레이터로 확인 해 보니!!

짜잔! 드디어 제가 원하는데로 textField를 제 위치에 구현할 수 있게 되었어요.

그래서 제가 유추 해 본 바에 의하면 textField의 너비는 placeholder에 의해서 먼저 너비가 구현이 되고 textAlignment가 기본적으로 왼쪽으로 정렬되어있기 때문에 왼쪽이 아닌 중앙쪽에서 부터 textField의 text가 작성된 것이었던 것 같습니다.( 만약 틀리다면 언제든 알려주시면 수정하겠습니다 !!)

placeholder를 컨트롤하는 전용 메서드를 하나 만들어서 수정 버튼 클릭시 placeholder가 적용되도록 하는 방법도 고려해 봐야겠습니다.

무튼 며칠 속 썩이던 레이아웃 문제를 해결해서 너무 기쁘네요. 기록을 틈틈이 해서 같은 실수를 반복하지 않는 개발자가 되도록 더 열심히 노력해야겠다 하는 생각이 드는 하루네요. 제 trouble shooting이 다른 분들 께도 조금이나마 도움이 되었으면 하는 바람이 있습니다. ㅎㅎ