안드로이드 위젯, 레이아웃 이란
안드로이드 에서는 각각의 화면을 액티비티라고 합니다. 그안에 내용물들에 대해서는 뷰라고 표현합니다.
뷰(VIEW) : 컨트롤 및 위젯 이라 하는 유저가 볼수 있는 메뉴 구성 화면을 말한다.
뷰그룹(ViewGroup) : 뷰가 여러개 모인것들을 말한다. 뷰그룹이 되어있는것도 상속이 가능.
상속 이라는 개념은 부모가 자식에게 상속을 하는경우와 같이 프로그램 언어에서도 어떤 단위를 상속받아서 사용할수 있게할수 있는 개념입니다.
위젯 : 뷰에서 컨트롤의 역할을 하는것.
레이아웃 : 각각의 위젯(컨트롤)을 배치하는 것.
이미지로 본 안드로이드 구조 입니다.
그러면 버튼을 만들어서 기본적인 layout을 확인해보겠습니다.
content_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="com.example.jonghyun.layout.Layout"
tools:showIn="@layout/activity_layout">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2"
android:layout_below="@+id/button"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginTop="34dp" />
<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="New Button"
android:id="@+id/button3"
android:layout_marginTop="29dp"
android:layout_below="@+id/button2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button5"
android:layout_alignBottom="@+id/button"
android:layout_alignRight="@+id/button"
android:layout_alignEnd="@+id/button" />
</RelativeLayout>
결과
Widgets 메뉴에 Button을 3개 만든뒤 아래 화면 속성 창에서 layout:width: 속성과 layout:height 속성을 클릭해 다음과같이 만들어보시기 바랍니다.
안드로이드 세번째 포스팅에 설정한 핸드폰에서 만든 어플을 실행해 보기위해서는 shift+f10 실행 버튼시 usb에 연결된 핸드폰으로 실행하면 됩니다.
실행이 완료되고 핸드폰에서 상태를 확인해 보면 버튼에 widht 가로 height 세로가 설정한대로 적용되는것을 확인 할수 있다.
이와 같이 높이와 넓이를 match_parent로 설정할 경우에 단말기에 전체 사이즈에 맞게 조정되므로 사이즈가 다른 단말기에서도 같은 배치를 적용할수 있으므로 match_parent로 넓이와 높이를 설정하는게 유용하다. 정해진 사이즈로 버튼을 배치할경우 핸드폰 사이즈에 따라 잘못 배치 될수 있는 경우를 배제하기위해 전체 사이즈를 기준으로 적용하는 방법이다.
안드로이드 레이아웃 종류
리니어 레이아웃 : 박스(Box)모델, 사각형 영역에 화면 구성, 자바의BoxLayout 유사
상대 레이아웃 : 부모 컨테이너, 다른 뷰와 상대적 위치를 이용한 화명구성
프레임 레이아웃 : 하나의 뷰만 사용시 이용, 뷰를 중첩하여 각뷰를 전황하여 보여줄때 유용함
테이블 레이아웃 : 격자(Grid) 모델, HTML 정렬 방식과 유사
스크롤 뷰 : 스크롤이 가능한 컨테이너, 화면이 넘어갈때 스크롤 기능 제공
레이아웃 속성표
속성 | 설명 |
fill model | 부모뷰 여유공간 설정 |
orientation | 뷰 추가시 방향 설정 |
gravity | 뷰 정렬 방식 |
padding | 뷰 여유 공간 설정 |
weight | 뷰가 차지하는 공간을 추가할때 값 설정 |
리니어 레이아웃 : 안드로이에서 사용되는 레이아웃중 가장 많이 사용되는 레이아웃.
content_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:showIn="@layout/activity_layout"
tools:context="com.example.jonghyun.layout.Layout"
android:orientation="horizontal">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button3" />
</LinearLayout>
속성 화면
버튼을 3개 추가한뒤 orientation(방향)을 horizontal(가로)로변경합니다.
3개의버튼의 각각의 속성을 layout:width, layout:height 속성을 모두 wrap_content로 변경합니다. 완료가 된후 실행을 해보면 리니어레이아웃을 통해 버튼3개를 쉽게 가로로 정렬한것을 보실수 있습니다.
자바 코드로 리뉴얼레이아웃 컨트롤
xml에서 리뉴얼 레이아웃을 배치할수 있지만 db 접속 이나 네트웍을 통해 어떠한 데이터를 받아와서 레이아웃에 표현해야 할땐 java에서 표현하는것이 편하다.
먼저 기존 java 폴더에 Layou.java를 복사해서 붙여넣기를해서 SampleLayou.java 파일을 만든다.
필요없는 소스를 우선지운뒤 아래 소스를 작성한다.
SampleLayou.java
package com.example.jonghyun.layout;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
public class SampleLayout extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//new 연산자를 통해 LinearLayout 생성
LinearLayout TestLayout = new LinearLayout(this);
//생성된 레이아웃의 메소드를 통해 방향설정
TestLayout.setOrientation(LinearLayout.VERTICAL);
//레이아웃 안에 추가될 뷰 파라미터 설정
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
//버튼 객체 생성
Button btn1 = new Button(this);
btn1.setText("버튼1");
btn1.setLayoutParams(params);
//TestLayout에 btn1 객체를 넣는다.
TestLayout.addView(btn1);
//화면에설정하기위해 setContentView 메소드에 TestLayout을 넣는다.
setContentView(TestLayout);
}
}
그다음 왼쪽 파일리스트중 mainfests -> AndroidManifest.xml 파일에 android:name=
소스 구문을 찾아서 아래처럼 새로이 만든 SampleLayout.java를 넣어주면 실행시 화면이 SampleLayout에서 생성한 화면을 볼수 있다.
안드로이드 xml에서 작성가능한 소스들은 java로 대부분 표현이 가능하다.
