안드로이드 버튼 위치 변경 - andeuloideu beoteun wichi byeongyeong

레이아웃 속성을 이용하여 버튼의 영역과 위치를 지정해보자.

1. 우선 버튼을 둘러싼 영역을 선택하고 레이아웃의 너비와 높이를 설정해보자.

match_parent을 선택하면 부모의 크기인 화면를 기준으로,
wrap_content을 선택하면 컨텐츠인 버튼들의 크기에 맞추는 것을 확인 할 수 있을 것이다.

2. 다음은 특정 버튼을 클릭하여 LinearLayout 속성을 지정해보자.

layout_gravity 에서 위치를 선택하면 1번에서 지정한 영역안에서 배치를 하게된다. 1에서 match_parent 했기 때문에 버튼을 bottom하니 아래의 그림처럼 내려갔다.

3. 버튼을 클릭한 뒤 LinearLayout 속성의 layout_weight 의 크기를 키우면 여백에서의 가중치를 늘린다.

따라서 여백을 확인해가며 사용해야 한다. 

다음과 같이 레이아웃과 버튼을 배치해보자.

좌측의 팔레트와 우측의 속성을 이용하면 마진이나 배치 등을 쉽게할 수 있으니 연습해보자.

다음과 같이 이미지 영역 기준으로 오른쪽으로 텍스트를 배치를 한다고 했을 때,

layout_alignRight 는 이미지 영역 내에서의 오른쪽 위치를 지정하는 것이고,

layout_toRightOf 는 이미지를 기준으로 이미지의 바깥에 위치하게 된다.

앞에서 책을 따라 천천히 진행을 하다가 궁금증이 발생한 Button의 위치 변경!

우선 작업은 Graphical Layout에서 이루어진다.

스샷에서와 같이 버튼을 클릭하고 Change Margins를 누른다.

그럼 하나의 창일 뜰텐데 여기서 얼마만큼의 간격을 띄울것인지 숫자dp로 입력하면 끝이다.

그리고 참고용 main.xml내용도 같이 첨부한다.

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

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"//margin준 부분
        android:layout_marginTop="100dp"//margin준 부분

android:text="Button" />

</LinearLayout>

레이아웃

안드로이드 앱 화면을 구성하는 요소들을 뷰(View)라고 칭한다. 버튼, 텍스트, 등등 여러개의 뷰는 각자 정해진 위치를 가지고 있다.

레이아웃(Layout)은 뷰의 배치 방식을 정의한 것이다. Layout 클래스는 View를 배치하는 역할을 가진 ViewGroup이라 할 수 있다. 안드로이드는 뷰를 배치하는데 있어 다양한 종류의 레이아웃을 제공하는데, 이번 글에서는 안드로이드의 대표적인 레이아웃인 LinearLayout에 대해 정리하려 한다.

LinearLayout (리니어 레이아웃)

LinearLayout은 뷰를 한쪽 방향으로 차곡차곡 쌓는다. 바닥에 박스를 차례대로 쌓는 상황을 생각하면 된다. 사용 방법도 간단하다. 한 방향으로 나열하고 싶은 View들을 하나의 LinearLayout 태그로 감싸기만 하면 된다.

뷰를 쌓는 방향 (orientation)

리니어 레이아웃은 뷰를 차례대로 추가하는 레이아웃이므로, 방향은 반드시 지정해야 하는 속성이다.

선택 가능한 방향은 위에서 아래(↓), 또는 왼쪽에서 오른쪽 방향(→)이다.
방향을 지정하는 속성은 android:orientation이다. vertical은 세로 방향, horizontal은 가로 방향으로 정렬시킨다.
세개의 버튼을 세로로 나열하는 코드는 다음과 같다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼3" />

</LinearLayout>

LinearLayout 태그로 감싼 3개의 버튼이 세로 방향으로 정렬된 것을 확인할 수 있다. (좌)

동일한 코드에서 vertical을 horizontal로 바꾸면 버튼은 가로로 배치된다. (우)

뷰의 정렬 방향 (gravity)

