AndroidStudio ConstraintLayout, 가이드라인, 체인 기능

ConstraintLayout이란?

원래, Constraint 는 영어로 制約 라는 의미입니다.

ConstraintLayout은 그 이름대로 레이아웃 부품 중 하나입니다.
ConstraintLayout을 사용하면 플랫 뷰 계층 구조를 가진 크고 복잡한 레이아웃을 만들 수 있습니다 (뷰 그룹의 중첩 없음).
xml 파일을 코드가 아니라 시각적으로 취급할 수 있는 GUI로 만들어 가면 효율적으로 작업을 할 수 있습니다.
반면 LinearLayout은 중첩하여 세로 가로 부품을 정렬합니다.

모든 뷰가 형제 뷰나 부모 레이아웃과의 관계에 따라 배치된다는 점에서 이것은 RelativeLayout 과 비슷하지만 RelativeLayout 보다 유연성이 있습니다.

ConstraintLayout은 모든 부품을 상대적으로 지정합니다.

제약 조건 정의

ConstraintLayout 내에서 뷰의 위치를 ​​정의하려면 뷰에 대해 최소한 하나의 수평 제약 조건과 하나의 수직 제약 조건을 설정해야 합니다. 각 제약 조건은 다른 뷰, 상위 레이아웃, 숨겨진 가이드라인과의 연결 및 정렬을 나타냅니다.
즉, 각 부품과의 위치 관계를 지정합니다.
예를 들면, 「위는 이 부품으로부터 8dp, 왼쪽은 이 부품으로부터 8dp」와 같이.

XML 파일로 기술도 할 수 있지만, 디자인 화면에서 취급하는 것이 효율이 좋은 생각이 듭니다.

ConstraintLayout의 layout_width/height

디자인 화면에서 개발을 진행해 나가는 경우, 제약(Constraint)은, Constraint Widget 로 설정해 갑니다.

Constraint Widget의 아래 그림의 3개의 아이콘을 전환하는 것으로, 부모 부품 가득까지 폭이나 높이를 넓히는 일이나, 센터링이 가능해진다.

※XML ​​파일의 경우, 부모 뷰의 상한 사이즈까지 확장하는 경우는, layout_width/height 속성에 0dp를 지정한다(=Match Constraints). **
・固定: 下のテキスト ボックスに特定のサイズを指定するか、エディタ内でビューのサイズを変更します。

・コンテンツをラップ: ビューはコンテンツを収めるのに必要なだけ拡大します。
・制約に合致: ビューは各辺の制約を満たす範囲内で（ビューのマージンを考慮して）可能な限り大きく拡大します。ただし、この動作は以下の属性と値で変更できます（これらの属性は、ビューの幅を「制約に合致」に設定した場合のみ有効です）。

수평 정렬 변경

디자인 화면에서 레이아웃을 조정하면 세로 화면에서 가로 화면 변경도 쉽게 할 수 있습니다.

위 그림에서 가로 화면으로 변경하려면 etName 와 etMail 의 제약 핸들을 변경할 수 있으면 옆으로 가져올 수 있다.


깨끗하게 기준선을 정리하려면 名前 를 마우스 오른쪽 버튼으로 클릭 > Show Baselene > etNameまでドラッグドロップ

Tips 가이드라인

메뉴 바에서 add Vertical Guideline를 선택하면 지침을 사용할 수 있습니다.
가이드 라인은, 제약의 설정처에 지정해 두면, 가이드 라인에 따라서 변경 내용이 갱신되기 때문에, 편리한 기능.

가이드 라인을 설정하면 쉽게 깨끗하게 배치가 가능합니다.

샘플 코드(가이드라인)

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="115dp" />

Tips 체인 기능

체인 기능을 사용하면 여러 화면 부품을 가로 또는 세로로 그룹화할 수 있는 기능입니다.

설정 절차チェインしたい部品を複数選択>右クリック>Chains>Create Horizontal Chain
또한,
체인된 파트를 마우스 오른쪽 버튼으로 클릭 > Chains > Horizontal Chain Style
를 선택하면[spread],[spread inside],[packed] 의 3개로부터 기능을 선택할 수 있다.

어떤 기능도 체인한 부품을 균등하게 늘어놓을 수 있으므로, 1개 1개 설정하는 수고를 줄일 수 있습니다.