Android-UI 디자인

이 장에서는 안드로이드 화면의 다양한 UI 구성 요소를 살펴 보겠습니다. 이 장에서는 더 나은 UI 디자인을위한 팁과 UI 디자인 방법도 설명합니다.

UI 화면 구성 요소

Android 애플리케이션의 일반적인 사용자 인터페이스는 작업 표시 줄과 애플리케이션 콘텐츠 영역으로 구성됩니다.

메인 액션 바
보기 제어
콘텐츠 영역
분할 액션 바

이러한 구성 요소는 아래 이미지에도 나와 있습니다.

화면 구성 요소 이해

안드로이드 애플리케이션의 기본 단위는 활동입니다. UI는 xml 파일에 정의되어 있습니다. 컴파일 중에 XML의 각 요소는 메서드로 표현되는 속성을 사용하여 동등한 Android GUI 클래스로 컴파일됩니다.

보기 및보기 그룹

활동은보기로 구성됩니다. 보기는 화면에 나타나는 위젯입니다. 버튼 등이 될 수 있습니다. 하나 이상의 뷰를 하나의 GroupView로 그룹화 할 수 있습니다. ViewGroup의 예에는 레이아웃이 포함됩니다.

레이아웃 유형

많은 유형의 레이아웃이 있습니다. 그 중 일부는 아래에 나열되어 있습니다-

선형 레이아웃
절대 레이아웃
테이블 레이아웃
프레임 레이아웃
상대 레이아웃

선형 레이아웃

선형 레이아웃은 수평 및 수직 레이아웃으로 더 나뉩니다. 즉, 단일 열 또는 단일 행으로 뷰를 정렬 할 수 있습니다. 다음은 텍스트 뷰를 포함하는 선형 레이아웃 (수직) 코드입니다.

<?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” />
</LinearLayout>

AbsoluteLayout

AbsoluteLayout을 사용하면 자식의 정확한 위치를 지정할 수 있습니다. 이렇게 선언 할 수 있습니다.

<AbsoluteLayout
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
   
   <Button
      android:layout_width=”188dp”
      android:layout_height=”wrap_content”
      android:text=”Button”
      android:layout_x=”126px”
      android:layout_y=”361px” />
</AbsoluteLayout>

TableLayout

TableLayout은 뷰를 행과 열로 그룹화합니다. 이렇게 선언 할 수 있습니다.

<TableLayout
   xmlns:android=”http://schemas.android.com/apk/res/android”
   android:layout_height=”fill_parent”
   android:layout_width=”fill_parent” >
   
   <TableRow>
      <TextView
         android:text=”User Name:”
         android:width =”120dp”
         />
      
      <EditText
         android:id=”@+id/txtUserName”
         android:width=”200dp” />
   </TableRow>
   
</TableLayout>

RelativeLayout

RelativeLayout을 사용하면 자식 뷰가 서로에 대해 상대적으로 배치되는 방식을 지정할 수 있으며 다음과 같이 선언 할 수 있습니다.

<RelativeLayout
   android:id=”@+id/RLayout”
   android:layout_width=”fill_parent”
   android:layout_height=”fill_parent”
   xmlns:android=”http://schemas.android.com/apk/res/android” >
</RelativeLayout>

FrameLayout

FrameLayout은 단일보기를 표시하는 데 사용할 수있는 화면의 자리 표시 자입니다. 이렇게 선언 할 수 있습니다.

<?xml version=”1.0” encoding=”utf-8”?>
<FrameLayout
   android:layout_width=”wrap_content”
   android:layout_height=”wrap_content”
   android:layout_alignLeft=”@+id/lblComments”
   android:layout_below=”@+id/lblComments”
   android:layout_centerHorizontal=”true” >
   
   <ImageView
      android:src = “@drawable/droid”
      android:layout_width=”wrap_content”
      android:layout_height=”wrap_content” />
</FrameLayout>

이러한 속성 외에도 모든보기 및 ViewGroup에서 공통적 인 다른 속성이 있습니다. 그들은 아래에 나열되어 있습니다-

Sr. 아니요	보기 및 설명
1	layout_width View 또는 ViewGroup의 너비를 지정합니다.
2	layout_height View 또는 ViewGroup의 높이를 지정합니다.
삼	layout_marginTop View 또는 ViewGroup의 상단에 추가 공간을 지정합니다.
4	layout_marginBottom View 또는 ViewGroup의 아래쪽에 추가 공간을 지정합니다.
5	layout_marginLeft View 또는 ViewGroup의 왼쪽에 추가 공간을 지정합니다.
6	layout_marginRight View 또는 ViewGroup의 오른쪽에 추가 공간을 지정합니다.
7	layout_gravity 자식 뷰의 위치를 지정합니다.
8	layout_weight 레이아웃의 추가 공간을보기에 할당해야하는 정도를 지정합니다.

측정 단위

Android UI에서 요소의 크기를 지정할 때 다음 측정 단위를 기억해야합니다.

Sr. 아니요	단위 및 설명
1	dp 밀도 독립적 픽셀. 1dp는 160dpi 화면의 1 픽셀에 해당합니다.
2	sp 스케일 독립 픽셀. dp와 유사하며 글꼴 크기를 지정하는 데 권장됩니다.
삼	pt 포인트. 포인트는 실제 화면 크기에 따라 1/72 인치로 정의됩니다.
4	px 픽셀. 화면의 실제 픽셀에 해당

화면 밀도

Sr. 아니요	밀도 및 DPI
1	Low density (ldpi) 120dpi
2	Medium density (mdpi) 160 dpi
삼	High density (hdpi) 240dpi
4	Extra High density (xhdpi) 320 dpi

레이아웃 최적화

다음은 효율적인 레이아웃을 만들기위한 몇 가지 지침입니다.

불필요한 중첩 방지
너무 많은 뷰를 사용하지 마십시오.
깊은 중첩 방지