[안드로이드 스튜디오 강좌 #9]리니어 레이아웃(Linear Layout)-3 뷰 정렬하기(gravity/baselineAligned)

!목표

리니어 레이아웃의 안에 들어 있는 뷰는 위, 오른쪽, 가운데 등의 방향을 지정해 정렬할 수 있다.

gravity라는 속성을 사용해 레이아웃 안 뷰의 무게중심을 설정해 정렬시키는 방법을 알아보자.

 

텍스트뷰로 화면을 구성할 떄 종종 텍스트가 옆의 텍스트뷰나 버튼에 들어있는 텍스트와 높이가 맞지 않는 경우를 볼 수 있다. 이럴 때 baselineAligned속성을 이용해 일렬로 정렬시키는 방법을 알아보자.

 

 

1. 뷰 정렬하기 (layout_gravity/gravity)

리니어 레이아웃 안에 들어 있는 뷰는 위, 오른쪽, 가운데 등의 방향을 지정해 정렬할 수 있다.

이때 안드로이드에서는 gravity라는 속성을 사용해 무게중심을 놓아주는 것을 설정해준다.

 

-layout_gravity : 부모 컨테이너의 뷰가 모두 채워 지지 않아 여유 공간이 생겼을 때 여유 공간 안에서 뷰를 정렬

-gravity : 뷰안에 표시하는 내용물을 정렬 (텍스트나 이미지)'

 

 

 

-layout_gravity 실습

-XML 코드 작성

새로운 xml을 생성하기 위해 project창에서 app-res-layout-우클릭-New-Layout resource file을 선택하자

 

 

설정 창이 뜨면 Filename에는 gravity.xml,

최상위 레이아웃을 설정해주는 Root element에 LinearLayout을 입력하자.

 

생성 된 gravity.xml 파일을 열어, code을 입력해보자.

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

    <Button
        android:id ="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="left" />

    <Button
        android:id ="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="center" />

    <Button
        android:id ="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="right" />

</LinearLayout>

이와 같이버튼이 3개가 생성된 것을 확인할 수 있다.

 

 

-디자인 화면에서 변경

만든 버튼들을 모두 지워보고 디자인 화면에서 버튼을 정렬해보자

버튼 세개를 드래그해서 모두 layout width/height 설정을 모두 wrap_content로 변경후 이름을 text를 left, center, right로 변경하자.

 

한 버튼을 선택해서 Attribute창을 쭉 내려보면 layout_gravity가 있다. 각각 left, center, right로 설정해보자.

 

xml 코드의 결과와 같은 모습이 나타난 것을 확인할 수 있다.

 

 

 

 

-gravity 실습

-XML 코드

앞서 만들었던 코드에 이어서 진행하겠습니다.

각 Button안에 android:gravity="방향"을 추가해보자.

 

만약 두가지 gravity 방향을 설정하고 싶으면 | 연산자로 공백 없이 입력해주면 된다.

 

 

XML CODE

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

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:gravity="left"
        android:text="Left" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center_horizontal|center_vertical"
        android:text="Center" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:gravity="right"
        android:text="Right" />
</LinearLayout>

사진과 같이 박스 안에서 text의 정렬된 것을 확인할 수 있다.

 

 

 

 

*참고*

gravity 속성으로 지정할 수 있는 값들

-top:위쪽

-bottom:아랫쪽

-left:왼쪽

-right:오른쪽

 

-center_vertical: 수직방향의 중앙

-center_horizontal: 수평방향의 중앙

 

-fill_vertical:수직 방향을 여유공간 만큼 확대하며 채움

-fill_horizontal:수평 방향을 여유공간 만큼 확대하며 채움

 

-center: 정중앙에 배치

-fill:수직, 수평방향으로 여유공간 만큼 확대

 

-clip_vertical:대상 객체의 상하길이가 여유공간만큼 남는 부분을 잘라냄

                한방향으로도 잘라낼수 있음

(top|clip_vertical: 아랫쪽에 남는 부분 잘라내기)

-clip_horizontal:  대상 객체의 좌우길이가 여유공간만큼 남는 부분을 잘라냄

 

 

 

 

 

2. baselineAligned 속성을 이용해 정렬하기

텍스트뷰로 화면을 구성할 떄 종종 텍스트가 옆의 텍스트뷰나 버튼에 들어있는 텍스트와 높이가 맞지 않는 경우를 볼 수 있다.

이럴 때 baselineAligned속성을 이용해 일렬로 정렬이 가능하다.

 

 

-실습

실습하기 위해 새로운 레이아웃을 생성해주자

filename에는 basline.xml

Root element에는 LinearLayout을 입력해보자

 

 

-XML 코드

아래와 같은 코드를 입력해주자.

참고로

android:textColor="#16진수 컬러값": 는 텍스트의 컬러를 설정해준다. android:textSize="글자크기값": 은 글자 크기를 설정해준다.

<?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/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="큰글씨"
        android:textColor="#ffff0000"
        android:textSize='40sp'
        />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="중간글씨"
        android:textColor="#ff00ff00"
        android:textSize='20sp'
        />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="작은글씨"
        android:textColor="#ff0000ff"
        android:textSize='10sp'
        />


</LinearLayout>

 

 

 

-디자인 화면

최상위 레이아웃을 vertical에서 horizontal로 변경한 후, 텍스트뷰 3개를 화면에 추가한다.

 

Attribute Tap에서 텍스트 순서대로

 

text속성을 '큰글씨',' 중간글씨', '작은글씨'

textSize를 '40sp', '20sp', '14sp'

textColor를 '#ff0000', '#00ff00', '#0000ff'로 설정해준다.

 

디자인 화면에서 텍스트 3개 추가

텍스트 크기 변경

텍스트 컬러 변경

 

그럼 사진과 같이 아래쪽 바닥면이 똑같이 맞춰진 것을 확인할 수 있다.

 

baselineAligned가 기본으로 "True" 설정되있기 때문이다.

 

XML 코드에서

최상위 레이아웃인 리니어 레이아웃에android:baselineAligned="false"부분을 추가해주자

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

 

 

또는 디자인 화면의 Attribute 창에서baselineAligned를 설정해줄 수 있다.

 

 

 

## 이 글은 허락을 받아 Do it 안드로이드 앱 프로그래밍을 참고해서 작성되었습니다.

공부를 하며 개인용으로 정리하는 것이기 때문에 틀린 부분이 있을 수도 있습니다.

도서에는 더 자세하고 알기 쉽게 설명이 되어 있어 도서를 참고하면서 공부하는 것을 추천드립니다.

도서 정보 : http://www.yes24.com/Product/Goods/15789466

Do it! 안드로이드 앱 프로그래밍

유투브 강의 : https://www.youtube.com/watch?v=nN4xnEcnjE8