[Android] オリジナルのPreferenceを作ってみる

どうも、hide92795です
Androidの設定画面はPreferenceを使えば簡単にできるのですが、

・現在の設定値がわかりづらい
・単位をつけて表示させたい（EditTextPreference）

というのが気にくわないのですｗｗ
（まぁ、はじめのはサマリーや別のPreferenceに表示すればいいだけですが、説明文が表示できなくなったり縦に伸びるのは自分的に×なんですよねｗ）
というわけで、オリジナルのPreferenceを作ってしまおうじゃないかというわけなのです（｀・ω・´）
参考サイト：
EditTextPreferenceの拡張2 – HaseLab
http://www.haselab.com/androidpj/?p=370
XML でカスタムView – Android 奔走記
http://weide-dev.blogspot.com/2010/04/xml-customview.html

①PreferenceScreenに表示される方を改造する

こんなかんじ
これを改造するのは、これのレイアウトxmlを新しく作って、それを使うように新しく独自のクラスを作成すればおｋです
デフォルトのレイアウトxmlは、androidSDKのフォルダの
「\platforms\android-*\data\res\layout\preference_child.xml」
です。
改造するときは、すでにあるViewのIdをいじらないようにしてください
自分が改造したxmlは、追記のほうに書いておきますｗ（結構長いのでｗ）

②DialogPreferenceを継承したオリジナルのダイアログを表示するレイアウト＆クラスを作成する
・EditTextPreferenceの場合

こんな感じ

この場合だと、入力するEditTextの横に単位をつける必要があるので、ダイアログ用のレイアウトxmlを作成します。
（とはいっても、EditTextとTextViewを横に並べるだけなんですけどねｗ）

custom_edittext_preference.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/layout_root"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:baselineAligned="true"

android:orientation="horizontal" >

<EditText

android:id="@+id/text"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_margin="5dip"

android:layout_toLeftOf="@+id/unit"

android:inputType="number"

android:singleLine="true" >

</EditText>

<TextView

android:id="@+id/unit"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignBaseline="@+id/text"

android:layout_alignBottom="@+id/text"

android:layout_alignParentRight="true"

android:layout_marginRight="10dip" />

</RelativeLayout>

EditTextのIDは「text」、TextViewのIDは「unit」になっています

次は、↑のxmlを読み込むようにし、さらに色々と機能を追加させたオリジナルのDialogPreferenceを作ります

CustomEditTextPreference

