« 割り勘計算機(2) | トップページ | 中華Padを買った »

2011年1月27日 (木)

EditTextとTextViewの切り替え

計算機からちょっと脱線です。

UIのデザインについて。

数値の項目が並んでいて、そのどれかを変更したいような場合、どういうUIが使いやすいかという話です。

割り勘計算機の場合、各項は列になっているので、列に変更ボタンをつけて、そこからダイアログを呼び出すというやり方が考えられます。しかし、これだとダイアログが出ている間は全体は見渡せないですね。
では、入力項目を全部EditTextにして並べたらどうえしょうか。これだと、どこにフォーカスがあるのか分かりづらいですよね。フォーカスしているBoxに色をつけたりすればいいのかもしれませんが。それにしてもどこか触るたびにフォーカスしてしまうので、あまり使い易い気がしません。

じゃぁ、普段はTextViewで、クリックしたら編集できるようになるのはどうよ?と思ったのですが、そういうプログラムのサンプルは見つけられませんでした。なので、ちょっと書いて試してみました。

問題は、Viewが作られるのはsetContentViewなりが呼ばれた時で、EditTextとTextViewが同時に存在していないということは、コールバックの登録も一度に済ませることはできないということです。つまり、TextViewがクリックされたらonClickの中でEditTextを作ってOnKeyListenerを登録する必要があり、EditTextで編集が確定したらTextViewを作ってOnClickListenerを登録する必要があります。よくある、setOnClickListenerの中でOnClickListenerをnewしているようなコードの場合、その中のOnClickで相手のコールバックをセットする必要があり、その中でリスナを新たに作って、コールバックを登録するわけですが、そのコールバックでさらに元のViewのリスナを作って、コールバックに...、という無限地獄に堕ちてしまうわけです。

どうすればいいのかEclipse先生と相談しながら作ったのが以下です。

package com.example.FlipboxSample;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.widget.EditText;
import android.widget.TextView;

public class FlipboxSample extends Activity {
    private TextView mTextView01 ;
    private EditText mEditText01 ;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.textview);
    
        mTextView01 = (TextView) findViewById(R.id.TextView01);
        mTextView01.setOnClickListener(textview01OnClickListener);
    
    }
    private OnKeyListener medittext01OnKeyListener = new OnKeyListener() { 
    	public boolean onKey (View v,int keyCode, KeyEvent event){
    		if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
    			(keyCode == KeyEvent.KEYCODE_ENTER)	){
    			String text = mEditText01.getText().toString();
    			setContentView(R.layout.textview);
    			mTextView01 =(TextView)findViewById(R.id.TextView01);
    			mTextView01.setText(text);
    			mTextView01.setOnClickListener(textview01OnClickListener);
    			return true;
    		}
    		return false;
		};
	};
	private OnClickListener textview01OnClickListener = new OnClickListener() {
		public void onClick (View v){
			String text;
			text = mTextView01.getText().toString();
			setContentView(R.layout.edittext);
			mEditText01 = (EditText)findViewById(R.id.EditText01);
			mEditText01.setText(text);
			mEditText01.setOnKeyListener(medittext01OnKeyListener);
		};
	};
} //end of Activity

これで、クリックすればEditTextになって、Enter押せばTextviewに戻るように動くんですが、メンテナンス性悪そうです。
今回の計算機だと、ListViewのAdapterにこれ相当のものを入れることになるわけで、どうなることやら。
なお、ちょっとインデントがずれているのは、SVNに入れて、SVNのWebインタフェースから見たらこうなってました。まぁ、ご愛嬌ということで。

« 割り勘計算機(2) | トップページ | 中華Padを買った »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/60027/50703973

この記事へのトラックバック一覧です: EditTextとTextViewの切り替え:

« 割り勘計算機(2) | トップページ | 中華Padを買った »