constraint 속성

심재·2024년 10월 23일
0

android

목록 보기
3/4
  1. layout_constraintHorizontal_bias와 layout_constraintVertical_bias:
    설명: 뷰를 부모나 다른 뷰 사이에서 비율로 위치시킬 수 있습니다. 기본적으로 값은 0.5로 중앙에 위치하지만, 이를 변경해 원하는 위치로 조정할 수 있습니다.
<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.3"  <!-- 수평으로 30% 위치 -->
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias="0.8"  <!-- 수직으로 80% 위치 -->
        android:background="@android:color/holo_blue_light"/>
</androidx.constraintlayout.widget.ConstraintLayout>
  1. layout_constraintStart_toEndOf / layout_constraintEnd_toStartOf:
    설명: 뷰를 다른 뷰의 시작/끝과 연결하여 배치할 수 있습니다. 이 속성은 좌우 관계를 기반으로 한 상대적 위치를 쉽게 지정할 수 있습니다.
<androidx.appcompat.widget.AppCompatImageButton
    android:id="@+id/first_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_background"
    app:layout_constraintEnd_toStartOf="@+id/second_button" />

<androidx.appcompat.widget.AppCompatImageButton
    android:id="@+id/second_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher_foreground"
    app:layout_constraintStart_toEndOf="@+id/first_button" />
  1. layout_goneMarginStart, layout_goneMarginEnd:
    설명: 뷰가 GONE 상태일 때 적용되는 특정 마진을 지정할 수 있습니다. 기본 마진과는 별도로, 뷰가 보이지 않을 때 다른 뷰와의 간격을 조절하는 데 유용합니다.
<View
    android:id="@+id/viewA"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/viewB"
    app:layout_marginEnd="8dp"
    app:layout_goneMarginEnd="16dp"  <!-- GONE 상태일  마진을 다르게 설정 -->
    android:background="@android:color/holo_blue_light" />

<View
    android:id="@+id/viewB"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintStart_toEndOf="@+id/viewA"
    app:layout_constraintEnd_toEndOf="parent"
    android:background="@android:color/holo_red_light" />
  1. layout_constraintHeight_percent / layout_constraintWidth_percent:
    설명: 화면이나 부모 뷰의 일정 비율로 뷰의 크기를 설정할 수 있습니다. 화면 크기에 따라 자동으로 크기가 조정됩니다.
<View
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintWidth_percent="0.5"  <!-- 부모의 50% 너비 -->
    app:layout_constraintHeight_percent="0.3"  <!-- 부모의 30% 높이 -->
    android:background="@android:color/holo_green_light"/>
  1. layout_constraintGuide_begin, layout_constraintGuide_end, layout_constraintGuide_percent:
    설명: 가이드라인을 통해 뷰를 배치하는 기준을 세울 수 있습니다. 고정된 크기 또는 비율에 따라 가이드라인을 설정하여 레이아웃을 더 유연하게 조절할 수 있습니다.
<androidx.constraintlayout.widget.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintGuide_begin="100dp"  <!-- 100dp에서 가이드라인 시작 -->
    android:orientation="vertical"/>

<androidx.constraintlayout.widget.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintGuide_percent="0.5"  <!-- 부모의 50% 지점에 가이드라인 설정 -->
    android:orientation="horizontal"/>
  1. layout_constraintCircle, layout_constraintCircleRadius, layout_constraintCircleAngle:
    설명: 뷰를 원형으로 배치하는 속성으로, 다른 뷰를 중심으로 특정 각도와 반경을 사용하여 원형 배치할 수 있습니다.
<View
    android:id="@+id/center_view"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_bright"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent"/>

<View
    android:layout_width="30dp"
    android:layout_height="30dp"
    android:background="@android:color/holo_green_light"
    app:layout_constraintCircle="@id/center_view"  <!-- 중심  -->
    app:layout_constraintCircleRadius="100dp"  <!-- 중심으로부터 100dp 떨어짐 -->
    app:layout_constraintCircleAngle="45"  <!-- 45도 위치 -->
    />
  1. layout_constraintBaseline_toBaselineOf:
    설명: 텍스트나 버튼과 같은 뷰의 기준선(baseline)을 다른 뷰의 기준선에 맞추는 속성입니다. 텍스트 기반 뷰들을 정렬하는 데 유용합니다.
<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView 1"/>

<TextView
    android:id="@+id/text2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView 2"
    app:layout_constraintBaseline_toBaselineOf="@id/text1"/>  <!-- text1 기준선과 정렬 -->

layout_constraintDimensionRatio와 같은 속성은 다양한 제약 조건을 쉽게 처리할 수 있도록 도와줍니다.
이 외에도 비율, 바이어스, 체인, 원형 배치, 가이드라인 등 여러 유용한 속성들이 있으니, 복잡한 레이아웃을 구현할 때 적극적으로 활용하면 좋습니다.
ConstraintLayout을 사용하면 복잡한 UI 레이아웃도 쉽게 구성할 수 있고, 위에서 소개한 다양한 속성을 활용하면 더 유연하고 강력한 디자인을 만들 수 있습니다.

profile
언제나 개발중

0개의 댓글