Androidアプリ開発　Viewを使ったインターフェースデザイン　ダイアログ使ってみる

ダイアログを表示する

Displaying Dialogs

ダイアログはウィンドウの小さな流れのようなもので、
大抵、現在のアクティビティの前に現れます。
ダイアログが現れたときには、
現在のアクティビティからフォーカスが外され、
すべてのユーザのやり取りは、ダイアログ上にフォーカスされてきます。
ダイアログは大抵、ユーザからの反応を得るために使われます。
Androidでは、ダイアログはダイアログフラグとして実行されます。
ダイアログはアクティビティの上部に浮かび、
形式的に表示されます。
ダイアログは実行し続ける前にユーザの反応を獲得する必要が
ある時に役立ちます。
ダイアログフラグを作るときに、DialogGragment基底クラスを
拡張させる必要があります。
ここでは、入力ダイアログとYes/Noダイアログの2つの型の
ダイアログをどのように作るかを示します。
以下のコードは2つのXMLファイル、fragment_inputname_dialog.xmlと
fragment_yes_no_dialog.xmlをres/layoutフォルダに作ります。
fragment_inputname_dialog.xmlは以下の様に設定します。

これは基本的にラベル、テキストボックス、ボタンとともに
ページを含みます。
fragment_yes_no_dialog.xmlファイルは以下のようにします。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
　　 android:id="@+id/edit_name"
　　 android:layout_width="wrap_content"
　　 android:layout_height="wrap_content"
　　 android:layout_gravity="center"
　　 android:orientation="vertical" >

　　 <TextView
　　　　 android:layout_width="wrap_content"
　　　　 android:layout_height="wrap_content"
　　　　 android:paddingLeft="10dp"
　　　　 android:paddingRight="10dp"
　　　　 android:text="Are you sure?" />

　　 LinearLayout
　　　　 android:layout_width="wrap_content"
　　　　 android:layout_height="wrap_content"
　　　　 android:layout_gravity="center"
　　　　 orientation="horizontal" >

　　　　 <Button
　　　　　　 android:id="@+id/btnYes"
　　　　　　 android:layout_width="match_parent"
　　　　　　 android:layout_height="wrap_content"
　　　　　　 android:text="Yes" />

　　　　 <Button
　　　　　　 android:id="@+id/btnNo"
　　　　　　 android:layout_width="match_parent"
　　　　　　 android:layout_height="wrap_content"
　　　　　　 android:text="No" />
　　 <LinearLayout>
<LinearLayout>

上のコードにはラベルと2つのボタンがあります。
オブジェクト内にInputNameDialogFragment.javaと
YesNoDialogFragment.javaの2つのクラスを追加します。
InputNameDialogFragment.javaは以下のように設定します。

package net.learn2develop.dialogs;

import android.os.Bundle;
import android.support.v4.DialogFragment;
import android.View.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager.LayoutParams;
import android.widget.Button;
import android.widget.EditText;

public class InputNameDialogFlagment extends DialogFlagment{
　　 EditText txtName;
　　 Button btn;
　　 static String dialogTitle;

　　 //---Interface containing methods to be implemented
　　 //---by calling activity---
　　 public interface InputNameDialogListener{
　　　　 void onFinichInputDialog(String inputText);
　　 }

　　 public InputNameDialogFragment(){
　　　　 //---empty constructor required---
　　 }

　　 //--set the title of the dialog window---
　　 public void setDialogTitle(String title){
　　　　 dialogTitle = title;
　　 }

　　 @Override
　　 public View onCreateView(LayoutInflater inflater, ViewGroup container,
　　　　 Bundle savedInstanceState){
　　　　 View view = inflater.inflate(
　　　　　　 R.layout.fragment_inputname_dialog, container);

　　　　 //---get the EditText and Button views---
　　　　 txtName = (EditText) view.findViewById(R.id.txtName);
　　　　 btn = (Button) view.findViewById(R.id.btnDone);

　　　　 //---event handler for the button---
　　　　 btn.setOnClickListener(new View.OnClickListener(){
　　　　　　 public void onClick(View view){
　　　　　　　　 //---gets the calling activity---
　　　　　　　　 InputNameDialogListener activity =
　　　　　　　　　　 (InputNameDialogListener) getActivity();
　　　　　　　　 activity.onFinishInputDialog(txtName.getText().toString());
　　　　　　　　 //---dismiss the alert---
　　　　　　　　 dismiss();
　　　　　　 }
　　　　 });

　　　　 //---show the keyboard automatically---
　　　　 txtName.requestFocus();
　　　　 getDialog().getWindow().setSoftInputMode(
　　　　　　　　　 LayoutParams.SOFT_INPUT_STATE_VISIBLE);

　　　　 //---set the title for the dialog---
　　　　 getDialog().setTitle(dialogTitle);

　　　　 return view;
　　 }
}

