안드로이드 : ConstraintLayout의 weight 개념. 정리

이런레이아웃을 구성한다고 쳐보자!

ConstraintLayout으로만!

 

그럼 고정비율을 주려면, 

LinearLayout의 weight와는 좀 다르다.

 

 

---

 

ConstraintLayout에서는 비율을 나타내는

 

app:layout_constraintHorizontal_weight 및

 

app:layout_constraintVertical_weight를 사용하는데,

 

 

 

이를 활용하기 위해서는 다음과 같은 방식으로 작성해야 합니다:

 

1. 시작점과 종료점을 설정해야 합니다.

 

예를 들어, 수평 비율을 설정하려면

app:layout_constraintStart_toStartOf 및 app:layout_constraintEnd_toEndOf를 설정해야 합니다.

 

2. app:layout_constraintWidth_percent 또는 app:layout_constraintHeight_percent를 사용하여 비율을 설정합니다.

 

예시로,

두 개의 뷰가 있고 첫 번째 뷰가 화면 너비의 30%를 차지하고 두 번째 뷰가 나머지 70%를 차지하게 하려면:

 

<!-- 첫 번째 뷰 -->
<View
    android:id="@+id/view1"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    app:layout_constraintWidth_percent="0.3"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@id/view2" />

<!-- 두 번째 뷰 -->
<View
    android:id="@+id/view2"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    app:layout_constraintWidth_percent="0.7"
    app:layout_constraintStart_toEndOf="@id/view1"
    app:layout_constraintEnd_toEndOf="parent" />

 

 

해당부분에서의 힌트를 얻어 사용하자. 

 

방향 이름▼

방향이름 한번더 숙지! 

 

 

힌트를 얻어서 재밋게 하고있는데, 여기서 주의할 점은, 

 

이런 방향 값을 잘 줘야한다!!

 

맞다 안드로이드 xml에서 주석 표기 방법은

<!-- 내용 -->이다.

 

단축키는 컨 + / 

 

 

 

나머지값을 비율로 주는 방법은 

 

<!-- 첫 번째 뷰, 화면의 30%를 차지 -->
<View
    android:id="@+id/view1"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    app:layout_constraintEnd_toStartOf="@id/view2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent="0.3" /> <!-- 두 번째 뷰, 화면의 나머지 70%를 차지 -->
<View
    android:id="@+id/view2"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/view1" />

 

ConstraintLayout에서 남은 공간을 특정 비율로 분할하려면 app:layout_constraintWidth_percent 또는 app:layout_constraintHeight_percent 속성을 사용하되, 다른 제약 조건과 함께 사용하는 것이 핵심입니다.

아래는 ConstraintLayout에서 두 개의 뷰가 있고, 첫 번째 뷰가 화면 너비의 30%를 차지하고, 두 번째 뷰가 나머지 70%를 차지하도록 설정하는 예시입니다:

 

 

이 경우, 첫 번째 뷰는 화면 너비의 30%를 차지하도록 설정되었고, 두 번째 뷰는 첫 번째 뷰와 부모의 오른쪽 사이에 위치하므로 나머지 공간인 70%를 자동으로 차지하게 됩니다.

이런 방식으로 여러 뷰와 함께 제약 조건을 사용하여 복잡한 레이아웃도 표현할 수 있습니다.

 

 

 

---

쟈란~ 뼈대 완성!! 

 

<?xml version="1.0" encoding="utf-8"?>

<!--전체 세로배열 시작-->
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- 전체비율 = 50(이미지) : 15(판매자정보) : 50(판매자글) : 10(가격및 채팅하기) -->

    <!-- [50(이미지)]이미지 들어갈 레이아웃, 즉 50/125(0.4) 비율  -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/infoUser"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--[15(판매자정보)15/125=0.12]판매자 아이콘, 아이디와 주소, 매너온도 들어갈부분,가로배열(10:25:15)//시작-->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/infoUser"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.12"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/image">

        <!--판매자 아이콘 부분 // 둥근 이미지 비율 10/50(0.2)-->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/sellericon"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintEnd_toStartOf="@+id/sellIdAndAdd"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.2" />

        <!--아이디, 주소 부분이 들어갈 네모칸 (세로배열1:1) 시작 비율 25/50-->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/sellIdAndAdd"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintStart_toEndOf="@+id/sellericon"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.5">
            <!--아이디부분-->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/sellerId"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                app:layout_constraintBottom_toTopOf="@+id/sellerAdd"
                app:layout_constraintHeight_percent="0.5"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/sellerAdd"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.5" />
            <!--아이디, 주소 부분이 들어갈 네모칸 (세로배열1:1) 종료-->


        </androidx.constraintlayout.widget.ConstraintLayout>

        <!--        매너온도, 아이콘이들어갈 곳 비율 15/50, 박스 안쪽비율 아이콘 2:1 -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/mannerAndtext"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/sellIdAndAdd"
            app:layout_constraintTop_toTopOf="parent">

            <!--[2]온도 및 아이콘 표시 (세로) -->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/manner"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHeight_percent="0.7"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <!--[1]아래 매너온도라고 텍스트나오는곳 (세로) -->
            <androidx.constraintlayout.widget.ConstraintLayout
                android:id="@+id/mannerText"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/manner" />


        </androidx.constraintlayout.widget.ConstraintLayout>

        <!--판매자 아이콘, 아이디와 주소, 매너온도 들어갈부분,가로배열 //종료 -->
    </androidx.constraintlayout.widget.ConstraintLayout>
    <!--[50(판매자글)=50/125 = 0.4]판매자 글 -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/seller"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/price"
        app:layout_constraintHeight_percent="0.38"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/infoUser">

        <!-- 판매자글 스크롤 뷰-->
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        </ScrollView>

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- [10(가격및 채팅하기)=10/125 (0.08)]하트, 가격 , 채팅하기버튼 [1:3:2]-->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/price"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/seller">

        <!--[1]=1/6(하트 아이콘 -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/priceheart"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintWidth_percent="0.16"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>

        <!--[3]가격 -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/priceInprice"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintWidth_percent="0.5"
            app:layout_constraintStart_toEndOf="@+id/priceheart"
            app:layout_constraintTop_toTopOf="parent"/>

        <!--[2]채팅하기 버튼 들어갈 공간-->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintStart_toEndOf="@id/priceInprice"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>


    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

Constraint 안에 ConstraintConstraintConstraintConstraintConstraintConstraint ㅋㅋㅋㅋㅋㅋ

번식잼

 

비율로 깔끔하게 뼈대를 완성하였다! 

그럼 이제 이뿌게 샤샤샥 한개씩 넣어보도록 하자