[안드로이드 스튜디오 정리#1-6] ConstraintLayout

이 게시물은 다음 링크를 참조하여 학습했습니다.

안드로이드 컨스트레인트레이아웃. (Android ConstraintLayout)

Android ConstraintLayout 분석 - 1

이번 시간에는 ConstraintLayout에 대해 정리해보려 한다.

1. ConstraintLayout

 Constraint의 사전적인 의미는 '제약'인데, 여러가지 제약조건들을 이용해서 뷰의 크기와 위치를 결정한다.

 여러 종류의 Layout의 특성을 합친 특징을 갖고 있는데, 

 RelativeLayout의 "상대적인 위치 관계", LinearLayout의 "가중치", Chain의 "요소 그룹화" 등의 특징을 갖고 있다.

 1) 제약조건

 안드로이드에서 제공하는 ConstraintLayout의 제약 조건은 9가지의 카테고리로 구성되어 있으며,

 다음 링크에서 그 카테고리등을 확인 할 수 있다.

ConstraintLayout  |  Android 개발자  |  Android Developers

ConstLayout 제약조건 분류

카테고리	설명
Relative positioning	요소 간 상대 위치 지정
Margins	요소 간 여백 설정
Centering positioning and bias	뷰를 부모 레이아웃 또는 제약 영역의 중앙에 배치 또는 편중
Circular positioning	대상 뷰를 기준으로 각도(angle)와 반지름(radius)으로 상대 위치 지정
Visibility behavior	뷰의 Visibility 상태에 따른 최종 위치 결정 및 여백
Dimension constraints	뷰에 적용된 제약에 따른 뷰의 크기 결정
Chains	수평 또는 수직 방향으로 나열된 뷰에 대한 그룹화. 배치 스타일 지정
Virtual Helpers objects	레이아웃 내 효율적인 뷰 배치에 사용 가능한 몇가지 Helper 객체들
Optimizer	제약 카테고리에 대한 최적화

  (1) Relative positioning

  상대 위치 지정 관련 속성은 다음과 같이 있다.

속성	설명
layout_constraintLeft_toLeftOf	뷰의 왼쪽을 대상 뷰의 왼쪽에 맞춤
layout_constraintLeft_toRightOf	뷰의 왼쪽을 대상 뷰의 오른쪽에 맞춤
layout_constraintRight_toRightOf	뷰의 오른쪽을 대상 뷰의 오른쪽에 맞춤
layout_constraintRight_toLeftOf	뷰의 오른쪽을 대상 뷰의 왼쪽에 맞춤
layout_constraintTop_toTopOf	뷰의 위를 대상 뷰의 위에 맞춤
layout_constraintTop_toBottomOf	뷰의 위를 대상 뷰의 아래에 맞춤
layout_constraintBottom_toBottomOf	뷰의 아래를 대상 뷰의 아래에 맞춤
layout_constraintBottom_toTopOf	뷰의 아래를 대상 뷰의 위에 맞춤
layout_constraintBaseline_toBottomOf	뷰의 텍스트 베이스라인을 대상 뷰의 텍스트 베이스라인에 맞춤
layout_constraintStart_toStartOf	뷰의 시작을 대상 뷰의 시작에 맞춤
layout_constraintStart_toEndOf	뷰의 시작을 대상 뷰의 끝에 맞춤
layout_constraintEnd_toEndOf	뷰의 끝을 대상 뷰의 끝에 맞춤
layout_constraintEnd_toStartOf	뷰의 끝을 대상 뷰의 시작에 맞춤

    다음 속성들은 속성값으로 "parent" 또는 ID값을 사용한다.

  (2) Margins

  기본적으로 여백을 설정하는 방법은 다른 레이아웃에서와 동일하다.

  ConstraintLayout은 layout_margin 외에 대상 View가 보이지 않는 상태(View.GONE)가 되었을 때의 여백 속성도 제공한다.

속성	설명
layout_goneMarginLeft	뷰의 왼쪽 대상 뷰가 View.gone 상태일때 여백 설정
layout_goneMarginRight	뷰의 오른쪽 대상 뷰가 View.gone 상태일때 여백 설정
layout_goneMarginTop	뷰의 위쪽 대상 뷰가 View.gone 상태일때 여백 설정
layout_goneMarginBottom	뷰의 아래쪽 대상 뷰가 View.gone 상태일때 여백 설정
layout_goneMarginStart	뷰의 시작쪽 대상 뷰가 View.gone 상태일때 여백 설정
layout_goneMarginEnd	뷰의 끝쪽 대상 뷰가 View.gone 상태일때 여백 설정

  다음 속성들은 속성값으로 여백 값을 사용한다.

  (3) Centering positioning and bias

  상대적 제약 조건이 반대방향으로 두 가지가 동시에 적용되면, 뷰는 두 가지 제약의 가운데 배치된다.

  이 점을 이용해서 Centering positioning을 할 수 있다.

  만약 가운데 위치 시키는 것이 아니라 가운데에서 조금 옆으로 또는 위아래로 배치시키고 싶을때는 어떻게 해야 할까?

  ConstraintLayout에는 Bias관련 속성이 있다.

  Bias의 사전적 정의는 "치우침", "편중"이다.

  Bias 관련 속성은 다음과 같다.

