안드로이드(Android) 문의 – Dialog 클래스를 이용하여 다이얼로그 계산기 올리기

안드로이드(Android) 문의 – Dialog 클래스를 이용하여 다이얼로그 계산기 올리기

 

개발환경 : window 7 64bit, Eclipse Mars, Android 4.2.2

 

이번내용은 다이얼로그에 계산기 같이 다양한 위젯으로 화면을 꾸밀수 있는지 질문한 내용입니다. 간단하게 EditText 두개 두고 버튼을 클릭하면 계산된 결과를 보여주는 다이얼로그 입니다.

 

아래와 같이 첫번째 화면에서 팝업버튼을

누르게 되면 창이 뜨게 되고 창에서

계산하기 버튼을 누르면 결과가 나옵니다.

그리고 닫기 하면 창이 닫히겠죠.

 

팝업창을 만드는 함수는 createDialog 입니다. 여기 내부에

보시면 Dialog 객체를 생성하면서 R.layout.dialog_calculator_view

레이아웃 xml 로 화면을 만들게 됩니다. 이 xml 에 원하는

위젯들을 추가해서 구성하시면 되겠죠.

 

protected Dialog createdDialog(int id) {
	dlg = null;

	switch (id) {
	case ID_CALCULAR:

		Context mContext = this;
		dlg = new Dialog(mContext);
		dlg.setContentView(R.layout.dialog_calculator_view);
		
		dlgFirst = (EditText) dlg.findViewById(R.id.editText1);
		dlgSecond = (EditText) dlg.findViewById(R.id.editText2);
		dlgCalView = (TextView) dlg.findViewById(R.id.textView3);
		
		Button okDialogButton = (Button) dlg.findViewById(R.id.btnOk);
		okDialogButton.setOnClickListener(okDlgCalculator);

		break;
	default:
		break;
	}
	return dlg;
}

 

R.layout.dialog_calculator_view 은 다음과 같습니다.

복잡하게 보이지만 TextView 가 많이 들어가서 그렇습니다.

 

<?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" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" 
            android:orientation="horizontal" >

            <EditText
                android:id="@+id/editText1"
                android:layout_width="70dp"
                android:layout_height="wrap_content"
                android:ems="10"
                android:inputType="number" >

                <requestFocus />
            </EditText>

            <TextView
                android:id="@+id/textView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="+"
                android:textAlignment="center" />

            <EditText
                android:id="@+id/editText2"
                android:layout_width="66dp"
                android:layout_height="wrap_content"
                android:ems="10"
                android:inputType="number" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:gravity="center"
                android:text="=" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="4" />

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/btnOk"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="계산하기" />

        <Button
            android:id="@+id/btnClose"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="닫기" />

    </LinearLayout>

</LinearLayout>

 

다음은 다이얼로그 박스에서의 계산버튼클릭시

이벤트 구현입니다. setContentView() 에 다이얼로그

레이아웃을 셋팅했기 때문에 그 위젯들을

dlg.findViewById() 로 참조할수 있습니다.

이렇게 참조한 버튼에 clickListener 를 등록합니다.

 

dlg.setContentView(R.layout.dialog_calculator_view);

dlgFirst = (EditText) dlg.findViewById(R.id.editText1);
dlgSecond = (EditText) dlg.findViewById(R.id.editText2);
dlgCalView = (TextView) dlg.findViewById(R.id.textView3);

Button okDialogButton = (Button) dlg.findViewById(R.id.btnOk);
okDialogButton.setOnClickListener(okDlgCalculator);

 

clickListener 는 아래와 같이 구현하였으며 계산일때와

닫기 버튼이 구분되어 있습니다. 계산일때 두 텍스트 박스에서

가져온 값을 더한후 결과값을 표시해 주는 것을 알수 있죠.

 

private Button.OnClickListener okDlgCalculator = 
		new Button.OnClickListener() {

	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.btnOk:
			double calValue = Double.parseDouble(dlgFirst.getText().toString()) + 
						Double.parseDouble(dlgSecond.getText().toString());
			dlgCalView.setText(String.valueOf(calValue));
			break;
		case R.id.btnClose:
			dlg.dismiss();
			break;
		default:
			break;
		}
	}
};

 

이렇게 간단한 계산기 팝업을 구현한 전체 소스입니다.

import android.app.Activity;
import android.app.Dialog;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;

public class CalculatorPopup extends Activity implements OnClickListener{

	private static final int ID_CALCULAR = 0;
	private Dialog dlg;
	private EditText dlgFirst, dlgSecond;
	private TextView dlgCalView;
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_calculator_popup);

		Button btnPopup = (Button) findViewById(R.id.popup);
		btnPopup.setOnClickListener(this);
	}
	
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.popup:
			createdDialog(ID_CALCULAR).show(); // Instead of showDialog(0);
			break;

		default:
			break;
		}
		
	}

	protected Dialog createdDialog(int id) {
		dlg = null;

		switch (id) {
		case ID_CALCULAR:

			Context mContext = this;
			dlg = new Dialog(mContext);
			dlg.setContentView(R.layout.dialog_calculator_view);
			
			dlgFirst = (EditText) dlg.findViewById(R.id.editText1);
			dlgSecond = (EditText) dlg.findViewById(R.id.editText2);
			dlgCalView = (TextView) dlg.findViewById(R.id.textView3);
			
			Button okDialogButton = (Button) dlg.findViewById(R.id.btnOk);
			okDialogButton.setOnClickListener(okDlgCalculator);

			break;
		default:
			break;
		}
		return dlg;
	}

	private Button.OnClickListener okDlgCalculator = 
			new Button.OnClickListener() {
	
		public void onClick(View v) {
			switch (v.getId()) {
			case R.id.btnOk:
				double calValue = Double.parseDouble(dlgFirst.getText().toString()) + 
							Double.parseDouble(dlgSecond.getText().toString());
				dlgCalView.setText(String.valueOf(calValue));
				break;
			case R.id.btnClose:
				dlg.dismiss();
				break;
			default:
				break;
			}
		}
	};
}