このクラスはDialogFragment基底クラスを拡張し、
UIをロードし、fragment_inputname_dialog.xmlファイルに
定義します。
このクラスでは、onFinishInputDialog()と名付けられた
抽象的なメソッドと共に、InputNameDialogListenerと呼ばれる
インターフェースを作ります。
このメソッドはこのクラスで呼ばれるアクティビティで
実行されていきます。
本質では、ユーザがダイアログを閉めるためボタンを
クリックしたときにこのメソッドが動き始めます。
テキストボックスに入力されたテキストは、
このonFinishInputDialog()メソッドを通じてアクティビティを
呼び出すため送り返されます。
YesNoDialogFragment.javaファイルを設定は、
以下の様にします。

package net.learn2develop.dialogs;

import android.os.Bundle;
import android.support.v4.app.DialogFragment;
import android.view.LayoutInflater;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;

public class YesNoDialogFragment extends FialogFragment{
　　 Button btnYes, btnNo;
　　 static String dialogTitle;

　　 //---Interface containing methods to be implemented---
　　 //by calling activity---
　　 public interface YesNoDialogListener{
　　　　 void onFinishYesNoDialog(boolean state);
　　 }

　　 public YesNoDialogFragment(){
　　　　 dialogTitle = title;
　　 }

　　 @Override
　　 public View onCreateView(LayoutListener inflater, ViewGroup container,
　　　　　　　 Bundle savedInstanceState){
　　　　 View view = inflater.inflate(R.layout.fragment_yes_no_dialog, container);

　　　　 //---get the Button views---
　　　　 btnYes = (Button) view.findViewById(R.id.btnYes);
　　　　 btnNo = (Button) view.findViewById(R.id.btnNo);

　　　　 btnYes.setOnClickListener(btnListener);
　　　　 btnNo.setOnClickListener(btnListener);

　　　　 //---set the title for the dialog---
　　　　 getDialog().setTitle(dialogTitle);

　　　　 return view;
　　 }

　　 //---create an anonymous class to act as a button click
　　 //listener---
　　 private OnClickListener btnListener = new OnClickListener(){
　　　　 public void onClick(View v){
　　　　　　 //---get the calling activity---
　　　　　　 YesNoDialogListener activity = (YesNoDialogListener) getAcrivity();
　　　　　　 boolean state =
　　　　　　　　 ((Button) v).getText().toString().equals("Yes") ? true : false;
　　　　　　 activity.onFinishYesNoDialog(state);

　　　　　　 //---dismiss the alert---
　　　　　　 dismiss();
　　　　 }
　　 };
}

InputNameDialogFragmentクラスと同じように、
DialogFragmentクラスを拡張したクラスで、
インターフェースを実行します。
以下のようにactivity_main.xmlファイルを設定します。

<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"
　　 android:orientation="vertical" >

　　 <Button
　　　　 android:layout_width="match_parent"
　　　　 android:layout_height="wrap_content"
　　　　 android:text="Show Dialog"
　　　　 android:onClick="btnShowDialog" />

