마스터Q&A 안드로이드는 안드로이드 개발자들의 질문과 답변을 위한 지식 커뮤니티 사이트입니다. 안드로이드펍에서 운영하고 있습니다. [사용법, 운영진]

ConstraintLayout 마진에 대해 질문좀 드립니다.

0 추천

ConstraintLayout 체인상태 마진에 대해서 질문좀 드립니다...

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/mv_fragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MovieFragment"
    android:background="@drawable/fragment_background">
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/movie_post"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="20dp"
        android:text="1. 군 도"
        android:textSize="30dp"
        android:textColor="@color/white"/>

    <ImageView
        android:id="@+id/slide_bar"
        android:layout_width="wrap_content"
        android:layout_height="10dp"
        app:layout_constraintTop_toBottomOf="@+id/title"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/linear1"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:src="@drawable/home_slider"/>

    <LinearLayout
        android:id="@+id/linear1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintTop_toBottomOf="@id/slide_bar"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="예매율 61.8%"
            android:textSize="20dp"
            android:textColor="@color/white"/>
        <View
            android:layout_width="2dp"
            android:layout_height="17dp"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@color/white"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="15세 관람가"
            android:textSize="20dp"
            android:textColor="@color/white"/>
        <View
            android:layout_width="2dp"
            android:layout_height="17dp"
            android:layout_gravity="center"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:background="@color/white"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="D-1"
            android:textSize="20dp"
            android:textColor="@color/white"/>
        </LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

이미지뷰(사진에서 가로의 가느다란 선) 위아래로 마진을 주어 위 텍스트뷰와

아래 리니어레이아웃사이의 간격을 조금 띄우고 싶었습니다. 하지만 이미지뷰에서 탑으로는는 마진이 적용

되었지만 바텀으로는 마진이 적용되질 않았습니다. 리니어 레이아웃에서 탑으로 마진을 주면 적용이 되었

습니다. 처음에는 이해가 가질 않다가 컨스트레이아웃의 마진은 해당방향으로 제약이 걸려있어야

적용됨을 이해했습니다. 그래서 이미지뷰에서 바텀쪽으로 제약을 걸었고 

app:layout_constraintBottom_toTopOf="@+id/linear1"

(코드에서 해당부분)

하지만 그래도 이미지뷰의 바텀마진은 적용 되질않았고 

이미지뷰의 바텀과 리니어레이아웃의 탑이 서로 연결되어있는 체인상태에서는 마진이 적용되질 않는다고

알게되었습니다.

 

그런데 이 상태에서 이미지뷰에서 바텀에 마진을 주면 먹히질 않다가

리니어 레이아웃에서 탑으로 마진을 주면 마진이 적용되는 것을 확인했습니다.

서로 연결되어있는 상태에서 마진이 적용안되는것이라면 리니어 레이아웃에서의 탑은 마진이

적영되고 왜 이미지뷰에서 마진바텀은 적용이 되질 않는건가요?

 

 

codeslave (3,940 포인트) 님이 2020년 9월 24일 질문
위의 레이아웃에서 linear1는 불필요해 보이는데요...

1개의 답변

+1 추천
ConstraintLayout에서 margin은 view 자신의 위치를 정할때 사용되기 때문입니다.

즉, 다른 view 위치가 결정될 때는 영향을 주지 못하는 것 입니다.

첨부된 layout에 view들은 모두 가능한 parent top쪽을 향하도록로 정렬되어 있습니다.

따라서 LinearLayout은 ImageView의 bottom에 붙어있어야 한다는 제약대로 동작하는 것입니다.
디자이너정 (42,810 포인트) 님이 2020년 9월 25일 답변
답변 감사드립니다. 선생님 그런데 제가 아직 모자라서 이해가 잘가지를 않는데,
다른 뷰의 위치가 결정될때는 영향을 주지 못한다는 것이 이해가 잘가질 않습니다.
이 말씀은 본문 코드를 예시로 이미지뷰의 바텀에 마진을 주었을때 리니어 레이아웃의 위치가 움직이게 되는 것같은 것을 다른 뷰의 위치에 영향을 준다라고 말하는건가요? 물론 이미지뷰의 바텀 마진을 주어도 움직이지 않습니다..

그런데 제가 실험을 위해 이미지뷰의 바텀을 리니어레이아웃의 탑에 연결한것처럼 타이틀 텍스트뷰의 바텀을 이미지뷰의 탑에 추가로 연결하고 타이틀 텍스트뷰의 바텀에 마진을 주었는데 여기서는 또 움직이는 것을 확인했습니다...
또한 리니어레이아웃-버튼도 마찬가지로 진행했으나 또 마진이 적용됐습니다.

그런데 왜 이미지뷰-리니어레이아웃만 안되는건가요?..
서로 뷰마 다르지 연결되어있는 형태는 똑같습니다..서로의 top,Bottom이 연결되어있고 마진도 바텀에 주었는데 이미지뷰-리니어레이아웃 관계에서
바텀 마진을 주었을때에는 적용되지 않다가.. 텍스트뷰-이미지뷰, 리니어레이아웃-버튼 과의 관계에서 바텀 마진을 주었을때는 마진이 적용되네요..

뭐가 어떻게 되는건지 잘모르겠습니다..선생님이 가르쳐주신것중 제가 어딘가 놓치고 있는게 있을까요...?
...