LinearLayout 안에 든 뷰는 방향을 지정하여 정렬할 수 있다. 뷰를 정렬할 때는 layout_gravity와 gravity 속성을 사용한다. 두개의 속성은 이름은 비슷하지만 서로 다른 역할을 한다. layout_gravity 속성은 뷰의 위치를, gravity는 뷰에 든 내용물들의 위치를 변경한다.

• layout_gravity : 부모 컨테이너의 남은 영역 안에서 뷰를 정렬하는 데 사용한다.
• gravity : 뷰 내부의 내용물 정렬하는 데 사용한다.

예를들어, 버튼2의 layout_gravity가 end로 되어있다면 Button을 부모 컨테이너인 LinearLayout의 우쪽 방향으로 끌어당긴다.

<?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="wrap_content"
    android:background="@android:color/holo_blue_bright"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:text="버튼1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="버튼2" />

</LinearLayout>

가로가 match_parent로 설정된 TextView의 gravity를 center으로 설정한다면 텍스트(내용물)은 View 내부의 여유공간 내에서 아래쪽으로 달라붙는다.

<?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="wrap_content"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/holo_green_light"
        android:gravity="center"
        android:text="텍스트뷰" />

</LinearLayout>

가로가 match_parent로 설정된 레이아웃 안에서 gravity를 end로 설정하면 아래와 같이 LinearLayout의 내용물인 버튼들이 우측으로 정렬된다.

<?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="wrap_content"
    android:gravity="end"
    android:orientation="vertical">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="버튼2" />

</LinearLayout>

정렬 속성은 끌어 당기는 방향으로 여유 공간이 있을 경우에만 적용된다. 높이가 100인 LinearLayout 안에서 높이가 100인 TextView에 top이나 bottom으로 정렬을 적용한다면 여유 공간이 없으므로 움직이지 않을 것이다.

공간 분할 (weight)

여러개의 뷰를 특정한 비례에 맞춰 배치하고 싶을 때는 layout_weight 속성을 사용한다.

무조건 남아있는 여유 공간을 기준으로 공간을 분할하기 때문에, 이 속성을 사용할 때는 해당 방향의 길이를 0dp로 설정해야 한다. 예를들어 3개의 버튼을 동일한 크기로 가로 방향으로 배치한다면 layout_weight를 각각 1, layout_weight를 0dp로 설정한다.

<?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="wrap_content"
    android:orientation="horizontal">

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="버튼1" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="버튼2" />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:text="버튼3" />

</LinearLayout>

이런 식으로 layout_weight를 설정한다면 버튼1과 버튼2는 가로 영역의 1/4를, 버튼3은 가로 영역의 2/4를 차지하게 된다.

레이아웃의 크기 설정 (padding, margin)

뷰가 차지할 공간은 기본적으로 layout_width와 layout_height에 의해 결정된다.
만약 뷰와 다른 뷰 사이에 여백을 두고싶다면 margin을 사용할 수 있다. margin은 뷰의 테두리선 바깥쪽 공간을 얼마나 띄울 것인지 지정한다.

뷰 내부에서 여유 공간을 두고 싶다면 padding을 사용한다. padding은 뷰 내부의 내용물과 뷰의 테두리를 얼마나 띄울 것인지 지정하는 속성이다. margin과 padding은 LinearLayout이 아닌 다른 레이아웃에서도 공통으로 사용할 수 있는 속성이다.

<?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="wrap_content"
    android:background="@android:color/holo_green_light"
    android:orientation="horizontal"
    android:padding="15dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:background="@android:color/holo_blue_light"
        android:paddingTop="30dp"
        android:text="padding and margin" />

</LinearLayout>

LinearLayout 내부 상하좌우에 padding을 15,TextView 내부 상단에 padding을 30, 좌측에 margin을 20 부여한 모습이다.

요약

• 레이아웃은 ViewGroup을 상속받으므로 하나의 View처럼 다룰 수 있다. 필요에 따라 다양한 종류의 레이아웃을 중첩해서 사용할 수 있으며, 만들어야하는 화면에 따라 적합한 방식을 선택하면 된다.
• LinearLayout : 한쪽 방향으로 차례대로 뷰를 추가하여 화면을 구성한다. 사용시 뷰가 쌓이는 방향을 반드시 지정해야 한다.