　　 Button
　　　　 android:layout_width="match_parent"
　　　　 android:layout_height="wrap_content"
　　　　 android:text="show Yes/No Dialog"
　　　　 onClick~"btnShowYesNoDialog" />
<LinearLayout>

Mainactivity.javaファイルに以下にある
太文字のステートメントを加えます。

package net.learn2develop.dialogs;

import net.learn2develop.dialogs.InputNameDialogFragment.InputNameDialogListener;
import net.learn2develop.dialogs.YesNoDialogFragment.YesNoDialogListener;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.view.View;
import android.widget.Toast;

public class MainActivity extends FragmentActivity
　　 implements InputNameDialogListener, YesNoDialogListener{

　　 @Override
　　 public void onCreate(Bundle savedInstanceState){
　　　　 super.onCreate(savedInstanceState);
　　　　 setContentView(R.layout.activity_main);
　　 }

　　 //---Input Name Dialog---
　　 public void btnShowDialog(View view){
　　　　 showInputNameDialog();
　　 }

　　 private void showinputNameDialog(){
　　 FragmentManager fragmentManager = getSupportFragmentManager();
　　 InputNameDialogFragment inputNameDialog = new InputNameDialogFragment();
　　 inputNameDialog.setCacelable(false);
　　 inputNameDialog.setDialogTitle("Enter Name");
　　 inputNameDialog.show(fragmentManager, "input dialog");
　　 }

　　 @Override
　　 public void onFinishInputDialog(String inputText){
　　　　 Toast.makeText(this. "Returned from dialog: " + inputText,
　　　　　　　　 Toast,LENGTH_SHORT) .show();
　　 }

　　 //---Yes/No Dialog---
　　 public void btnShowYesNoDialog(View view){
　　　　 showYesNoDialog();
　　 }

　　 private void showYesNoDialog(){
　　　　 FragmentManager fragmentManager = getSupportFragmentManager();
　　　　 YesNoDialogFragment yesnoDialog = new YesNoDialogFlagment();
　　　　 yesnoDialog.setCancelable(false);
　　　　 yesnoDialog.setDialogTitle("Status change");
　　　　 yesnoDialog.show(fragmentManager, "yes/no dialog");
　　 }

　　 @Override
　　 public void onFinishYesNoDialog(boolean state){
　　　　 Toast.makeText(this, "Returned from dialog: " + state,
　　　　　　　　　 Toast.LENGTH_SHORT).show();
　　 }
}

Androidエミュレータ上でこれを展開し、
プロジェクトを走らせます。
名前を入力し、Doneボタンを押します。
Toastクラスは入力した名前の値を表示されてきます。
次に、出てくるYes/Noボタンのどちらかを押します。
ToastクラスはYesを押された時にはtrueを、
Noが押された時にはfalseを表示します。

カスタム検索

【用語解説】

XML

HTMLと同じような言語ですが、
すべての型の複雑なデータ構造を
送信するための設計ができる
ファイル型式。

オブジェクト

ある手続きを持った
データアイテムで、
他の手続きと関連づけされるもの

metaタグ

ウェブページに与える
情報の宣言につかわれ
検索エンジン・ウェブアプリ
などにウェブページの内容を
伝える役目をする。
metaタグの内容は
ページ内に表示されない。

コンストラクタ

オブジェクト指向
プログラミングで使われ
新しいオブジェクトが
作られ時に呼び出される
メソッドのこと。

クラス

オブジェクト指向
プログラミングでの
オブジェクトの型

オブジェクト指向プログラミング

プログラミングの
方式のことで、
プログラマはデータ型を
定義できるだけでなく
自動的にデータ型と
メソッドを関連付け
できる

アクティビティ

Androidにおける
アクティビティは
Androidアプリの画面に
相当するもの
ボタンやウェブページ
など表示されている
すべてのもののこと。

view

Androidのアプリを開発する
上で使う部品のことで、
トリガボタン・イメージボタン
チェックボックスなどのこと。

UI

ユーザインターフェースのこと。

Androidアプリ開発 Viewをつかったインターフェースデザイン