사용자정의 뷰 생성 및 배치1

이 자료들은 팁스소프트에서 제공하는 [ 알짜배기 ] 프로그램을 이용하면 더 편리하게 볼수 있습니다.

* 알짜배기 프로그램 받기 - http://www.tipssoft.com/bulletin/tb.php/QnA/8406

* 안드로이드 강좌 목록 - http://www.tipssoft.com/bulletin/tb.php/old_bbs/501

View 클래스는 안드로이드 어플리케이션에서 사용자 환경을 구성하기위한 가장 기본적인 클래스입니다.

그래서 사용자와 상호작용하는 대부분의 컨트롤이 View 클래스에서 상속받아 만들어져 있습니다.

예를 들어 버튼, 에디트텍스트 등도 모두 View 클래스에서 상속된 클래스입니다.

이미 제공되는 View 클래스들은 자기의 용도에 따라서 사용하기 편하도록 제작되었기 때문에 해당

용도로 사용할 때에는 매우 편리합니다. 하지만 모든 기능을 미리 구현할 수 없기때문에 많이 사용되는

기능들만 View 클래스로 만들어져 제공되고 있습니다. 따라서 자신이 원하는 기능을 가진 View 클래스가

존재하지 않는다면 직접 View 클래스에서 새로운 클래스를 상속받아 원하는 기능을 가진 View 클래스를

만들어야 합니다.

이 강좌에서는 기존의 정형화된 View 클래스를 사용하는 것이 아니라 사용자가 직접 View 클래스를

만드는 방법과 배치하는 방법에 대해서 설명하도록 하겠습니다.

1. 간단한 사용자정의 뷰 생성하기

사용자정의 뷰를 만들려면 View 클래스에서 새로운 클래스를 상속받고, 해당 클래스에 출력 형식과

이벤트 핸들링을 구성하여 만들 수 있습니다.

View 클래스는 아래와 같이 세 종류의 생성자를 가지고 있으며 뷰가 어떤 방식으로 사용되어지는가에

따라서 호출되는 생성자가 달라집니다.

뷰는 시스템 자원이기때문에 안드로이드 시스템에 의해서 관리되어 집니다. 따라서 액티비티에서

뷰를 사용하려면 액티비티가 안드로이드 시스템에 뷰 생성을 요청해야합니다. 안드로이드 시스템은

뷰를 생성하기 위해서 해당 액티비티의 정보를 필요로하기때문에 View 클래스의 생성자에 해당

액티비티의 참조값을 요구합니다.

View 클래스의 생성자는 실행의 의미를 가진 액티비티를 요구하는 것이 맞지만 Activity 클래스를

사용하면 해당 View 클래스는 Activity 클래스에 종속되기때문에 Activity 클래스의 상위 클래스인

Context 클래스를 사용하여 실행 의미를 가진 다른 클래스도 적용 가능하도록 구현되어있습니다.

컨텍스트(Context) - http://www.tipssoft.com/bulletin/tb.php/FAQ/967

따라서 View 클래스의 모든 객체 생성자에는 Context 클래스 객체가 넘어갑니다.

1.1 public View (Context context);

이 객체 생성자는 자바 코드에서 직접 View 객체를 생성할 때 사용됩니다. 즉, XML 형식의

리소스를 활용하지 않는 경우에 사용됩니다.

1.2 public View (Context context, AttributeSet attrs);

리소스에서 XML로 정의한 뷰의 속성 값들이 attrs 객체에 저장되어 전달됩니다. 이 값들은 해당

뷰가 만들어질 때 사용됩니다.

1.3 public View (Context context, AttributeSet attrs, int defStyle);

context 와 arrts 는 위에서 설명한 것과 같습니다. 세번째 인자인 defStyle 정수 값은 뷰에 어떤

스타일 테마를 적용할 것인지 나타내는 것입니다. 0 을 설정하면 어떠한 스타일도 적용되지 않으며

리소스의 XML 에서 android:theme 에 특정 값을 설정하면 해당 값에 맞는 스타일이 적용됩니다.

View 클래스의 생성자에는 뷰를 생성하는 코드가 정의되어 있기때문에 사용자 정의 뷰를 생성했다면

