PopupWindow を使ってみる

By 松田幸一

2010/02/19 - Tips

バリデーション, ビュー

今回は３つの内容を紹介します。

ヒントを表示する
エラーを表示する
ポップアップを自分で作る

１．ヒントを表示する

device1

EditText にグレーの文字が見えると思います。「ヒント」と書いてあります。
ユーザにどのような文字を入力してもらいたいのかというヒントを EditText の中に表示する方法です。

A. xml で記述する

hint

EditText を選択してプロパティの編集をします。 Hint という欄に文字を書けば完了
直接文字を書いてしまうと国際化できなくなるので、文字は string.xml に書きましょう

B. ソースから書く

setHint(“文字”) を使います。　”文字”の部分はリソースID を指定するのがいいでしょう

２．エラーを表示する

ユーザが入力した文字をチェックした結果、エラーがある場合はポップアップで表示する、という使い方になると思います。

device2

OKボタンを押したら、エラーのポップアップを表示するようにしました。

setError(“文字”) を使います。”文字” は CharSequence で指定しますので　リソースは使えません。
getString(resId)　を使って文字を取得するのがいいのではないでしょうか

“文字” に null を入れるとエラーポップアップは消えます。

３．ポップアップを自分で作る

device3

上図では OKボタンを押したときに EditText に入力された文字をポップアップ表示しているだけです。
このポップアップのデザインは layout.xml で作成すると簡単にデザインができそうです。

PopupWindw を作成します。

最初にやっているのはポップアップに表示するビューを作成しています。
作成したものをポップアップに設定して完了

OKボタンが押されたらポップアップの表示を切り替えるようにしました。

showAsDropDown で EditTextの下にドロップダウンするように設定しました。
表示する位置は EditText の下になります。0,0 というのはオフセットです。少し右にずらしたいとかがあれば記述します。
dismiss で非表示にします。

public class TopActivity extends Activity {

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

initHint();
        
        initPopUp();
        
        
    }

private PopupWindow mPopupWindow;
    private EditText mEditText;
    private TextView mPopUpText;
    
    private void initPopUp() {
        mEditText = (EditText)findViewById(R.id.EditText01);
        mPopupWindow = createPopUpWindow();
        
        Button btn = (Button)findViewById(R.id.Button01);
        btn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {
				
				if(mPopupWindow.isShowing()) {
					mPopupWindow.dismiss();
				} else {
					mPopUpText.setText(mEditText.getText());
					mPopupWindow.showAsDropDown(mEditText,0,0);
				}
			}
		});
    	
    }
    
    
    private PopupWindow createPopUpWindow() {
    	LinearLayout tv = (LinearLayout) getLayoutInflater().inflate(
    			R.layout.popupwindow, null);
    	mPopUpText = (TextView)tv.findViewById(R.id.TextView01);

PopupWindow popupWindow = new PopupWindow(this);
    	popupWindow.setWindowLayoutMode(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    	popupWindow.setContentView(tv);
    	
    	
    	return popupWindow;
    }

private EditText mEditText2;
    private void initHint() {
        mEditText2 = (EditText)findViewById(R.id.EditText02);
        
        Button btn = (Button)findViewById(R.id.Button02);
        btn.setOnClickListener(new OnClickListener() {
			
			@Override
			public void onClick(View v) {

mEditText2.setError("文字をもっと入力してください");
			}
		});

}
    
}