(Android) Padding - Margin

패딩과 마진의 쉬운 설명

​

예를 들어 뷰가 부모 컨테이너의 여유 공각을 꽉 채울 경우! 뷰끼리 너무 붙거나 그 안의 내용물이 너무 꽉차 보여서 , 보기 좀 흉할 수 있다.

​

이를 해결하기 위한 속성이 패딩과 마진

​

뷰의 영역은 테두리선으로 표시 할 수있는데, 이 선을 기준으로 안과 밖이 있다.

안이 패딩 , 밖이 마진이라고 생각하면 댐

이 때 , 테두리선을 기준으로 바깥 공간과 안쪽공간을 모두 포함한 뷰의 공간(뷰가 가진 공간)을 셀(cell)이라고 한다.

​

주로 버튼이나 텍스트 뷰를 위젯이라고 부르니까, 위젯 셀 이라고도 한다.

​

패딩은 테두리선 안쪽의 공간이라고 했으니, 뷰안의 내용물인 텍스트나 이미지가 테두리선과 얼마나 떨어지게 할 것인지를 지정한다. (padding속성)

​

마진은 테두리선 바깥쪽의 공간이라고 했으니, 뷰 밖의 공간을 지정하는 속성으로 얼마나 떨어 뜨리게 할 것인지를 정해주는 것. (layout_margin속성)

​

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="first"
        android:background="#ff0000"
        android:textColor="#ffffff"
        android:textSize="25sp"/>

    <TextView
        android:id="@+id/textView7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="second"
        android:textSize="25sp"
        android:background="#00ff00"
        android:textColor="#ffffff"/>

    <TextView
        android:id="@+id/textView8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="third"
        android:textSize="25sp"
        android:background="#0000ff"
        android:textColor="#ffffff"/>
</LinearLayout>

 

위와 같은 xml을 생성

이렇게 출력이 될것임.

​

이때 first라는 텍스트 위젯부터 건드려보자

​

그림과 같이 padding 속성에 20dp를 주자 , 내용물(글자 뷰)과 테두리 선의 거리가 멀어졌다. 결과적으로 덩치가 커짐.

third 텍스트 뷰에도 똑같이 넣어주면

second 뷰가 아주 좋아 죽는다

챡 붙어있기 때문에 second뷰에 layout_margin을 주면

거리가 떨어진다.

left값에만 따로 10dp 를 줄수있다. 방향조건이 정해져있지않은 속성은 all을 뜻한다(상하좌우)

​

그런데 패딩과 마진값을 크게 수정하거나 그러면

이런식으로 깨져버린다. 위 사진은 세번째 뷰 패딩을 크게 늘린 경우인데.

그 이유는 앞의 텍스트 뷰가 가질 공간이 없어서 아래쪽으로 밀려버리는 현상이 발생한 것이다.

충분히 고려해야 할 사항이다.