Xcode 11에 생긴 Self-Size Cell 의 Estimate Size 는 무엇일까?

3 답변 글타래를 보이고 있습니다
  • 글쓴이
    • 뚭니
      참가자
      • 글작성 : 9
      • 답글작성 : 17

      Contents

      Issue 정리

      Estimate Size 에 대해 알아보기 이전에, 왜 이 부분에 대해서 알아봐야겠다는 생각이 들었는지 이슈를 발견한 배경에 대해 정리해보도록 하겠습니다.
      CollectionView 로 티켓의 리스트를 구현하고 있는 중이었는데요, Autolayout 을 스토리보드 상으로 제약을 걸고 시뮬레이터로 번갈아 실행해보던 중에 iphone8 디바이스와 iphone pro max에서 레이아웃이 차이가 나는 것을 발견하게 되었습니다.

      8기준으로 작업했을 때 스크린샷 2020-05-03 오후 5 51 02


      부끄러운 사고의 흐름 정리

      위와 같은 상황을 발견했을 때 제가 해결하기 위해 했던 과정들을 순수하게 나열해보겠습니다.

      1. 평상시에 iphone 8 디바이스로 작업하기 때문에 이 문제는 내가 적절하게 오토레이아웃을 잡지 않았기 때문에 발생하는 문제일 것이라고 당연하게 생각하고 attribute 와 constraint 값을 수정하기 시작했다.
      2. 혹시 inset 의 문제인가, 아니면 Layout Margins 의 문제일까 싶어서 Size inspector 에 있는 속성을 활성화시켰다가 비활성화시켰다가, 해보면서 어떤 속성이 영향을 미치는지 확인해보기 시작했다.

      3. 그러다가 pro max 보다 작은 디바이스인 8 을 기준으로 셀의 사이즈를 고정했기 때문인가 싶어, interface 를 큰 디바이스에서 layout 을 잡으면 작은 디바이스에서는 공간이 작아진 만큼 알아서(?) 작게 나오지 않을까? 하는 생각이 들었다.

      4. pro max 를 기준으로 constraint 를 걸고 시뮬에서 실행시키니 이전과 별반 차이점이 없었다. 다만 그 상태에서 interface 를 8로 변경하면 뷰 밖으로 튀어나온 UI Component 에 대해 autolayout Warnings 가 떴다.

      5. 그러던 중에 Cell Size 속성에 “Estimate Size” 속성 값을 변경해보았고 none, automatic, custom 중에 어떤 것을 선택하느냐에 따라 레이아웃이 달라지는 것을 보면서 아, 이것이 영향을 미치는 구나. 어떤 속성일까 알아봐야겠다는 생각에 도달하게 된다.


      Estimate Size 에 대해 커지는 궁금증

      Xcode 가 11로 업데이트 되면서 생겼다는 Estimate Size 는 none, automatic, custom 3가지의 속성을 가지고 있었고 Collection ViewCollection View Cell 각각 해당 속성을 갖고 있었습니다.
      첫번째로 첨부했던 사진은 iphone8을 기준으로 작업한 환경이며 Collection View(이하 CV) 와 Collection View Cell(이하 CVC) 모두 automatic 으로 설정되어있었고요.

      • interface 를 iPhone pro max 환경에서 작업한 채로, CV 와 CVC 모두 automatic 으로 설정하고 시뮬을 돌려보면 아래와 같이 보였습니다.
      • 보다시피 pro max 에서는 그리드가 예쁘게 잡혀있지만 8 에서는 큰 컴포넌트들이 뷰를 뚫고 나왔습니다. ^^;

      253 PM Melon Music Awards - MMA 2019

      • 위 상황을 겪고 나니 적어도 UI 컴포넌트들이 화면 밖으로 튀어나오는 일은 없어야겠다는 생각이 들었죠.
      • CV 의 속성 값을 수정할까, CVC 의 속성 값을 수정해볼까 하다가 CV 의 영역에 제약을 주고 그 안에서 CVC 를 automatic 으로 해야겠다는 생각이 들었습니다.

      CV를 custom으로 했을 때 스크린샷 2020-05-03 오후 5 54 45

      Estimate Size

      estimatedItemSize 속성과 다른 값인가?
      • 구글 검색창에 “Estimate Size”라고 검색하자 estimatedItemSize 에 관한 개발자 문서가 가장 먼저 나왔습니다. 하지만 estimatedItemSize 는 CGSize 값이지요.
    • UICollectionViewFlowLayout 에서는 estimatedItemSize 프로퍼티 값으로 초기에 셀들의 위치를 임시 배치하고 Autolayout 연산이 되어 크기가 변경된다면 그에 따라 Collection View 의 ContentSize 값을 갱신한다고 합니다.

    • Estimate Size 와 estimatedItemSize 가 같은 값인지는 모르겠지만 아예 연관이 없지는 않은 것 같았습니다. WWDC 2014에서 애플이 공개한 iOS 8 업데이트 내용 중 UICollectionView에 Self-sizing 메커니즘이 도입되면서 같이 생길 수 밖에 없는 개념이라는 공통점이 있었습니다.
      > 출처: https://blog.skcc.com/2546 [SK(주) C&C 블로그]

    • 하단에 첨부한 Stackoverflow 링크 에 달린 답변 중에는 “layout.estimatedItemSize = .zero” 라는 코드를 선언하면 Estimate Size 를 none 으로 선언한 것과 같은 효과를 볼 수 있다는 답변도 있었습니다.

    • 하지만, 다른 점이 있다면 Estimate Size 는 Xcode 11로 업데이트 되면서 스토리보드의 inspector 에 추가된 속성이었습니다. Stackoverflow 에 찾아보니 UICollectionViewDelegateFlowLayout 를 확장하여 overriding 하려는 개발자들에게 Estimated Size 를 none 으로 속성을 변경한 것이 꽤나 많은 분들에 해결책을 주었던 것 같았어요.

    • 만약 Cell 의 크기를 동적으로 변하게 하거나, 코드로 custom 하고 싶을 때, Estimate Size 속성을 none 으로 변경하지 않는 경우에는 뷰가 첫 로드 되었을 때 Cell 이 적절하게 배치되지 않다가 스크롤이 발생하면 제 위치를 찾아가거나, 또는 스크롤이 발생하면 크기가 망가지는 것과 같이 Cell 이 Self-size 를 원하는 대로 하지 못하는 문제가 발생하는 것 같습니다.

      > 참고한 Stackoverflow 링크들:
      >> UICollectionView always auto sizing cells. Not using sizes returned from delegate
      >> How to set UICollectionViewCell Width and Height programmatically
      >> UICollectionViewCell content wrong size on first load
      >> Why on Xcode 11, UICollectionViewCell changes size as soon as you scroll

  • 뚭니
    참가자
    • 글작성 : 9
    • 답글작성 : 17

    혹시 글을 읽으시다가

    제가 잘못 공부한 부분이나 더 공부해야할 부분이 있다면 짚어주신다면 진심으로 감사합니다 ㅜㅜ

     

    Collection View 와 Cell size 를 매번 Automatic 으로만 설정해두고 그리다가

    이번 이슈를 계기로 Estimate Size 속성에 대해 알게 되었는데요, 어떻게 동작이 되는 것인지 아직 모르는 것이 많아 공부가 많이 필요합니다.

     

    감사합니다 ~

  • 야곰
    키 마스터
    • 글작성 : 37
    • 답글작성 : 579

    ‘사고의 흐름 정리’가 가장 유익하네요!
    부끄러울 필요가 전혀 없어요. 그것을 공개한다는 것 자체가 매우 큰 용기고 대단한 일인걸요. 멋집니다 👏

    여기서 말한 Estimate Size는 Collection View의 Size Inspector에 있는 Estimate Size를 말씀하신거죠?

    이녀석은 그 콜렉션 뷰의 UICollectionViewFlowLayoutestimatedItemSize를 뜻하는 것이 맞습니다 🙂
    Inspector 영역에 있는 이름과 실제 프로퍼티의 이름이 미묘하게 달라서 헷갈리는 경우도 왕왕 있는데, 어떤 요소는 요소 이름 위에 마우스를 올려두고 기다리면 정확히 어떤 프로퍼티에 적용되는 것인지 설명이 나올때도 있어요.

    • 뚭니
      참가자
      • 글작성 : 9
      • 답글작성 : 17

      글을 적으면서 사고의 흐름 부분은 창피하다고 생각해 지울까, 말까 걱정했던 부분이었는데 가장 유익하다고 해주시다니!

      정말 감사합니다. 😊

       

      네, 맞습니다! 첨부해주신 사진이 맞아요. ㅎㅎ

      사진을 첨부할 걸 그랬습니다. 이제 보니 아쉽네요.

       

      아! 같은 의미가 맞는 속성이었군요. 그렇다면 이제 어떻게 공부해야할지를 찾았습니다. ㅎㅎ

      estimatedItemSize 개발자 문서를 보고도 같은 속성이 맞나 싶어 긴가민가 했는데, 다시 읽고 공부해야겠습니다.

      마우스를 올려두면 설명이 나온다는 이런 깨알 팁까지~ 몰랐는데 많이 알아갑니다. 감사합니다!!

  • 멍단비
    참가자
    • 글작성 : 10
    • 답글작성 : 98

    글에 정성이 보이네요~~ 유익했어요. 잘봤습니다.

    • 뚭니
      참가자
      • 글작성 : 9
      • 답글작성 : 17

      부족함이 많은 글이라 걱정했는데 유익하다고 답글까지 남겨주시다니 행복합니다 ㅎㅎ

      감사합니다 !!

      • 멍단비
        참가자
        • 글작성 : 10
        • 답글작성 : 98

        저도 개인적으로는 뭐를 공부하거나 문제가 있을 떄, 이게 왜 필요한지 어느상황에 쓰이는지 정확히 느끼지 못하면 별로 하고싶은 의욕이 안들더라구요.
        오히려 딱딱한 글보다 본인의 생각이 들어가신 부분이 진짜 자신의 글인 것 같아서 개인적으로는 더 좋았습니다^^

        이미지걸고, 캡쳐하고, 링크넣고, 마크다운 문법넣고, 참고글 넣고 이런거 진짜 쉬운거 아니잖아요.. ㅎㅎ
        아마 저거 글하나 쓰시는데도 꽤 오랜 시간이 걸리셨을거라 생각합니다.

        저도 해야지 해야지 하는데 못하고있네요. 아마 출세하실거에요^^
        ㅎㅎ 글 많이많이 써주세요. 기다리겠습니다~😊

        • 뚭니
          참가자
          • 글작성 : 9
          • 답글작성 : 17

          응원글 진심으로 감사드립니다 ㅜㅜ !!

          글 작성할 때마다 보실 분들이 혹여 읽으실 때 불편하진 않을까 글을 반복해서 수정하는데요,

          이렇게 따듯한 말씀 남겨주시니 감동 받아 몇번이고 남겨주신 댓글을 다시 읽었습니다.

           

          기다려주신다고 하시니 앞으로 더 열심히 많이 공부해서 작성해야겠습니다!

          감사합니다. 좋은 하루 되세요.

  • 3 답변 글타래를 보이고 있습니다
    • 답변은 로그인 후 가능합니다.

    logo landscape small

    사업자번호 : 743-81-02195
    통신판매업 신고번호 : 제 2022-충북청주-1278 호
    고객센터 : 카카오톡채널 @yagom