컨스트레인트레이아웃 - 가운데 위치 지정과 Bias (ConstraintLayout - Centering Positioning and Bias)

1. 뷰 위젯을 컨스트레인트레이아웃의 가운데 배치하기.

자, 컨스트레인트레이아웃에 뷰 위젯이 하나 있습니다. 이 뷰 위젯을 부모 레이아웃의 한 가운데 배치해야 하는 상황이 발생했는데요, 어떻게 하면 뷰 위젯을 레이아웃의 중앙에 위치시킬 수 있을까요?

음, 직관적으로 접근해보자면, 뷰 위젯 속성에 "center"가 들어간 이름의 속성을 사용하면 될 것 같습니다. 렐러티브레이아웃(RelativeLayout)의 "layout_centerInParent" 속성처럼 말이죠.

하지만 컨스트레인트레이아웃에는 "center"라는 단어가 들어간 속성이 존재하지 않습니다. 명시적으로 부모의 가운데(centerInParent) 배치시킨다는 속성은 제공되지 않죠. 그럼 어떤 방법을 사용할 수 있을까요?

다음과 같은 방법을 한번 써보죠. 먼저 뷰 위젯의 왼쪽 사이드를 부모 레이아웃의 왼쪽 사이드에 맞춥니다. 그런 다음, 뷰 위젯의 오른쪽 사이드를 부모 레이아웃의 오른쪽 사이드에 맞춥니다. 단, 뷰 위젯의 너비(layout_width)는 "wrap_content"로 유지시킨 상태여야 합니다. 그리고 뷰 위젯의 위/아래 쪽 사이드도 동일하게 부모 레이아웃의 위,아래 사이드에 맞춥니다.

사실 이러한 제약은 불가능한(impossible) 제약입니다. 뷰 위젯의 크기가 정확히 부모 레이아웃과 일치하지 않는다면(또는 뷰 위젯의 크기를 MATCH_CONSTRAINT(0dp)로 지정하지 않는다면), 왼쪽 사이드에 대한 제약과 오른쪽 사이드에 대한 제약 두 가지가 모두 만족할 수는 없는 상태인 것이죠. 이런 경우, 컨스트레인트레이아웃은 만족시킬 수 없는 이 두 가지 제약이 뷰 위젯에 동일한 조건으로 양 사이드를 잡아당기는 것처럼 작용하게 되며, 이로 인해 뷰 위젯이 부모 레이아웃의 가운데 위치하게 되는 것입니다.

이러한 힘의 작용은, 자식(Children) 뷰 위젯 간에도 동일하게 적용됩니다.

2. 가운데 위치한 뷰 위젯을 한쪽으로 치우치게(Bias) 만들기.

앞서 설명했듯이, 반대 방향으로 작용하는 두 개의 제약(Constraint)이 동시에 적용되면, 기본적으로 뷰 위젯은 두 가지 제약의 가운데 배치됩니다.

그런데 어떤 경우에는, 뷰 위젯을 무조건 한 가운데 위치시키는 것이 아니라, 중앙에서 옆(또는 위아래)으로 조금 이동시키고 싶은 경우도 있을 것입니다. 즉, 뷰 위젯을 가운데 위치에서 다른 방향으로 조금 치우치게 만드는 것이죠.

이런 경우, 뷰 위젯을 주어진 비율만큼 한 방향으로 치우치게 만드는 속성을 사용할 수 있는데, 바로 Bias(바이어스) 관련 속성입니다. Bias는 "치우침", "편중"이라는 뜻을 가진 단어죠.

Bias와 관련된 제약은 크게 두 개입니다. 수평(Horizontal) 방향에 대한 Bias와 수직(Vertical) 방향에 대한 Bias.

  * layout_constraintHorizontal_bias - 수평 방향(Left/Right 또는 Start/End) 사이드 제약 시, 양 사이드 간 위치 비율.
        > 0 이상의 소수점 값 사용 가능. (예. 0.1, 0.65, 0.821)
        > 뷰의 왼쪽(또는 시작) 사이드 제약 위치가 0의 기준.
        > 뷰의 오른쪽(또는 끝) 사이드 제약 위치가 1의 기준.
        > 기본 값은 0.5(수평 방향 가운데 위치).

  * layout_constraintVertical_bias - 수직 방향(Top/Bottom) 사이드 제약 시, 양 사이드 간 위치 비율.
        > 0 이상의 소수점 값 사용 가능. (예. 0.1, 0.65, 0.821)
        > 뷰의 위 사이드 제약 위치가 0의 기준.
        > 뷰의 아래 사이드 제약 위치가 1의 기준.
        > 기본 값은 0.5(수직 방향 가운데 위치).

Bias 속성을 사용한 예제는 아래와 같습니다.

또한 Bias 관련 제약은, 가운데 위치 정렬(Centering Positioning)이 자식(Children) 뷰 위젯 간에도 적용됨을 확인했듯이, 부모 레이아웃 뿐만 아니라 자식 뷰 위젯 사이에도 동일하게 동작합니다.

3. 참고.

• 개발자 레시피 - 컨스트레인트레이아웃 관련 항목
  • [안드로이드 컨스트레인트레이아웃 (Android ConstraintLayout)]을 참고하세요.
  • [컨스트레인트레이아웃 - 레이아웃 공통사항 (ConstraintLayout - Layout Common)]을 참고하세요.
  • [컨스트레인트레이아웃 - 상대 위치 지정 (ConstraintLayout - Relative Positioning)]을 참고하세요.
  • [컨스트레인트레이아웃 - 여백 (ConstraintLayout - Margins)]을 참고하세요.
• 개발자 레시피 - 레이아웃 관련 항목
  • [안드로이드 레이아웃 (Android Layout)]을 참고하세요.
  • [안드로이드 레이아웃 공통사항 (Android Layout Common)]을 참고하세요.
  • [안드로이드 리니어레이아웃 (Android LinearLayout)]을 참고하세요.
  • [안드로이드 렐러티브레이아웃 (Android RelativeLayout)]을 참고하세요.
• 레이아웃에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 레이아웃 항목]을 참고하세요.
• ConstraintLayout에 대한 자세한 도움말.
  • [안드로이드 개발 참조문서 ConstraintLayout]을 참고하세요.
  • [안드로이드 개발 참조문서 ConstraintLayout.LayoutParams]을 참고하세요.
• Build a Responsive UI with ConstraintLayout.
  • [Build a Responsive UI with ConstraintLayout ]을 참고하세요.

.END.