'안드로이드 사용자 인터페이스'에 해당되는 글 2건

안녕하세요. 제임스 입니다. 

이번에는 뷰 계층 구조에 대해 언급해 보고자 합니다. 

사용자 인터페이스는 레이아웃들의 집합입니다. 그리고 각각의 레이아웃에 포함되는 위젯 (컴포넌트) 들은 뷰의 서브 클래스로 모두 뷰입니다. 그런 뷰들은 계층 구조를 가지게 됩니다. 이번에는 이 뷰 계층 구조에 대해 정리해 보겠습니다. 

■ 뷰 계층 구조

사용자 인터페이스의 각 뷰는 화면상의 직사각형 영역을 나타냅니다. 뷰는 그 직사각형 안에 그려지는 것에 대한 책임이 있으며, 화면의 뷰 영역에서 발생하는 이벤트(터치, 스와이프, 롱클릭 등등)에 응답해야할 책임도 있습니다. 

사용자 인터페이스 화면은 뷰 계층 구조로 구성되어 집니다. 그리고 뷰 계층 구조는 계층 구조 트리(tree)의 맨 위에 위치한 루트(root) 뷰와 그 밑의 가지에 위치한 자식 뷰로 되어 있습니다. 컨테이너 뷰의 자식 뷰는 자신의 부모 뷰 위에 포개져서 화면에 나타나며, 부모 뷰의 화면 영역 경계 안에만 나타나도록 그 범위가 제한됩니다. 

위 사용자 인터페이스는 버튼과 체크박스 뷰가 자리하고 있는데, 이 뷰들이 위치하는 방법을 제어하는 레이아웃 뷰가 여러개 있습니다. 

코드는 아래와 같이 작성 했습니다. 

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="30dp"
        android:layout_marginRight="30dp"
        android:layout_marginLeft="30dp"
        android:layout_centerHorizontal="true">

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

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

    </LinearLayout>


    <TableLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/ll"
        android:layout_marginTop="20dp"
        >

        <TableRow>
            <CheckBox
                android:text="CheckBox"
                android:layout_marginRight="10dp"/>
            <CheckBox
                android:text="CheckBox"/>
        </TableRow>

        <TableRow
            android:layout_marginTop="30dp">
            <CheckBox
                android:text="CheckBox"
                android:layout_marginRight="10dp"/>
            <CheckBox
                android:text="CheckBox"/>
        </TableRow>

    </TableLayout>

</RelativeLayout>

아래 이미지들은 위 사용자 인터페이스를 뷰 계층 구조적 측면에서 보여 줍니다. 

위 코드 상에서 가장 밖에 있는 RelativeLayout 으로 둘러 싼 모습입니다.

RelativeLayout 안에 같은 Level 에 LinearLayout 과 TableLayout 이 위치하고 있습니다. 

TableLayout 안에는 TableRow 두개가 자리하고 있습니다. 

마지막 이미지를 봤을때 첫번째 왼쪽 체크박스가 있는 부분을 보게 되면 원래는 RelativeLayout 의 영역이었지만, 그 위에 TableLayout 이 자리 하게 되어 이벤트등의 처리에 대한 권한이 TableLayout 으로 넘어 왔습니다. 하지만 그 안에 다시 TableRow 가 자리 하면서 대신하게 되고 다시 해당 위치에 CheckBox 가 위치 하면서 이벤트 처리에 대한 책임을 지게 됩니다. 

위 그림은 구조를 뷰 계층 구조(뷰 트리 구조)로 나타낸 것입니다. 

사용자 인터페이스는 뷰 계층 구조의 형태로 생성된 뷰들로 구성 된다는 것 이번 포스팅의 핵심입니다 :)

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

이번 포스팅 부터는 사용자 인터페이스와 관련된 내용을 정리 하고자 합니다. 

사용자 인터페이스에는 UI 구성을 위한 레이아웃, I/O 입출력 컨트롤, 이벤트 처리, 대화상자, 알림 등등 많은 내용들이 있습니다. 

그중 UI 를 구성하는 레이아웃에 관한 이야기를 지금부터 시작해 볼까 합니다. 

■ 사용자 인터페이스 레이아웃

안드로이드의 모든 사용자 인터페이스 요소들은 View 와  ViewGroup 객체를 사용하여 구축됩니다. 

View 는 사용자가 상호작용을 할 수 있는 무엇인가를 화면에 그리는 객체입니다. 

ViewGroup 은 인터페이스 레이아웃을 정의하기 위해 다른 View 및 ViewGroup 객체를 보유하는 객체입니다. 

▶ ViewGroup 은 다른 ViewGroup 및 View 로 구성됩니다.

레이아웃을 만드는 방법은 크게 두가지가 있습니다. 

하나는 View 객체를 인스턴스화 하여 구축하는 것과 XML 파일을 이용하여 레이아웃 구조를 만드는 방법입니다. 

개발중에는 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.tutorial.james.androidtutorialtest.MainActivity"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:text="TextView 위젯" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="30dp"
        android:text="Button 위젯"/>

</LinearLayout>

위 코드는 XML 파일로 구성한 레이아웃입니다. 

LinearLayout 은 ViewGroup 을 상속받는 객체이며 UI 에서 LinearLayout 위젯을 생성합니다.  

(참고 : https://developer.android.com/reference/android/widget/LinearLayout.html )

<TextView>는 UI에서 TextView 위젯을 생성합니다. 

(참고 : https://developer.android.com/reference/android/widget/TextView.html )

<Button>은 UI에서 Button 위젯을 생성합니다. 

(참고 : https://developer.android.com/reference/android/widget/Button.html )

Button 및 LinearLayout 은 android.widget 의 클래스 중 하나임을 보여주는 이미지 입니다 (Android API 참조)

UI 레이아웃에 대한 간략히 개념 잡기로 준비 했습니다. 

UI 레이아웃 생성에 대한 디테일한 내용은 다음 회차에 다루도록 하겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D