android constraintlayout 속성 정리

android constraintlayout 속성 정리

Bias

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="A"
    app:layout_constraintHorizontal_bias="0.7"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

• bias는 편견, 치우치다는 의미.
• app:layout_constraintHorizontal_bias에서 숫자가 작을 수록 수평에서 start쪽에 치우치고 클수록 end 쪽에 치우친다
• 0.7은 1을 100% 이므로 수평에서 70% 치우쳤다는 의미이다

constrainedWidth, constrainedHeight

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    android:ellipsize="end"
    android:maxLines="1"
    android:text="Hello World!123123123123123123122223231232312321!"
    app:layout_constrainedWidth="true"
    app:layout_constrainedHeight="true"
    app:layout_constraintEnd_toStartOf="@+id/button1"
    app:layout_constraintHorizontal_bias="0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="button1"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/text1"
    app:layout_constraintTop_toTopOf="parent" />

• app:layout_constrainedWidth를 사용하면 전체 너비안에 화면에 요소가 전부보이도록 너비를 수정해준다
• 높이를 벗어나고 싶지 않다면 app:layout_constrainedHeight="true"
• 길이가 길어지는 위젯에 써야한다(위에 예제에서 버튼에 쓰면 안됨)

Percent

<Button
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintWidth_percent="0.4"
    android:text="testtest"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

• layou_width를 0을 주고 layout_constraintWidth_percent에 0~1사이 퍼센트 값을 넣으면 퍼센트에 따라 너비가 달라진다

goneMargin

<Button
    android:id="@+id/hello1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="hello hello1"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    />

<Button
    android:id="@+id/hello2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="hello hello2"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toEndOf="@id/hello1"
    android:layout_marginLeft="10dp"
    app:layout_goneMarginLeft="300dp"
    />

• 관계되어있는 위젯이 gone일 때 고정된 위치에 놓고 싶을 때 (goneMargin... 속성들을 사용한다)
• 만약 app:layout_goneMarginLeft가 설정되어 있다면 관계된 위젯의 visivility상태가 gone일 때 app:layout_goneMarginLeft의 margin값으로 설정된다
• 만약 app:layout_goneMarginLeft가 설정되어 있지 않다면 layout_margin에 설정된 값이 적용됨

<Button
    android:id="@+id/hello1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="hello hello1"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:layout_marginLeft="20dp"
    />

• layout_width을 match_parent로 한 후 margin을 주면 해당 margin만큼 여백이 생긴다

위젯의 길이만큼 너비를 늘리고 싶은 경우

<Button
    android:id="@+id/hello1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:text="hello hello1"
    android:background="#ff0000"
    />

<Button
    android:id="@+id/hello2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toEndOf="@id/hello1"
    android:text="hello hello2"
    android:background="#00ff00"
    />

<Button
    android:id="@+id/hello3"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="@id/hello1"
    app:layout_constraintEnd_toEndOf="@id/hello2"
    android:text="hello hello3"
    app:layout_constraintTop_toBottomOf="@id/hello1"
    android:background="#aaaaff"
    />

• constraintStart_toStartOf에 hello1 id를, constraintTop_toBottomOf에 hello2 id를 넣어준다. 그러면 너비가 wrap_content이기 때문에 hello1, hello2 위젯의 정중앙에 위치하게 된다
• layout_width를 0dp로 하면 start, end가 관계되어있는 위젯의 위치로 이동해서 길이가 맞춰진다

Ratio

<Button
    android:id="@+id/hello1"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    android:text="hello hello1"
    android:background="#ff0000"
    app:layout_constraintDimensionRatio="1:7"
    />

• app:layout_constraintDimensionRatio 속성을 사용해 높이와 너비를 비율을 이용해 길이를 지정할 수 있다
• app:layout_constraintDimensionRatio 속성 값 앞에 있는 숫자가 너비이고 뒤에 있는 숫자가 높이이다

Chains

• chain에는 head가 되는 기준 위젯이 존재
• 가로측 기준일 때 맨 왼쪽노드가 head, 세로축 기준일 때 맨 위 위젯이 head
• chain style은 CHAINT_SPREAD, CHAIN_SPREAD_INSIDE, CHAIN_PACKED 총 3개의 chain style 지원

CHAINT_SPREAD

• CHAINT_SPREAD은 서로 연결된 후 별도의 style을 지정하지 않으면 적용됨

• 모든 노드가 균등한 여백을 가지도록 설정된다

• 만약 한 노드의 너비를 0dp로 한다면 해당 노드가 나머지 2노드를 제외한 넓이를 차지한다

  <Button
    android:id="@+id/hello1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@id/hello2"
    android:text="hello hello1"
    android:background="#ff0000"
    />

CHAIN_SPREAD_INSIDE

• CHAINT_SPREAD 속성과 비슷하다. 단 하나 양끝쪽 여백이 없다는 점이 다르다

• chain style은 head가 되는 노드에 설정하면 된다