속성	설명
layout_constraintHorizontal_bias	수평 방향(Left/Right 또는 Start/End) 사이드 제약 시, 양 사이드 간 위치 비율
layout_constraintVertical_bias	수직 방향(Top/Bottom) 사이드 제약 시, 양 사이드 간 위치 비율

  다음 속성들은 0에서 1 사이의 소숫값을 속성값으로 갖는다.

  (4) Circular positioning

  원형 위치 지정은 대상 뷰의 아이디와 거리, 각도 값을 입력하여 나타낼 수 있다.

  원형 위치 지정의 속성은 다음과 같다.

속성	설명
layout_constraintCircle	대상 뷰의 ID 지정
layout_constraintCircleRadius	뷰와 대상 뷰 중심 사이의 거리
layout_constraintCircleAngle	뷰가 배치될 각도( 각도 계산은 시계처럼 12시 기준, 시계방향이다. )

  (5) Visiblity behavior

  Visiblity behavior 특성은 전에 설명했던 Visibility 특성과, (2) Margins에서 설명한 goneMargin 특성을 포함하고 있으므로 생략한다.

  (6) Dimension constraints

  Dimension constraints 속성은 위젯의 크기를 조정하는데 유용하게 사용된다.

  Dimension constraints 속성을 사용하기 위해서는 0dp(MATCH_CONSTRAINT) 속성 값에 대해서 알아야한다.

  일반적으로 길이를 결정할 때 특정 값 또는 "wrap_content", "match_parent" 를 많이 사용했지만, 

  ConstraintLayout에 속한 뷰들에 대해서는 "match_parent"를 지원하지 않는다.

  0dp 속성 값과 (1) Relative positioning, (2) Margins 을 혼합해서 사용하면 뷰의 크기를 자유자재로 조정할 수 있다.

  Dimension constraints 속성들은 다음과 같다.

속성	설명	속성 값
layout_constraintDimensionRatio	뷰의 가로와 세로의 비율을 조정한다.	비율(n:m) / 방향(h or w), 비율(n:m)
layout_constrainedWidth	뷰들이 가로범위 밖으로 안나가도록 조정	true / false
layout_constrainedHeight	뷰들이 세로범위 밖으로 안나가도록 조정	true / false
layout_constraintWidth_min	뷰들의 가로길이 최솟값 설정	길이 값
layout_constraintHeight_min	뷰들의 세로길이 최솟값 설정	길이 값
layout_constraintWidth_max	뷰들의 가로길이 최댓값 설정	길이 값
layout_constraintHeight_max	뷰들의 세로길이 최댓값 설정	길이 값
layout_constraintWidth_percent	뷰들의 가로길이를 parent의 percent로 설정	비율(n:m)
layout_constraintHeight_percent	뷰들의 세로길이를 parent의 percent로 설정	비율(n:m)

  (7) Chains

  Chains 특성은 가로/세로축에 대해 뷰(View)들을 그룹지을 수 있다.

  인접한 뷰끼리 서로 쌍방향 constraint정의 되어 있을 때 chain관계에 있다고 본다.

  Chains는 chain head가 있는데 쉽게 생각해서 START와 가까운 위젯이라고 보면 된다.

  가로축 기준일때는 Left, 세로축 기준일때는 Top쪽의 뷰가 chain head가 된다.

  chain의 style은 head에서 지정할 수 있다.

Chains Styles

  안드로이드에서 소개하는 체인 스타일은 여섯 종류정도 있지만, 

  지원하는 chainStyle은 3개이고, 다른 Constraint 조건을 조합해서 소개하는 여섯 종류를 구현할 수 있다.

  chainStyle은

  CHAIN_SPREAD

  CHAIN_SPREAD_INSIDE

  CHAIN_PACKED

  위 세가지를 지원한다.

  체인스타일을 부여하는 속성은 다음과 같다.

설명	속성
layout_constraintHorizontal_chainStyle	가로 방향 체인 스타일 설정
layout_constraintVertical_chainStyle	세로 방향 체인 스타일 설정

  (8) Virtual Helper objects

  안드로이드는 ConstraintLayout의 사용을 돕기위해 특별한 객체 몇 가지를 제공하는데, 이것이 Virtual Helper objects이다.

   Guideline

    실제 어플상에는 출력되지 않지만 레이아웃 작업을 돕기 위한 선을 그려준다.

    layout_constraintGuide_percent 속성을 이용해서 0에서 1사이의 소숫값을 입력해서 선의 위치를 결정한다.   

   Group

    특정 뷰(View)들을 묶어서 제어할 수 있다. ( ex) 여러개의 뷰를 한번에 visibility 제어할 때 )

    constraint_referenced_ids 속성을 이용해서 속성값을 ID로 입력하는데, ID를 ','로 구분해서 입력한다.

   Barrier

    참조하고 있는 뷰(View)들 중에 가장 큰 dimension의 position에 Guideline을 생성한다.

    barrierDirection 속성을 이용해서 Guideline을 생성할 방향을 결정하고, 속성값을 방향으로 입력한다.

    constraint_referenced_ids 속성을 이용해서 속성값을 ID로 입력하는데, ID를 ','로 구분해서 입력한다.

  (9) Optimizer

    제약 카테고리에 대한 최적화 기능을 한다.