RelativeLayout margin 안먹히는 경우

RelativeLayout margin

안먹히는 경우

ㆍ 이번에는 간단하게 RelativeLayout을 사용할때

    margin이 안먹히는 경우에 대해 알아보겠습니다.

ㆍ 해결방법은 가장 아랫부분에 있으니 윗부분은

    넘겨도 됩니다.

Relativelayout에서 Margin이 안먹힌다?

무조건 안먹히는건 아닙니다.

그냥 기본형태에서는 똑같이 넣어주면 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.marginex.MainActivity">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:text="Hello World!"
        android:layout_marginLeft="20dp"
        />
</RelativeLayout>

이렇게 하면 아래와 같이

문제없이 margin이 적용됩니다.

다른 뷰의 위치를 이용해서

배치할때도 잘 먹힙니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.margin.MainActivity">
    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:text="Hello World!"
        />
    <TextView
        android:layout_below="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:text="Hello World!"
        android:layout_marginLeft="20dp"
        />
</RelativeLayout>

첫번째 TextView아래에

두번째 TextView를 배치하고

margin값을 줘도 아래와 같이

잘 적용됩니다.

그럼 언제 안먹히나?

안먹히는 경우는

View를 Layout전체를

기준으로 정렬했을때 입니다.

이런 경우가 됩니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.margin.MainActivity">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:text="Hello World!"
        android:layout_centerInParent="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="100dp"
        />
</RelativeLayout>

layout_centerInParent = "true"

이렇게 전체 Layout의 중앙에 위치 시킨후에

marginLeft, marginTop을 적용 시켜보면

Margin이 절대 적용 안되는 것을

확인 할 수 있습니다.

이번에는

layout_centerHorizontal = "true"를

넣어보겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.margin.MainActivity">

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:text="Hello World!"
        android:layout_centerHorizontal="true"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="100dp"
        />
</RelativeLayout>

과연 어떻게 나올까요??

뭔가 다르죠?

layout_centerHorizontal은

width 기준으로 center가 적용됩니다.

그러므로 마진이 전혀 적용안된 상황이라면

이런 화면이 나와야 됩니다.

그런데 left와 top에 margin을 적용시켜보니

아래와 같이 marginTop만 적용된 것을 알 수 있습니다.

그렇습니다!

layout_centerHorizontal은

width의 좌우정렬을(left,right) 무시하고

무조건 센터에 배치시키기 때문에

marginLeft와 marginRight는 전혀 먹히지 앟습니다.

그리고 centerHorizontal은

vertical(height)에는 관여를 안하므로

marginTop은 먹히게 되는 것입니다.

이런 원리로,

위에서 보았던 layout_centerInParent는

horizontal, vertical 전부를 기준으로 중앙정렬이기때문에

어떠한 margin도 먹히기 않게 되는 것입니다.

그럼 Margin값을 주고 싶다면? 

결국 중요한건 이 부분이었는데

윗 부분 내용이 길었네요.

해결방법은 간단합니다.

margin을 넣고 싶은 View위에

Margin이 통하는 layout으로 감싸버리면 됩니다.

가장 먼저 떠오르는건

LinearLayout이죠

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.margin.MainActivity">
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="100dp"
            android:textSize="40dp" />
    </LinearLayout>
</RelativeLayout>

이렇게 써놓게 되면

LinearLayout은 부모인 RelativeLayout의

영향을 받게 됩니다.

그러므로 LinearLayout에 layout_centerInParent를

적어 주면 되고,

그리고 우리가 margin을 적용시키고 싶은 TextView는

LinearLayout의 자식이므로 TextView에 margin을

적어주게 되면 아주 잘 먹히게 됩니다.

LinearLayout(부모)의 레이아웃 기준으로 마진을 적용시키게

됩니다.

LinearLayout으로만 가능한게 아니라

margin이 통하는 레이아웃에서는 전부 가능합니다.

FrameLayout도 가능하고

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.margin.MainActivity">
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="100dp"
            android:textSize="40dp" />
    </FrameLayout>
</RelativeLayout>

ScrollView도 가능하겠죠

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tistory.itpangpang.margin.MainActivity">
    <ScrollView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true">
        <TextView
            android:id="@+id/tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="100dp"
            android:textSize="40dp" />
    </ScrollView>
</RelativeLayout>

상황에 맞는

부모의 View를 바꿔서

margin을 적용시켜주면 됩니다.