• chainStyle 너비를 조정하고 싶을 경우 app:layout_constraintHorizontal_chainStyle="spread_inside" 사용

• chainStyle 높이를 조정하고 싶을 경우 app:layout_constraintVertical_chainStyle="spread_inside" 사용

CHAIN_PACKED

• 여백이 있는 대신 중앙으로 여백없이 노드들이 정렬된다
• head node에 layout_constraintHorizontal_chainStyle 속성을 추가한다
• 너비 조정 시 app:layout_constraintHorizontal_chainStyle="packed" 사용
• 높이 조정 시 app:layout_constraintVertical_chainStyle="packed" 사용
• bias 설정으로 여러 노드를 하나의 bias 값으로 설정 가능

GuideLine

• GuideLine은 실제 앱에서는 보이지 않는 작업을 도와주는 선인다
• guidelien을 기준으로 위젯의 위치를 설정할 수 있다

<androidx.constraintlayout.widget.Guideline  
android:layout_width="match_parent"  
android:layout_height="match_parent"  
android:id="@+id/guide_line"  
android:orientation="vertical"  
app:layout_constraintGuide_percent="0.1" />

<androidx.constraintlayout.widget.Guideline  
android:layout_width="match_parent"  
android:layout_height="match_parent"  
android:id="@+id/guide_line2"  
android:orientation="horizontal"  
app:layout_constraintGuide_percent="0.1" />

Group

• 여러개의 위젯을 하나로 묶어 gone or visibe 하려고 할 때 view계층을 만들어서 하게 되면 depth가 높아지고 코드가 복잡해진다

• 이 때 Group을 사용해서 불필요한 계층을 만들지 않도록 한다

• 아래 예제를 보면 Group 위젯에 constraint_referenced_ids 속성에 id를 작성하여 visibility를 제어하고 있다

• 만약 하나의 위젯이 두개의 group에 속해있을 경우, visibility는 마지막에 정의된 group의 속성을 따른다

<androidx.constraintlayout.widget.Group  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
app:constraint_referenced_ids="hello1,hello2"  
android:visibility="gone"  
/>

<androidx.constraintlayout.widget.Group  
android:layout_width="wrap_content"  
android:layout_height="wrap_content"  
app:constraint_referenced_ids="hello2,hello3"  
/>

Placeholder

• Placeholder는 무엇이든 담을 수 있는 그릇이라고 생각하면 된다.
• 예를 들어 버튼의 위치, 크기 등을 변경하고 싶을 때, java 코드로 변경하지 않고 변경하고 싶은 placeHolder를 만든 다음 이벤트 발생 시 placeHolder가 가지는 contentId를 설정해주면 쉽게 변경이 가능하다
• 아래 예제에서는 click 이벤트가 발생할 때 placeHolder에 button id를 setting한다

<androidx.constraintlayout.widget.Placeholder  
android:id="@+id/placeholder"  
android:layout_width="0dp"  
android:layout_height="0dp"  
app:layout_constraintBottom_toBottomOf="parent"  
app:layout_constraintHeight_percent=".60"  
app:layout_constraintLeft_toLeftOf="parent"  
app:layout_constraintRight_toRightOf="parent"  
/>

• MainActivity.java

public void clickFunction(View view) {  
Log.d("TEST_LOG", "click?");  
Placeholder placeholder = findViewById(R.id.placeholder);  
placeholder.setContentId(R.id.btn1);  
}  

비율로 widget 크기 조정하기

• weight를 줘서 비율로 widget의 너비를 조정할 수 있다
• 비율을 주려는 widget끼리 서로 관계를 가지고 있어야 한다(layout_constraintStart_toStartOf 같은 위치 속성으로 서로가 서로를 기준으로 위치를 잡아야 함)
• 첫번째 노드는 start를, 마지막 노드는 end를 parent로 잡으면 너비, 높이를 꽉채우면서 weight도 적용된다.(만약 양쪽 관계를 잡지 않으면 비율은 되는데, 가로, 세로 화면일 때 같은 dp를 가져 동적화면구성이 되지 않는다)
• 서로 관계를 가지고 있으면 chain 관계 상태. layout_constraintHorizontal_chainStyle 으로 chain style을 설정할 수 있다
• 각 widget에 layout_constraintHorizontal_weight, layout_constraintVertical_weight 속성을 준다(비율은 실수, 정수 둘 다 가능)

<Button
	android:id="@+id/button1"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	app:layout_constraintHorizontal_weight="80"
	app:layout_constraintTop_toBottomOf="@id/toolbar"
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintEnd_toStartOf="@id/button2"
	/>

<Button
	android:id="@+id/button2"
	android:layout_width="0dp"
	android:layout_height="wrap_content"
	app:layout_constraintHorizontal_weight="15"
	app:layout_constraintTop_toBottomOf="@id/toolbar"
	app:layout_constraintStart_toEndOf="@id/button1"
	app:layout_constraintEnd_toEndOf="parent"
	/>