package hide92795.Twit_Time_Android_Pro.View;
import hide92795.Twit_Time_Android_Pro.R;
import android.content.Context;
import android.content.SharedPreferences;
import android.content.res.TypedArray;
import android.preference.DialogPreference;
import android.text.InputFilter;
import android.text.InputType;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.inputmethod.EditorInfo;
import android.widget.EditText;
import android.widget.TextView;
public class CustomEditTextPreference extends DialogPreference {
	private static final int DEFAULT_MAX_LENGTH = 5;
	private String unit = "";
	private TextView inputValueTextView;
	private EditText editText;
	private int inputType;
	private int maxLength;
	private String defaultVal;
	private String saveVal;
	private int unitPosition;
	public CustomEditTextPreference(Context context, AttributeSet attrs) {
		super(context, attrs);
		TypedArray tArray = context.obtainStyledAttributes(attrs, R.styleable.CustomPreference);
		unit = tArray.getString(R.styleable.CustomPreference_unit);
		defaultVal = tArray.getString(R.styleable.CustomPreference_defaultValue);
		String unitPosition_s = tArray.getString(R.styleable.CustomPreference_unitPosition);
		if(unitPosition_s == null){
			unitPosition = R.layout.custom_preference_right;
		}else if(unitPosition_s.equals("right")){
			unitPosition = R.layout.custom_preference_right;
		}else if(unitPosition_s.equals("bottom")){
			unitPosition = R.layout.custom_preference_bottom;
		}else{
			unitPosition = R.layout.custom_preference_right;
		}
	String argInpType = tArray.getString(R.styleable.CustomPreference_inputType);
	if (argInpType == null || argInpType.equals("number")) {
		inputType = EditorInfo.TYPE_CLASS_NUMBER;
	} else {
		inputType = InputType.TYPE_NULL;
	}
	try {
		maxLength = Integer.parseInt(tArray.getString(R.styleable.CustomPreference_unit));
	} catch (Exception e) {
		maxLength = DEFAULT_MAX_LENGTH;
	}
}

@Override
protected View onCreateView(ViewGroup parent) {
	Context context = super.getContext();
	LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	View orgLayout = layoutInflater.inflate(unitPosition, null);
	inputValueTextView = (TextView) orgLayout.findViewById(R.id.inputValue);
	setLayoutResource(android.R.id.widget_frame);
	return orgLayout;
}

@Override
protected void onBindView(View view) {
	SharedPreferences pref = getSharedPreferences();
	if (pref == null) {
		saveVal = defaultVal;
	} else {
		saveVal = pref.getString(getKey(), defaultVal);
	}
	updateInputValue();
	super.onBindView(view);
}

@Override
protected View onCreateDialogView() {
	LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	View view = inflater.inflate(R.layout.custom_edittext_preference, null);
	editText = (EditText) view.findViewById(R.id.text);
	TextView unitView = (TextView) view.findViewById(R.id.unit);
	unitView.setText(unit);
	editText.setInputType(inputType);
	editText.setFilters(new InputFilter[] { new InputFilter.LengthFilter(maxLength) });
	editText.setText(saveVal);
	return view;
}

@Override
protected void onDialogClosed(boolean positiveResult) {
	super.onDialogClosed(positiveResult);
	if (!positiveResult) {
	} else {
		saveVal = editText.getText().toString();
		if (saveVal == null || saveVal.length() == 0)
			saveVal = defaultVal;
		SharedPreferences.Editor editor = getEditor();
		editor.putString(getKey(), saveVal);
		editor.commit();
		updateInputValue();
	}
}

private void updateInputValue() {
	if (saveVal == null || saveVal.length() == 0)
		saveVal = defaultVal;
		StringBuilder sb = new StringBuilder();
		sb.append(saveVal);
		sb.append(" ");
		sb.append(unit);
		inputValueTextView.setText(sb.toString().trim());
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

package hide92795.Twit_Time_Android_Pro.View;

import hide92795.Twit_Time_Android_Pro.R;

import android.content.Context;

import android.content.SharedPreferences;

import android.content.res.TypedArray;

import android.preference.DialogPreference;

import android.text.InputFilter;

import android.text.InputType;

import android.util.AttributeSet;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.inputmethod.EditorInfo;

import android.widget.EditText;

import android.widget.TextView;

public class CustomEditTextPreference extends DialogPreference {

private static final int DEFAULT_MAX_LENGTH = 5;

private String unit = "";

private TextView inputValueTextView;

private EditText editText;

private int inputType;

private int maxLength;

private String defaultVal;

private String saveVal;

private int unitPosition;

public CustomEditTextPreference(Context context, AttributeSet attrs) {

super(context, attrs);

TypedArray tArray = context.obtainStyledAttributes(attrs, R.styleable.CustomPreference);

unit = tArray.getString(R.styleable.CustomPreference_unit);

defaultVal = tArray.getString(R.styleable.CustomPreference_defaultValue);

String unitPosition_s = tArray.getString(R.styleable.CustomPreference_unitPosition);

if(unitPosition_s == null){

unitPosition = R.layout.custom_preference_right;

}else if(unitPosition_s.equals("right")){

unitPosition = R.layout.custom_preference_right;

}else if(unitPosition_s.equals("bottom")){

unitPosition = R.layout.custom_preference_bottom;

}else{

unitPosition = R.layout.custom_preference_right;

}

String argInpType = tArray.getString(R.styleable.CustomPreference_inputType);

if (argInpType == null || argInpType.equals("number")) {

inputType = EditorInfo.TYPE_CLASS_NUMBER;

} else {

inputType = InputType.TYPE_NULL;

}

try {

maxLength = Integer.parseInt(tArray.getString(R.styleable.CustomPreference_unit));

} catch (Exception e) {

maxLength = DEFAULT_MAX_LENGTH;

}

@Override

protected View onCreateView(ViewGroup parent) {

Context context = super.getContext();

LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View orgLayout = layoutInflater.inflate(unitPosition, null);

inputValueTextView = (TextView) orgLayout.findViewById(R.id.inputValue);

setLayoutResource(android.R.id.widget_frame);

return orgLayout;

}

@Override

protected void onBindView(View view) {

SharedPreferences pref = getSharedPreferences();

if (pref == null) {

saveVal = defaultVal;

} else {

saveVal = pref.getString(getKey(), defaultVal);

}

updateInputValue();

super.onBindView(view);

}

@Override

protected View onCreateDialogView() {

LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View view = inflater.inflate(R.layout.custom_edittext_preference, null);

editText = (EditText) view.findViewById(R.id.text);

TextView unitView = (TextView) view.findViewById(R.id.unit);

unitView.setText(unit);

editText.setInputType(inputType);

editText.setFilters(new InputFilter[] { new InputFilter.LengthFilter(maxLength) });

editText.setText(saveVal);

return view;

}

@Override

protected void onDialogClosed(boolean positiveResult) {

super.onDialogClosed(positiveResult);

if (!positiveResult) {

} else {

saveVal = editText.getText().toString();

if (saveVal == null || saveVal.length() == 0)

saveVal = defaultVal;

SharedPreferences.Editor editor = getEditor();

editor.putString(getKey(), saveVal);

editor.commit();

updateInputValue();

}

private void updateInputValue() {

if (saveVal == null || saveVal.length() == 0)

saveVal = defaultVal;

StringBuilder sb = new StringBuilder();

sb.append(saveVal);

sb.append(" ");

sb.append(unit);

inputValueTextView.setText(sb.toString().trim());

}

メソッドの説明

・コンストラクター
xmlで指定された値を各変数に格納します
・onCreateView(ViewGroup parent)
①が生成されるときに呼ばれます
これをオーバーライドして、①で作ったxmlが呼ばれるようにし、設定値を表示させるTextViewを変数に格納します。
layoutInflater.inflate(unitPosition, null)のunitPositionは、コンストラクターで設定されたxmlのリソースIDです。
・onBindView(View view)
①が表示される直前に呼ばれる？
保存されている値を取得し、変数に格納します。
・onCreateDialogView()
ダイアログが生成されるときに呼び出されます。
EditTextは、値を保存する際に使用するので、変数に格納します。
この時に、onBindViewで読み込んだ値を設定します。
他にも、コンストラクターで読み込んだ設定を各部品に割り当てていきます。
・onDialogClosed(boolean positiveResult)
ダイアログが閉じられる時に呼び出されます。
positiveResult = true　なら、値を保存します。
・updateInputValue()
①の現在の設定値に表示させる値を更新します。
コンストラクターでxmlで指定された値を～と書きましたが、この部分では

<hide92795.Twit_Time_Android_Pro.View.CustomEditTextPreference

hide92795:defaultValue="60"

hide92795:inputType="number"

android:key="key_pre_TweetSpeed_User-defined"

hide92795:maxLength="3"

android:summary="@string/str_TweetSpeed_UserDefined_sum"

android:title="@string/str_TweetSpeed_UserDefined"

hide92795:unit="@string/str_SecPerTweet"

hide92795:unitPosition="right" />

のように書いています。ここで値を指定しています。
見た方はわかると思いますが、普通なら「android:****=”….”」みたいなのだけのはずが、「hide92795:****=”….”」というのが追加されています。
次は、これのやり方です

③xmlに独自の属性を追加する
まず、「\res\values\」フォルダ内に「attrs.xml」を作成します。

attrs.xml

<?xml version="1.0" encoding="utf-8"?>

<declare-styleable name="CustomPreference">

</declare-styleable>

</resources>

書式としては、declare-styleable name=”名前”で名前に好きな文字を（別のサイトでは、クラス名にとありましたが、クラス名じゃなくても正常に動作しました（；＾ω＾））
attr format=”種類” name=”名前”で種類に使用できるリソースの種類、名前にxmlで使用する属性の名前を設定します。
この種類のところには、文字列→string 色→color リソース（xmlで指定するやつ）→reference　みたいなのを入力します。複数個ある場合は、「|」で区切ってください。
これを作ったあとに、Preferenceのレイアウトxmlのはじめの部分を

1 2	<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" xmlns:hide92795="http://schemas.android.com/apk/res/hide92795.Twit_Time_Android_Pro" >

のように
xmlns:（:の前につくやつ）=”http://schemas.android.com/apk/res/（パッケージ名）”
を追加します。
これによって、「hide92795:inputType=”number”」みたいなのを追加してもエラーが起こらないようになります。
ここで設定した値を取得するには、さっきの②のCustomEditTextPreference.javaのコンストラクターであった

1 2	TypedArray tArray = context.obtainStyledAttributes(attrs, R.styleable.CustomPreference); unit = tArray.getString(R.styleable.CustomPreference_unit);

を使用します。
context.obtainStyledAttributes()　の第２引数は、R.styleable.(attrs.xmlのはじめの部分で指定した名前)となります。
R.~なので、クラスが自動生成されるので、eclipseを使っていれば補完機能でわかると思いますｗｗ
取得は、TypedArrayクラスにあるget****()メソッドを使用します。
http://developer.android.com/reference/android/content/res/TypedArray.html
引数のint型は、R.styleable.(attrs.xmlのはじめの部分で指定した名前)_(name = “…”で入力した名前)　となっています
これもeclipseの補完機能でどれがどれかわかると思いますｗｗ

だいぶ長くなりましたねｗｗ
久々と言うかここまで長くなったのは初めてかな？ｗ
実は、ListPreferenceも設定値を表示できるように改造したクラスを作ってありますｗ
ここに書いたものを少しいじればできるようになるので、ここでは省略させて頂きます
コツと言うかヒントと言うか答えと言うか、独自のListPreferenceを作るときに注意する点は
・ListPreferenceを継承させる（単位を追加することはまずないと思うので、ダイアログの部分はそのまま使います）
・↑のおかげで、ダイアログの生成をオーバーライドしなくて済み、自分で値を保存・読み出ししなくておｋ
・リストで選択されている文字を取得するには、getEntry()
これらをちゃんとソースに反映させれば現在の選択している値がちゃんと表示されるようになるはずです。
一応、これで動いてはいますが、間違っている部分を見つけたら教えて下さいｗｗ
ではノシ

以下、①の部分で省略したxmlです
①PreferenceScreenに表示される方を改造する
設定値を下に表示させるxmlレイアウト

custom_preference_bottom.xml

<?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="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:paddingRight="?android:attr/scrollbarSize">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="6dip"
android:layout_marginLeft="15dip"
android:layout_marginRight="6dip"
android:layout_marginTop="6dip"
android:layout_weight="1" >
<TextView
android:id="@+android:id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:fadingEdge="horizontal"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="@+android:id/summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/inputValue"
android:layout_below="@+id/inputValue"
android:maxLines="2"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="@+id/inputValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@android:id/title"
android:layout_below="@android:id/title"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@color/AQUA_BLUE" />
</RelativeLayout>

<LinearLayout android:id="@+android:id/widget_frame"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:orientation="vertical" />
</LinearLayout>

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

android:minHeight="?android:attr/listPreferredItemHeight"

android:gravity="center_vertical"

android:paddingRight="?android:attr/scrollbarSize">

<RelativeLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="6dip"

android:layout_marginLeft="15dip"

android:layout_marginRight="6dip"

android:layout_marginTop="6dip"

android:layout_weight="1" >

<TextView

android:id="@+android:id/title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ellipsize="marquee"

android:fadingEdge="horizontal"

android:singleLine="true"

android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView

android:id="@+android:id/summary"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@+id/inputValue"

android:layout_below="@+id/inputValue"

android:maxLines="2"

android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView

android:id="@+id/inputValue"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@android:id/title"

android:layout_below="@android:id/title"

android:textAppearance="?android:attr/textAppearanceSmall"

android:textColor="@color/AQUA_BLUE" />

</RelativeLayout>

<LinearLayout android:id="@+android:id/widget_frame"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:gravity="center_vertical"

android:orientation="vertical" />

</LinearLayout>

設定値を下に表示させるxmlレイアウト

custom_preference_right.xml

<?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="wrap_content"
android:minHeight="?android:attr/listPreferredItemHeight"
android:gravity="center_vertical"
android:paddingRight="?android:attr/scrollbarSize">
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="15dip"
android:layout_marginRight="6dip"
android:layout_marginTop="6dip"
android:layout_marginBottom="6dip"
android:layout_weight="1">
<TextView
android:id="@+android:id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:fadingEdge="horizontal"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
<TextView
android:id="@+android:id/summary"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@android:id/title"
android:layout_below="@android:id/title"
android:maxLines="2"
android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
android:id="@+id/inputValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+android:id/title"
android:layout_alignParentRight="true"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="@color/AQUA_BLUE" />
</RelativeLayout>

<LinearLayout android:id="@+android:id/widget_frame"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:gravity="center_vertical"
android:orientation="vertical" />
</LinearLayout>

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

android:minHeight="?android:attr/listPreferredItemHeight"

android:gravity="center_vertical"

android:paddingRight="?android:attr/scrollbarSize">

<RelativeLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="15dip"

android:layout_marginRight="6dip"

android:layout_marginTop="6dip"

android:layout_marginBottom="6dip"

android:layout_weight="1">

<TextView

android:id="@+android:id/title"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:ellipsize="marquee"

android:fadingEdge="horizontal"

android:singleLine="true"

android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView

android:id="@+android:id/summary"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignLeft="@android:id/title"

android:layout_below="@android:id/title"

android:maxLines="2"

android:textAppearance="?android:attr/textAppearanceSmall" />

<TextView

android:id="@+id/inputValue"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignBottom="@+android:id/title"

android:layout_alignParentRight="true"

android:textAppearance="?android:attr/textAppearanceSmall"

android:textColor="@color/AQUA_BLUE" />

</RelativeLayout>

<LinearLayout android:id="@+android:id/widget_frame"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:gravity="center_vertical"

android:orientation="vertical" />

</LinearLayout>

設定値を表示させるTextViewのIDは「inputValue」、色はxmlで定義済みのAQUA_BLUE（#00BFFF）になっています

[Android] オリジナルのPreferenceを作ってみる

投稿者: hide92795

コメントを残す

コメントをキャンセル