해당 클래스의 생성자에서 부모 클래스의 객체 생성자를 반드시 호출해야 합니다. 따라서 뷰를 생성할

수 있도록 넘어온 매개 변수들과 함께 super( ... ); 를 반드시 호출해야 합니다.

다음은 뷰의 전체 영역에 배경색을 칠하는 사용자정의 뷰의 예제 코드입니다. 이 코드는 리소스를

XML 로 구성하였기 때문에 매개 변수가 두개짜리인 생성자는 반드시 존재하여야 합니다.

// XML 에서 사용자정의 뷰를 배치할 때 사용하는 패키지 경로

package com.example.CustomView;

import android.graphics.*;
import android.view.View;
import android.content.Context;
import android.util.AttributeSet;

// 뷰를 상속받는 사용자정의 뷰를 정의한다.

public class TipsView extends View
{

// 여러가지 색상 값으로 초기화된 배열을 선언한다.

private final static int []m_color = {Color.WHITE, Color.YELLOW, Color.BLUE, Color.RED,

Color.GREEN};

// 사용할 색상 배열의 index 를 저장할 멤버 변수
private int m_color_index = 0;

// 자바 소스 코드에서 이 클래스를 생성할 때 반드시 있어야 하는 생성자

public TipsView(Context c)
{

// View 클래스에 컨텍스트를 전달한다.
super(c);
}

// XML 코드에서 이 클래스를 배치할 때 반드시 있어야 하는 생성자

public TipsView(Context c, AttributeSet attrs)
{

// View 클래스에 생성자로 넘어온 인자들을 전달한다.
super(c, attrs);
}

// XML 코드에서 이 클래스에 theme 를 사용할 때 반드시 있어야 하는 생성자
public TipsView(Context c, AttributeSet attrs, int defStyle)
{
// View 클래스에 생성자로 넘어온 인자들을 전달한다.
super(c, attrs, defStyle);
}

// 사용자정의 뷰의 출력 형식을 정의하는 오버라이딩된 메소드

protected void onDraw(Canvas canvas)
{

// 배열에 정의된 색상으로 뷰의 배경색을 칠한다.
canvas.drawColor(m_color[m_color_index]);
}

// 색상 배열의 index 를 변경하는 메소드

public void changeBgColor()
{
m_color_index = (m_color_index + 1)%5;

// 화면 갱신을 위하여 onDraw 메소드를 호출하도록 한다.
invalidate();
}
}

2. 사용자정의 뷰 XML 코드로 배치하기

XML 코드에서 사용하는 컨트롤들의 요소명은 이미 네임스페이스에 정의된 것입니다. 그래서

사용자가 정의한 View 의 경우에는 직접 팩키지명과 클래스명을 입력하여 명시해주어야합니다.

아래의 코드는 버튼과 사용자정의 뷰가 LinearLayout 으로 배치된 XML 코드입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<Button
android:id="@+id/id_btn"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Change View Color"
/>
<view class="com.example.CustomView.TipsView"
android:id="@+id/id_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>
</LinearLayout>

사용자 정의 뷰는 위의 코드에서처럼 해당 소스 파일이 존재하는 패키지 경로와 클래스 이름을

명시해야 사용할 수 있습니다. 패키지 경로가 com.example.CustomView 이고 클래스명이

TipsView 이면 두개를 연결하여 com.example.CustomView.TipsView 를 사용해야 하는 것입니다.

위의 코드처럼 클래스명을 명시해도 되고, 아래의 코드처럼 축약형으로 사용할 수 있습니다.

<com.example.CustomView.TipsView

android:id="@+id/id_view"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

위의 코드에서 클래스명을 풀패키지 경로로 명시하는 것 외의 다른 부분(id, layout_width, ... )은

지금까지 사용했떤 다른 컨트롤에서 속성을 정의했던 것과 동일하게 하시면 됩니다.

3. 예제 실행화면

아래의 그림은 지금까지 설명한 사용자정의뷰를 생성하는 방법과 배치하는 방법을 적용하여 만든

어플리케이션 실행 화면입니다. 어플리케이션을 실행하여 상단의 버튼을 누르면 사용자정의 뷰에서

출력하는 색상이 변경됩니다.