[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 제공 웹사이트(링크)