본문 바로가기

개발이야기/Android

[ConstraintLayout] 효과적인 ConstraintLayout 사용방법

 

 

[Android Knights 2018] 

지금은 ConstraintLayout 시대 

speaker. 안세원 - 카카오 모빌리티 안드로이드 개발자 

 

  • 최근 참여 앱
    • 카카오 T 택시 기사용
    • 카카오 T
    • 카카오톡

 

Guide, Chain 등에서 부터 최신 업데이트된 기능까지! 혼자 알기 아까운 ConstraintLayout, 복잡한 구조도 한방에 멋지게!

 

복잡한 레이아웃을 단순한 계층구조를 이용해 표현할 수 있는 View Group

Relative layout과 아주 비슷하지만 유연하고 다양한 기능을 제공

 

ex. relative layout에서 4 depth이상 들어가야하는 것도 1 depth로 가능!!!

 

ConstraintLayout 장점

  • Linear Layout을 써야만 했던 뷰 비율 조절도 간단히 가능(depth가 깊어지는 것 방지)
  • 뷰 계층 간단히 할 수 있어 유지보수도 좋고 성능도 좋고!
  • 구글이 기존의 많은 layout 기능들을 deprecated함. -> constraintLayout을 할 수 밖에 없음 ㅜㅜ
 

Constraint

  • 다른 뷰나 부모 레이아웃과의 정렬조건 / 연결 관계를 나타냄
    • layout_constraintp[기준1]_to[기준2]of="[viewId|parent]"

ConstraintLayout

  • Top/Bottom/Left/Right를 모두 선언해야 하는 것은 아님
    • 생략은 가능하지만 기왕 할거면 상하좌우 모두 선언하는게 나음(가독성 포함)

  • match_parent가 아닌 match_constraint
    • 0dp크기 : constraint에 꽉 차게 크기를 맞춤.

  • Percent size
    • 부모 뷰의 크기에 비례하여 뷰의 크기를 결정(padding 제외)
    • android:layout_width="match_constraint"
    • app:layout_constraintWidth_default="percent"
    • app:layout_constraintWidth_percent="0.4"

  • 가로/세로 비율
    • dimensionRatio : 뷰의 가로/세로 비율 결정
      • app:layout_constraintDimensionRatio="1" // 가로/세로 = 1/1
      • app:layout_constraintDimensionRatio="1:1" // 가로:세로 = 1:1
      • 적어도 한 방향은 match_constraint여야 함!
    • 명시적으로 비율을 적용할 축을 지정할 수 있음 : (W|H,)[비율]
      • example. 폭 match_constraint, 높이 match_constraint로 설정
        H,1:2 -> 폭을 constraint에 맞춰 설정한 후, 비율에 따라 높이를 결정
        W,1:2 -> 높이를 constraint에 맞춰 설정한 후, 비율에 따라 폭을 결정

  • 뷰 크기 - 최소/최대
    • 최소/최대 크기 지정 : app:layout_constraintWidth[min|max]="size"
    • android:minWidth와는 다름
      • wrap_Content일 땐 android:[min|max]width 적용
      • match_constraint일 땐 app:layout_constraintWidth[min|max] 적용

  • 위치 지정 - bias
    • bias
    • guidline
      • 가로 또는 세로 축 방향을 가진 가상의 뷰(마치 포토샵의 가이드라인 처럼!!)
      • 부모 뷰의 특정 위치를 기준점으로 삼을 때 사용
      • 축, 위치 값을 속성으로 가짐
        • 축 : android:orientation="[vertical|horizontal]"
        • 위치
          • app:layout_constraintGuide_begin : 시작지점으로 부터의 거리
          • app:layout_constraintGuide_end : 끝 지점으로 부터의 거리
          • app:layout_constraintGuide_percent : 시작짖머으로 부터의 % 거리

ConstraintLayout 여러개의 뷰

  • chain
    • 서로 연결되어 그룹으로 동작하는 뷰의 묶음
    • 체인 스타일 종류
       

      마치 web의 부트스트랩 마냥 사용 가능하다! 대박
    • 체인 헤드 : 위치 상 체인의 가장 앞쪽(왼쪽 혹은 윗쪽) 에 위치한 뷰
      -> xml상에 위에 있는게 헤드가 아님!!
    • spread : (체인의 constraint 영역 - 뷰 크기의 합)을 균등분할하여 배치

  • Barrier
    • 여러 뷰의 가장자리 위치에 만드는 가상의 뷰
    • 복잡한 양식 등을 만드는데 활용할 수 있음
    • <android.support.constraint.Barrier>
      app:barrierDirection="right"
      app:constraint_refernced_ids="tv_1,tv_2" // tv_1, tv_2 id의 오른쪽 최대 값에 barrier bar를 생성


  • Group
    • 여러 뷰의 visibility를 한꺼번에 조정(즉 가상의 group을 생성)

  • ConstriantSet
    • 프로그램적으로 constraint를 만드는 기능
    • 일일이 바닥부터 만드러내거나
      • 다른 xml로 부터 constraint만 뽑아오거나
      • constraintlayout 인스턴스에서뽑아오거나
    • 만들어진 constraint를 constraintLayout에 적용할 수 있음
    • constrainSet은 constraint만 갱신
    • 손쉽게 애니메이션 생성 가능
      constraintSet.animation...

  • Placeholder(가상의 view 위치)
    • 가상의 view 위치를 두고, constraint layout에 있던 것을 옮기는 것.
    • chain관계의 애니메이션을 손쉽게 구현가능

 

참고사이트

ConstraitLayout google 제공 웹사이트(링크)

 

반응형