色設定プリファレンス

設定アクティビティを作成する方法を解説します。

本項では、色を設定するプリファレンスを作成します。

解説

前項に対する処理の変更は以下です。

「色を設定する設定項目」の設定色を変更する色設定ダイアログのレイアウトを作成します。
「色を設定する設定項目」のプリファレンスクラスを作成します。
「色を設定する設定項目」の設定色を変更する色設定ダイアログの処理を担うダイアログフラグメントクラスを作成します。
設定フラグメントクラスに、色設定ダイアログを表示する処理を追加します。
プリファレンスファイルに、「色を設定する設定項目」を追加します。
メインアクティビティに「色を設定する設定項目」の設定値を表示する処理を追加します。

実装

アプリの仕様

アプリを起動すると、メインアクティビティが表示される。
オプションメニューの「Settings」を選択すると、設定アクティビティに移行する。
設定アクティビティには、自前の設定項目が表示される。
メインアクティビティには、自前の設定項目の設定値が表示される。
設定アクティビティの「テキストを指定する設定項目」「リストから１つの項目を選択する設定項目」「リストから複数の項目を選択する設定項目」の右側に設定値が表示される。
設定アクティビティには、「色を設定する設定項目」が表示される。（本項で追加）
「色を設定する設定項目」をタップすると色設定ダイアログが表示され、設定色を変更することができる。（本項で追加）
メインアクティビティには、「色を設定する設定項目」の設定値が表示される。（本項で追加）

プロジェクトを開く

「設定アクティビティに設定値の表示」で作成したプロジェクトを開きます。

色設定ダイアログレイアウトの作成

色設定を行う際に使用する色設定ダイアログのレイアウトを作成します。

「Project」ペインの「app > res > layout」を右クリックします。
右クリックメニュー「New > Layout Resource File」を選択します。

File name欄に「dialog_colorpreference」と入力します。
「OK」ボタンを押します。

dialog_colorpreference.xml が作成されます。

レイアウト内容を、色を表示するImageView、RGB値を表示する3つのTextView、RGB値を設定する3つのSeekBar、などを配置したレイアウトにします。

dialog_colorpreferencet.xml の内容を以下のようにします。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Space android:layout_width="match_parent" android:layout_height="20dp"/> <ImageView android:id="@+id/imageview_color" android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center" android:background="#888888" /> <Space android:layout_width="match_parent" android:layout_height="20dp"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="100" android:gravity="end" android:text="R : "/> <Space android:layout_width="5dp" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:id="@+id/textview_r" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="100" android:gravity="start"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Space android:layout_width="20dp" android:layout_height="wrap_content" android:layout_weight="1"/> <SeekBar android:id="@+id/seekbar_r" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="100" android:max="255" android:progress="0"/> <Space android:layout_width="20dp" android:layout_height="wrap_content" android:layout_weight="1"/> </LinearLayout> <Space android:layout_width="match_parent" android:layout_height="20dp"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="100" android:gravity="end" android:text="G : "/> <Space android:layout_width="5dp" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:id="@+id/textview_g" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="100" android:gravity="start"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Space android:layout_width="20dp" android:layout_height="wrap_content" android:layout_weight="1"/> <SeekBar android:id="@+id/seekbar_g" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="100" android:max="255" android:progress="0"/> <Space android:layout_width="20dp" android:layout_height="wrap_content" android:layout_weight="1"/> </LinearLayout> <Space android:layout_width="match_parent" android:layout_height="20dp"/> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="100" android:gravity="end" android:text="B : "/> <Space android:layout_width="5dp" android:layout_height="wrap_content" android:layout_weight="1"/> <TextView android:id="@+id/textview_b" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="100" android:gravity="start"/> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <Space android:layout_width="20dp" android:layout_height="wrap_content" android:layout_weight="1"/> <SeekBar android:id="@+id/seekbar_b" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="100" android:max="255" android:progress="0"/> <Space android:layout_width="20dp" android:layout_height="wrap_content" android:layout_weight="1"/> </LinearLayout> <Space android:layout_width="match_parent" android:layout_height="20dp"/> </LinearLayout>

色設定プリファレンスクラスの作成

色設定プリファレンスクラスを作成します。

「Project」ペインの「app > java > ドメイン.パッケージ名」を右クリックします。
右クリックメニュー「New > Java Class」を選択します。

