이번 벨로그에서는 실습이 아닌 ConstraintLayout에 대하여 다뤄보려 한다.
ConstraintLayout은 레이아웃 XML 파일을 만들면 기본으로 작성되어 있으며, 개발자가 꼭 이용해야 하는 것은 아니다.
ConstraintLayout
ConstraintLayout은 RelativeLayout과 상당히 유사하다.
◼︎ 상대적 위치 지정
RelativeLayout과 마찬가지로 상대 위치에 따라 뷰의 배치를 제공한다.
▪︎ 가로 축: 특정 뷰를 기준으로 왼쪽(Left), 오른쪽(Right), 시작(start), 끝(end) 상대적인 위치 지정
▪︎ 세로 축: 특정 뷰를 기준으로 위쪽(Top), 아래쪽(Bottom), 문자열 기준선(BaseLine) 상대적인 위치 지정
▶︎ 예시를 들어보자.
<Button
android:id="@+id/btn1"
.../>
<Button
...
app:layout_constraintLeft_toRightOf="@+id/btn1/>위의 첫 번째 Button에 id 속성을 지정하였고, 두 번째 Button에는 layout_constraintLeft_toRightOf 속성을 이용하여 첫 번째 Button의 id 값인 btn1인 뷰의 오른쪽에 자신의 왼쪽을 위치하게 하였다.
ConstraintLayout에서 제공하는 상대 위치 속성은 RelativeLayout보다 많다.
∙ layout_constraintLeft_toLeftOf: 뷰의 왼쪽을 대상 뷰의 왼쪽에 위치
∙ layout_constraintLeft_toRightOf: 뷰의 왼쪽을 대상 뷰의 오른쪽에 위치
∙ layout_constraintRight_toLeftOf: 뷰의 오른쪽을 대상 뷰의 왼쪽에 위치
∙ layout_constraintRight_toRightOf: 뷰의 오른쪽을 대상 뷰의 오른쪽에 위치
∙ layout_constraintTop_toTopOf: 뷰의 위를 대상 뷰의 위에 위치
∙ layout_constraintTop_toBottomOf: 뷰의 위를 대상 뷰의 아래에 위치
∙ layout_constraintBottom_toTopOf: 뷰의 아래를 대상 뷰의 위에 위치
∙ layout_constraintBottom_toBottomOf: 뷰의 아래를 대상 뷰의 아래에 위치
∙ layout_constraintBaseline_toBaselineOf: 뷰의 텍스트 라인에 대상 뷰의 텍스트 라인에 위치
∙ layout_constraintStart_toEndOf: 뷰의 시작에 대상 뷰의 끝을 위치
∙ layout_constraintStart_toStartOf: 뷰의 시작에 대상 뷰의 시작을 위치
∙ layout_constraintEnd_toStartOf: 뷰의 끝에 대상 뷰의 시작을 위치
∙ layout_constraintEnd_toEndOf: 뷰의 끝에 대상 뷰의 끝을 위치
속성값으로 상대 뷰의 id 값 또는 "parent"로 상위 뷰를 지칭할 수 있다.
만약, 상반되는 두 가지 속성을 "parent" 값으로 사용하게 되면 뷰는 상반되는 두 가지 속성 중앙에 위치하게 된다.
◼︎ 여백(margin)
뷰와 뷰 사이의 간격을 표현하기 위해서 margin 설정을 다음의 속성으로 지정할 수 있다.
∙ android:layout_marginStart
∙ android:layout_marginEnd
∙ android:layout_marginLeft
∙ android:layout_marginTop
∙ android:layout_marginRight
∙ android:layout_marginBottom
또한, 상대 뷰가 View.GONE 상태일 때의 margin 값을 따로 설정할 수 있다.
∙ android:layout_goneMarginStart
∙ android:layout_goneMarginEnd
∙ android:layout_goneMarginLeft
∙ android:layout_goneMarginRight
∙ android:layout_goneMarginTop
∙ android:layout_goneMarginBottom
※ View.GONE 상태는 뷰가 화면에 보이지 않으며 크기도 확보하지 못하고 있는 상황이다. 상대 뷰가 화면에 보이고 있을 때의 margin 값을 다르게 설정하여 상대 뷰가 보이지 않는 상황에 대응할 수 있다.
◼︎ 가운데 맞춤과 치우침(bias)
뷰를 부모 중앙에 위치시키지만, 어느 한 쪽으로 치우펴서 나오게 하고 싶을 때 사용한다.
∙ layout_constraintHorizontal_bias: 가로 치우침 조절
∙ layout_constraintVertical_bias: 세로 치우침 조절
▶︎ 예시를 들어보자
<Button
...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_bias="0.2"/>layout_constraintHorizontal_bias을 설정하여 가로 방향 치우침을 명시하였다.
값을 0.2로 지정하면 20% 의 의미로 왼쪽에서 20% 위치에 나타나게 된다.
◼︎ 비율(Ratio)
뷰의 크기를 지정할 때 가로세로 비율에 의한 크기를 지정할 수 있다.
이 속성을 이용하려면 전제 조건이 필요하다. 우선 크기 값이 0dp로 지정되어 있어야 한다.
► 예시를 들어보자
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintLeft_toLeftOf="parent"/>위의 예는 layout_width의 크기를 지정하고 layout_height의 크기는 layout_width의 배율로 결정하고자 "0dp"로 지정한 예이다.
layout_width, layout_height 중 하나가 "wrap_content", "100dp" 등의 크기를 지정하고 나머지를 "0dp"로 지정하여 크기를 layout_constraintDimensionRatio을 이용하여 배율로 결정할 수 있다.
또한, layout_constraintDimensionRatio 속성은 다른 constraint 속성이 함께 지정된 경우에만 적용된다.
배율로 크기를 지정할 때 layout_width, layout_height 값이 모두 0인 경우도 가능하다.
단, 그런 경우에는 속성값에 "W" 또는 "H" 값을 지정하여 어느 쪽의 크기를 배율에 맞게 조정할 것인지를 지정해야 한다.
▶︎ 예시를 들어보자
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_height="0dp"
...
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="H, 2:1" />위의 예는 layout_width, layout_height 값이 모두 0으로 설정되었으며, layout_constraintDimensionRatio 값에 가로를 기준으로 세로 값을 배율에 맞게 조정하기 위해 "H" 단어를 지정하였다.
✏️ 오늘 벨로그 두 개 성공.. 내일 일 마치고 밀려서 못 하던거 다 올려야지.. 분명 금방 끝날 줄 알았는데 까먹었던 것 들 때문에 다시 서치하느라 시간을 많이 썼다. 모래는 저녁 출근이니까 낮에 알람 UI라도 만들어야 겠다.
