UI 배치 관련 내용 정리 (constraintLayout)

* 전반적인 사용법은 여기를 참조 : https://developer.android.com/training/constraint-layout?hl=ko#adjust-the-view-size

ConstraintLayout으로 반응형 UI 빌드  |  Android 개발자  |  Android Developers

       

0. 이유
    - 왜 사용해야 하는가?
       - 한번의 개발로, UI가 다양한 해상도의 기기에 알맞게 맞추어져 보여야 한다.

       - 물론 이전방식으로도 이게 가능하지만, 최적화 및 유지보수 측면에서 단순화된 방법이 필요하다.

1. 소개
    - UI 를 배치하는 레이아웃은 기존에는 보통 LinearLayout 을 이용하였으나, UI 정렬을 위해

      뷰 안에 서브 뷰를 배치하는등 불필요한 뷰를 사용하여 관리 및 퍼포먼스 측면에서 문제가 되었다.

    - 따라서 이를 해결하기 위해 constraintLayout 이 나오게 되었고, 각 UI별로 위치 관계를 설정하여
       UI 정렬을 할 수 있고, 다양한 해상도에 대응이 가능하다 (각 컴포넌트들의 사이즈 자동 늘리기 등)

 

2. 항목 설명

    - 여러 항목들이 있지만, 이를 다 다룰 필욘 없어 보인다. 아직 기초단계 학습이라 그렇게 느낄지도 모르겠다.
    - 나는 체인, Constraint Widget, Guidlines만 있다면 왠만한 UI 정렬은 해결되지 않을까 생각한다. 

2.1. Constraint widget 설명 및 상황별 설정법
       - 유니티에서 말하는 Anchor와 비슷하다. 단, 차이가 있다면 대상이 메인화면 뿐 아니라, 다른 UI에

          상대적으로 설정이 가능하다는 점이 있다.  따라서 이것 하나만으로도 각 UI의 위치를 잡을 수 있다.

      - 상,하,좌,우 의 각각 포인트를 드래그를 통해 참조할 대상을 잡고, 간격 값을 입력하여 공간을 띄운다.

         상,하,좌,우 모두 설정할 필요는 없고, 상하 중 하나와 좌우중 하나는 설정되는게 좋다. 

 

2.2. UI 사이즈 자동 조절 (단일 UI)

        - 해상도에 맞게 UI 크기가 자동조절 되기 위해서는, 2.1. 의 Constraint Widget과 layout_width 또는 

           layout_height 설정이 필요하다. 

 

        - 먼저, 너비 자동조절을 위해서는, 좌, 우의 Constraint Widget의 포인트를 잡아주고, layout_width의

           값을 0dp로 설정한다. 

 

        - 보통 상하는 UI크기를 자동 조절하도록 하지않고, 빈공간을 두는편이나, 필요하다면 상, 하의. Constraint widget
           그리고 layout_height 값을 0dp로 설정하여 자동으로 사이즈 조절을 할 수 있다. 

 

2.3. UI 사이즈 자동 조절 (2개 이상 UI, 균등 사이즈)

        - 2개 이상 UI의 사이즈를 각각 자동조절 하기 위해서는 체인을 이용해야 한다. 명시적으로 체인을 생성치 않아도

           Constraint widget 설정시 체인이 생성되기도 한다. 

 

        - 좌측에 있는 UI의 좌 Constraint widget은 스크린 좌측으로 설정하고, 상 은 알맞은 UI를 대상으로 설정한다. 

           우측에 있는 UI의 좌 Constraint widget은 좌측 UI의 우측 포인트로 설정한다. 상 은 알맞은 UI로 설정한다.

           양쪽의 UI 모두 layout_width를 0dp로 설정하면, 좌측의 UI최소 크기를 제외한 모든 크기가 우측 UI로 정해진다.

           Design -> Component Tree에서 두 UI를 모두 선택 -> 마우스 우클릭 -> Chains -> Horizontal 체인을

           생성하면, 둘다 균일한 크기로 설정된다. 

 

2.4. UI 사이즈 자동 조절 (2개 이상 UI, 다른 사이즈 Guidline 사용)

        - 기본적으로 2.3 방법에서, 좌측 혹은 우측의 좌우 포인트중 하나를 설정치 않으면, 비균등한 사이즈가 된다.

           단 이 경우, 설정치 않은 UI측은 최소 사이즈로 결정이 되므로 디자인에 맞지 않을 수 있다. 

 

           가상의 벽을 하나 두어, 각 UI의 크기를 비율에 맞게 조절 할 수 있다. 가상의 벽 위치는 퍼센트로 조절이 가능하다.

 

        - Design 화면에서 상단에 아래와 같은 메뉴가 보일것이다. 

       - 저 드롭박스를 눌러 vertical 또는 horizontal guidline을 추가 한다. 

       - 가상의 선을 드래그를 통해 사이즈를 조절하고, 화면 위 혹은 옆쪽의 동그란 버튼을 눌러주면 퍼센트로 바뀐다.

요거다.

      - 다음의 할일은? 각 UI의 좌우상하 포인트중 원하는 것을 저 가이드라인으로 집어주면 비율 기준으로 사이즈 조절이 가능하다.

 

이 정도만 해주어도, UI들의 배치를 스크린 사이즈에 맞추어 할 수 있다고 생각한다. 추가적인게 있다면 업데이트 해야지.