クラス名欄に「ColorPreference」と入力しエンターキーを押します。
続いて表示されるダイアログは、内容変更せず、「OK」ボタンを押します。
「ColorPreference」クラスができました。

「ColorPreference」クラスファイルの内容を以下のようにします。
package com.hiramine.settingsactivitytrial; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Color; import android.util.AttributeSet; import androidx.preference.DialogPreference; public class ColorPreference extends DialogPreference { public ColorPreference( Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes ) { super( context, attrs, defStyleAttr, defStyleRes ); setDialogLayoutResource( R.layout.dialog_colorpreference ); } public ColorPreference( Context context, AttributeSet attrs, int defStyleAttr ) { super( context, attrs, defStyleAttr ); setDialogLayoutResource( R.layout.dialog_colorpreference ); } public ColorPreference( Context context, AttributeSet attrs ) { super( context, attrs ); setDialogLayoutResource( R.layout.dialog_colorpreference ); } public ColorPreference( Context context ) { super( context ); setDialogLayoutResource( R.layout.dialog_colorpreference ); } // 設定値の保存 public void setColor( int iColor ) { persistInt( iColor ); } // 設定値の読み込み public int getColor() { return getPersistedInt( Color.rgb( 0, 0, 0 ) ); } // preferences.xmlのandroid:defaultValueで設定したデフォルト値を利用するために必要な処理 @Override protected Object onGetDefaultValue( TypedArray a, int index ) { return a.getString( index ); } // preferences.xmlのandroid:defaultValueで設定したデフォルト値を利用するために必要な処理 // 書式は、"#RRGGBB"とする。（整数化の方法は、Color.parseColor("#RRGGBB");） @Override protected void onSetInitialValue( Object defaultValue ) { if( null == defaultValue ) { // 設定値保存済み。デフォルト値処理不要。 return; } setColor( Color.parseColor( (String)defaultValue ) ); } }

色設定プリファレンスダイアログフラグメントクラスの作成

色設定プリファレンスの色設定ダイアログのためのダイアログフラグメントクラスを作成します。

「Project」ペインの「app > java > ドメイン.パッケージ名」を右クリックします。
右クリックメニュー「New > Java Class」を選択します。

クラス名欄に「ColorPreferenceDialogFragmentCompat」と入力しエンターキーを押します。
続いて表示されるダイアログは、内容変更せず、「OK」ボタンを押します。
「ColorPreferenceDialogFragmentCompat」クラスができました。

「ColorPreferenceDialogFragmentCompat」クラスファイルの内容を以下のようにします。
package com.hiramine.settingsactivitytrial; import android.graphics.Color; import android.graphics.drawable.GradientDrawable; import android.os.Bundle; import android.view.View; import android.widget.ImageView; import android.widget.SeekBar; import android.widget.TextView; import androidx.preference.PreferenceDialogFragmentCompat; public class ColorPreferenceDialogFragmentCompat extends PreferenceDialogFragmentCompat { private ImageView m_imageviewColor; private TextView m_textviewR; private TextView m_textviewG; private TextView m_textviewB; private SeekBar m_seekbarR; private SeekBar m_seekbarG; private SeekBar m_seekbarB; private final SeekBar.OnSeekBarChangeListener m_listener = new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged( SeekBar seekBar, int i, boolean b ) { // プログレスバーの値の取得 int iR = m_seekbarR.getProgress(); int iG = m_seekbarG.getProgress(); int iB = m_seekbarB.getProgress(); // イメージの更新 m_imageviewColor.setBackgroundColor( Color.rgb( iR, iG, iB ) ); // テキストの更新 m_textviewR.setText( String.valueOf( iR ) ); m_textviewG.setText( String.valueOf( iG ) ); m_textviewB.setText( String.valueOf( iB ) ); } @Override public void onStartTrackingTouch( SeekBar seekBar ) { // 何もなし } @Override public void onStopTrackingTouch( SeekBar seekBar ) { // 何もなし } }; // インスタンス生成（「key」を処理する） public static ColorPreferenceDialogFragmentCompat newInstance( String key ) { ColorPreferenceDialogFragmentCompat fragment = new ColorPreferenceDialogFragmentCompat(); Bundle bundle = new Bundle( 1 ); bundle.putString( PreferenceDialogFragmentCompat.ARG_KEY, key ); fragment.setArguments( bundle ); return fragment; } // 設定値のダイアログからの取得 public int getColor() { // プログレスバーからRGB値の取得 int iR = m_seekbarR.getProgress(); int iG = m_seekbarG.getProgress(); int iB = m_seekbarB.getProgress(); // RGB値の結合 return Color.rgb( iR, iG, iB ); } @Override public void onDialogClosed( boolean positiveResult ) { if( positiveResult ) { ColorPreference colorpreference = (ColorPreference)getPreference(); // 設定値の取得 int iColor = getColor(); // 設定値の保存 colorpreference.setColor( iColor ); } } @Override protected void onBindDialogView( View view ) { super.onBindDialogView( view ); // 設定値の読み込み ColorPreference colorpreference = (ColorPreference)getPreference(); int iColor = colorpreference.getColor(); // RBG値の分解 int iR = Color.red( iColor ); int iG = Color.green( iColor ); int iB = Color.blue( iColor ); // Image m_imageviewColor = view.findViewById( R.id.imageview_color ); m_imageviewColor.setBackgroundColor( iColor ); // Red m_textviewR = view.findViewById( R.id.textview_r ); m_textviewR.setText( String.valueOf( iR ) ); m_seekbarR = view.findViewById( R.id.seekbar_r ); m_seekbarR.setProgress( iR ); m_seekbarR.setOnSeekBarChangeListener( m_listener ); // シークバーの背景色設定 GradientDrawable gradientDrawableR = new GradientDrawable(); gradientDrawableR.mutate(); gradientDrawableR.setOrientation( GradientDrawable.Orientation.LEFT_RIGHT ); gradientDrawableR.setColors( new int[]{ Color.BLACK, Color.RED } ); m_seekbarR.setBackground( gradientDrawableR ); // Green m_textviewG = view.findViewById( R.id.textview_g ); m_textviewG.setText( String.valueOf( iG ) ); m_seekbarG = view.findViewById( R.id.seekbar_g ); m_seekbarG.setProgress( iG ); m_seekbarG.setOnSeekBarChangeListener( m_listener ); // シークバーの背景色設定 GradientDrawable gradientDrawableG = new GradientDrawable(); gradientDrawableG.mutate(); gradientDrawableG.setOrientation( GradientDrawable.Orientation.LEFT_RIGHT ); gradientDrawableG.setColors( new int[]{ Color.BLACK, Color.GREEN } ); m_seekbarG.setBackground( gradientDrawableG ); // Blue m_textviewB = view.findViewById( R.id.textview_b ); m_textviewB.setText( String.valueOf( iB ) ); m_seekbarB = view.findViewById( R.id.seekbar_b ); m_seekbarB.setProgress( iB ); m_seekbarB.setOnSeekBarChangeListener( m_listener ); // シークバーの背景色設定 GradientDrawable gradientDrawableB = new GradientDrawable(); gradientDrawableB.mutate(); gradientDrawableB.setOrientation( GradientDrawable.Orientation.LEFT_RIGHT ); gradientDrawableB.setColors( new int[]{ Color.BLACK, Color.BLUE } ); m_seekbarB.setBackground( gradientDrawableB ); } }

設定フラグメントクラスの編集

設定フラグメントクラスに、色設定ダイアログを表示する処理を追加します。

設定アクティビティクラス「MySettingsActivity」の内部に定義された設定フラグメントクラス「SettingsFragment」の末尾に、onDisplayPreferenceDialog関数を追加します。

色設定ダイアログを表示しようとしているかをチェックする処理を追加します。
ColorPreferenceDialogFragmentCompat のインスタンスを生成し、表示する処理を追加します。
親クラスのonDisplayPreferenceDialog関数を呼び出す処理を追加します。

「MySettingsActivity」クラスファイルの内容を以下のようにします。
package com.hiramine.settingsactivitytrial; import android.os.Bundle; import androidx.appcompat.app.ActionBar; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.DialogFragment; import androidx.preference.Preference; import androidx.preference.PreferenceFragmentCompat; public class MySettingsActivity extends AppCompatActivity { @Override protected void onCreate( Bundle savedInstanceState ) { （・・・略・・・） } public static class SettingsFragment extends PreferenceFragmentCompat { @Override public void onCreatePreferences( Bundle savedInstanceState, String rootKey ) { setPreferencesFromResource( R.xml.root_preferences, rootKey ); } private static final String DIALOG_FRAGMENT_TAG = "ColorPreference"; @Override public void onDisplayPreferenceDialog( Preference preference ) { if( preference instanceof ColorPreference ) { if( null != getParentFragmentManager().findFragmentByTag( DIALOG_FRAGMENT_TAG ) ) { // ダイアログは既に表示されている return; } final DialogFragment dialogfragment = ColorPreferenceDialogFragmentCompat.newInstance( preference.getKey() ); dialogfragment.setTargetFragment( this, 0 ); dialogfragment.show( getParentFragmentManager(), DIALOG_FRAGMENT_TAG ); } else { super.onDisplayPreferenceDialog( preference ); } } } }

プリファレンスファイルの編集

プリファレンスファイル「root_preferences.xml」に、色を設定する設定項目を追加します。

プリファレンスファイル「root_preferences.xml」の内容を以下のようにします。
<PreferenceScreen xmlns:app="http://schemas.android.com/apk/res-auto"> <PreferenceCategory app:title="Color settings"> <com.hiramine.settingsactivitytrial.ColorPreference app:key="hoge_color" app:defaultValue="#FF0088" app:title="Hoge color" app:summary="Set the color of Hoge." /> </PreferenceCategory> <PreferenceCategory app:title="My settings"> （・・・略・・・） </PreferenceCategory> </PreferenceScreen>

メインアクティビティクラスの編集

メインアクティビティの設定値を表示するための処理に、色の設定値を表示する処理を追加します。

「MainActivity」クラスの onResume関数を変更します。

色の設定値を読み込む処理を追加します。
表示する文字列に、色の設定値を追加します。

「MainActivity」クラスの内容を以下のようにします。
package com.hiramine.settingsactivitytrial; import androidx.appcompat.app.AppCompatActivity; import androidx.preference.PreferenceManager; import android.content.Intent; import android.content.SharedPreferences; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.widget.TextView; import java.util.Arrays; import java.util.HashSet; import java.util.Set; public class MainActivity extends AppCompatActivity { @Override protected void onCreate( Bundle savedInstanceState ) { （・・・略・・・） } // オプションメニュー作成時の処理 @Override public boolean onCreateOptionsMenu( Menu menu ) { （・・・略・・・） } // オプションメニューのアイテム選択時の処理 @Override public boolean onOptionsItemSelected( MenuItem item ) { （・・・略・・・） } // 初回表示時、および、ポーズからの復帰時 @Override protected void onResume() { super.onResume(); // 設定値の読み込み SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences( getApplicationContext() ); boolean bFooFunction = prefs.getBoolean( "foo_function", false ); boolean bBarFunction = prefs.getBoolean( "bar_function", true ); String strBazName = prefs.getString( "baz_name", "Baaaz" ); String strQuxType = prefs.getString( "qux_type", "2" ); String[] astrDefaultCorgeOptions = getResources().getStringArray( R.array.default_corge_options ); Set<String> setstrCorgeOptions = prefs.getStringSet( "corge_options", new HashSet<>( Arrays.asList( astrDefaultCorgeOptions ) ) ); int iHogeColor = prefs.getInt( "hoge_color", Color.parseColor( "#FF0088" ) ); // 設定値の表示 TextView textviewSettings = findViewById( R.id.textview_settings ); String strSettings = "Hoge color (R,G,B) : (" + Color.red( iHogeColor ) + ", " + Color.green( iHogeColor ) + ", " + Color.blue( iHogeColor ) + ")\n\n" + "Foo function : " + bFooFunction + "\n" + "Bar function : " + bBarFunction + "\n" + "Baz name : " + strBazName + "\n" + "Qux type : " + strQuxType + "\n" + "Corge options : " + setstrCorgeOptions + "\n"; textviewSettings.setText( strSettings ); } }

「Cannot resolve symbol」エラーは、「Alt + Enter」で、必要なクラスをimportします。

リビルドし、エラー、警告がないことを確認します。

実行

Android端末にて、動作確認。

アプリを起動すると、メインアクティビティが表示されます。
メインアクティビティには、設定項目の設定値が表示されます。
色を設定する設定項目の設定値も表示されます。

右上のオプションメニューの「Settings」を選択すると、「設定アクティビティ」に移行します。

色を設定する設定項目を選択すると、色設定ダイアログが表示されます。

色設定ダイアログのスライダーを調整し色の設定を変更します。

設定を変更し、メインアクティビティに戻ると、変更した設定値が画面に表示されます。

設定アクティビティで変更した設定は、アプリを終了しても、次回アプリを起動した際には、設定内容が復元されます。