Android Compound Control Example

커스텀 콤포넌트를 작성하는 방법 중에 한가지는 여러개의 콤포넌트를 한곳에 모아서 레이아웃xml 을 작성하고 그 레이아웃 xml 파일을 읽어들여서 출력하는 커스텀 UI 클래스를 작성하여 그 클래스를 다시 main.xml에서 사용한다면 보다 쉽게 복합 콤포넌트를 재활용할 수 있을 것이다.

다음 그림과 같이 다소 복잡한 콘트롤들이 한 그룹을 형성하여 여러 곳에서 자주 사용된다면 일일이 매번 이런 레이아웃을 작성하느라 시간을 소비할 것이 아니라 이 레이아웃 자체를 하나의 복합 커스텀 컨트롤로 작성하여 재사용하는 것이 좋을 것이다.

compound_ui_layout.xml (위의 그림과 같이 구성한 레이아웃 파일)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  android:id="@+id/myCompoundControl"
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <RelativeLayout
   android:layout_width="fill_parent"
   android:layout_height="70px"
   android:layout_gravity="center_horizontal"
   android:orientation="horizontal">
   
   <EditText
    android:id="@+id/edit01"
    android:layout_width="300px"
    android:layout_height="wrap_content"/>
   <Button
    android:id="@+id/btn01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Compound UI"
    android:layout_alignParentRight="true"
    android:layout_toRightOf="@id/edit01">
   </Button>
   
  </RelativeLayout>
  <RelativeLayout
   android:id="@+id/layout02"
   android:layout_width="fill_parent"
   android:layout_height="70px"
   android:layout_gravity="center_horizontal"
   android:orientation="horizontal">
   <CheckBox
    android:id="@+id/checkBoxBeach"
    android:text="바다"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
   <CheckBox
    android:id="@+id/checkBoxValley"
    android:text="계곡"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@id/checkBoxBeach"/>
 <Button
  android:id="@+id/btn02"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="눌러주세요"
  android:layout_toRightOf="@id/checkBoxValley"
  android:layout_alignParentRight="true">
 </Button>
  </RelativeLayout>
</LinearLayout>

MyCompoundControl.java (위의 레이아웃파일을 읽어서 화면을 구성하는 커스텀 콤포넌트 클래스)

package com.dearpeople.android.test.compound;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MyCompoundControl extends LinearLayout {
 
 public MyCompoundControl(Context context) {
  super(context);
 }

 public MyCompoundControl(Context context, AttributeSet attrs) {
  super(context, attrs);
  LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
  LinearLayout compoundView = (LinearLayout)inflater.inflate(R.layout.compound_ui_layout, this);
 
  Button btn01 = (Button) compoundView.findViewById(R.id.btn01);

  btn01.setOnClickListener(new View.OnClickListener() {
 
 @Override
 public void onClick(View v) {
  Toast.makeText(v.getContext(), "버튼 눌림", Toast.LENGTH_SHORT).show();
 }
   });
 }
}

 

main.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">
   
 <com.dearpeople.android.test.compound.MyCompoundControl
  android:layout_width="fill_parent"
  android:layout_height="wrap_content">
 </com.dearpeople.android.test.compound.MyCompoundControl>
 
</LinearLayout>

CompoundTestActivity.java (위의 주 레이아웃파일을 참조하여 화면에 출력하는 Activity클래스)

package com.dearpeople.android.test.compound;

import android.app.Activity;
import android.os.Bundle;

public class CompoundTestActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}