3-2 Android UI - Layout _Margin / Padding / Gravity

강의 13:32초부터~ 

요약 :

Margin : 뷰와 다른 뷰(컨테이너)간의 간격

Padding : 컨테이너 의 안쪽으로 들어가는 여백

Gravity : 뷰 안의 정렬 방식

---

▼Margin , Padding

+TIP ) 

여기서 제약은 최소 3개는 들어가야 에러가 안난다.

각각의 위치값은 

top, bottom, start, end로 지정해주고 마진 또는 패딩을 주면 되고.

만약 한번에 4방향으로 같은 값을 주고 싶다하면,

android:layout_marginStart="50dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="32dp"

이런식으로 주던걸, 

그냥 

layout_margin =

뒤에 방향성을 빼버리고 바로 적으면 된다.

---

 

▼gravity

부모 뷰 안에서 해당 뷰의 정렬 방식 지정

• BOTTOM : ­부모 뷰에서 아래 쪽에 위치시킴
• CENTER ­: 부모 뷰의 중앙에 위치시킴
• CENTER_HORIZONTAL : ­부모 뷰의 수평기준으로 중앙에 위치시킴
• CENTER_VERTICAL : ­부모 뷰의 수직기준으로 중앙에 위치시킴
• END­ : 부모 뷰에서 텍스트 방향의 끝(한글이나 영어의 경우는 오른쪽)에 위치시킴
• LEFT : ­부모 뷰에서 왼쪽에 위치시킴
• RIGHT : ­부모 뷰에서 오른쪽에 위치시킴
• TOP : ­부모 뷰에서 위쪽에 위치시킴

어렵지 않은 내용이다.

 

gravity예제▼

해당 화면처럼 만들어보자.

(배경 컬러값은 빼고 버튼에 gravity만 주면서 연습해보겠다.

 

 

 

예제하면서 알게 된 새로운 부분 

 

: 만약, left속성과 top 속성을 같이 주고 싶은 경우 | << 백슬래시에서 쉬프트 누르면 나오는 이거 

이 문자를 써주면 된다.

android:gravity="left|top"

 

그래서  위 처럼 값을 주면 left와 top 속성이 같이 들어간다.

 

<?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"
    >

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L|T"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:gravity="left|top"
        />

    <Button
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C_H|T"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
        android:gravity="center_horizontal|top"
        />

    <Button
        android:id="@+id/button9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="R|T"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:gravity="right|top"
        />

    <Button
        android:id="@+id/button10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L|C_V"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
        android:gravity="left|center_vertical"
        />

    <Button
        android:id="@+id/button11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CENTER"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
        android:gravity="center"
        />

    <Button
        android:id="@+id/button12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="R|C_V"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" 
        android:gravity="center_vertical|right"
        />

    <Button
        android:id="@+id/button13"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L|B"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" 
        android:gravity="left|bottom"
        />

    <Button
        android:id="@+id/button14"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C_H|B"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" 
        android:gravity="center_horizontal|bottom"
        />

    <Button
        android:id="@+id/button15"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="R|B"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" 
        android:gravity="bottom|right"
        />
</androidx.constraintlayout.widget.ConstraintLayout>

 

 

 

 

 

 

연습완료 !