[Android(Java)] Design 기초
카테고리: Android(Java)
1. 개요
안드로이드 스튜디오에서는 Layout(.xml)파일을 통해 어플의 외관을 디자인하고 java 또는 Kotlin 코드를 이용하여 기능을 구현한다.
java 코드를 작성하기전에 Layout (.xml)파일을 통해 어플 디자인을 하는 방법을 알아보자.
다음은 간단한 layout 코드와 해당 코드로 만들어질 디자인 예시이다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/tv_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="50dp"
android:textSize="30dp"
android:gravity="center"
android:text="Hello Android"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:gravity="center"
android:orientation="horizontal">
<Button
android:id="@+id/btn_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1"/>
<Button
android:id="@+id/btn_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2"/>
<Button
android:id="@+id/btn_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3"/>
<Button
android:id="@+id/btn_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button4"/>
</LinearLayout>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="20dp"/>
</LinearLayout>
2. 구성 요소
2. 1. View
안드로이드 앱을 개발하기 위해서는 반드시 사용자가 확인할 화면이 필요하다, 이때 사용자 화면에 보이는 구성 요소들을 뷰(VIEW) 라고 칭한다.
뷰는 기본 속성으로 너비(width)와 높이(height)을 지정해 주어야한다.
wrap_content : 해당 뷰가 그려질 수 있는 필요한 (최소한의) 길이
match_parent : 부모가 가지는 길이를 모두 채우는 길이
등을 통해 지정할 수 있고 또는 10px, 10dp, 10sp 등의 수치와 단위를 통해 직접 설정할 수 도 있다.
<View
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<View
android:layout_width="150dp"
android:layout_height="60dp"/>
2.1.1. TextView
View를 상속받는 하위 클래스로 text 속성을 통해 View에 텍스트를 그릴 수 있다.
이를 보조하는 textSize, textColor, textStyle 등의 속성이 있으며 각각 텍스트의 크기, 텍스트의 색깔, 텍스트의 형태(굵게, 기울임 등)를 지정할 수 있다.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="example_text"
android:textColor="#000000"
android:textStyle="bold"
android:textSize="30sp"/>
2.1.2. Button
TextView를 상속받으며 TextView와 거의 동일하나 각 속성에 기본값이 어느정도 부여되어 있다.
2.1.3. EditText
TextView를 상속받으며 사용자로부터 텍스트를 입력받을 수 있다. 입력을 보조하기 위한 hint, inputType 등의 속성들이 있다.
<EditText
android:layout_width="250dp"
android:layout_height="50dp"
android:hint="텍스트를 입력하세요."
android:inputType="text"/>
2.1.4. ImageView
View를 상속받으며 src 속성을 이용해 사진 이미지를 그릴 수 있다. 그릴 이미지는 drawable폴더에 이미지를 저장하여 사용하거나, 비트맵 이미지를 불러와 사용할 수 있다.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/example"/>
2.1.5. ListView
사용자가 정의한 데이터 목록을 아이템 단위로 구성하여 화면에 출력하는 ViewGroup의 한 종류로 기본적으로 세로 방향으로 나열된다. 스크롤 기능이 기본적으로 탑재되어 있으며 divider, dividerHeight 등의 속성을 이용해 아이템 사이의 간격과 간격의 색을 지정할 수 있다.
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:divider="#00000000"
android:dividerHeight="5dp"/>
다만 ListView를 사용하기 위해서는 Adapter가 필수적으로 필요한데 그에 대한 내용은 다음 포스트의 ListView구현을 확인하길 바란다.
2. 2. Layout
화면 내에서 뷰를 정렬을 시켜주어야 하는데 이때 사용되는 것이 바로 레이아웃(Layout)이다.
안드로이드에서 사용하는 대표적인 레이아웃은 LinearLayout, RelativeLayout, FrameLayout, TableLayout 등이 있다.
2.2.1. LinearLayout
방향을 수평 또는 수직 둘중 결정하여 배치하는 레이아웃으로써 가장 기본적으로 사용되는 레이아웃이다. orientation 속성을 통해 수평 수직을 결정할 수 있다.
<!--수평 정렬-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
<!--수직 정렬-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
</LinearLayout>
2.2.2. RelativeLayout
다른 요소들에 의해 상대적으로 위치가 결정되는 레이아웃이다.
RelativeLayout내에 존재하는 뷰들은 다음과 같은 속성을 가진다.
android:layout_toLeftOf=""
android:layout_toRightOf=""
android:layout_above=""
android:layout_below=""
left : 좌측배치
abobe : 상단배치
right : 우측배치
below : 하단배치
2.2.3. FrameLayout
프레임, 액자라는 의미로 컨텐츠들이 겹겹이 쌓여 제일 앞에 놓여있는 컨텐츠가 사용자에게 보이는 형태로 구성하는 레이아웃이다
2.2.4. TableLayout
행과 열로 구분하여 표의 구조와 같은 형식으로 행 또는 열을 이용해 뷰를 정렬한다.
<TableLayout
android:layout_width="300dp"
android:layout_height="300dp">
<TableRow>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"/>
</TableRow>
<TableRow>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"/>
</TableRow>
<TableRow>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorPrimary"/>
<View
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent"/>
</TableRow>
</TableLayout>