在Api Demo里面有一个叫ColorPickerDialog的对话框,该对话框扩展了Dialog 的功能,使其具备颜色选择器的功能。具体可以参考Api Demo源代码,路径为:Android-sdk-windows\samples\android-7\ApiDemos\src\com \example\android\apis\graphics\ColorPickerDialog.java
本功能是基于上述的颜色选择器对话框进行扩展,模仿PreferceActivity 组件的实现方式,新建一个名为ColorPickerPreference 的类使其继承自DialogPreference 并实现其内部功能菜单,如图:
在Api Demo里面的颜色选择器是不具备有黑色和白色的选择的,这里我们虽然使用api Demo 里面的颜色选择器但其内部我们稍稍改造了一下。使其支持黑色和白色的选择,如上图中间的一条颜色条,头部和尾部分别代表黑色和白色。
为了显示的友好性,如果用户选择了颜色应该应该会有一个内容窗口或者一个文本对用户的选择做出相应的预览效果,。我们这里使用了一个TextView 做为颜色的预览效果,我们知道,Preference 的summary 只支持字符串的操作,类似下面的图:
如上图,只支持类型类型为CharSequence和字符所在的资源ID位置,那么我们这里如何使其支持颜色的显示和动态更换颜色呢?
这一切都在神奇的回调函数,onCreateView 里面这个方法先于 onBindView 执行,在里面初始化视图并且返回视图。具体处理见下面代码:
@Override protected View onCreateView(ViewGroup parent) { // TODO Auto-generated method stub View view=LayoutInflater.from(getContext()).inflate( R.layout.preference, null); TextView title = (TextView) view.findViewById(R.id.title); title.setText(getTitle()); summary = (TextView) view.findViewById(R.id.summary); summary.setText(getSummary()); SharedPreferences prefs = getPreferenceManager().getSharedPreferences(); mInitialColor = prefs.getInt(getKey(), Color.LTGRAY); summary.setTextColor(mInitialColor); return view; }
上面代码,我们通过LayoutInflater 函数引入一个外部的布局文件,然后设置其title 和summary 并初始其颜色,通过SharedPreferences 类调用保存后的颜色值,布局文件如下:
<?xml version="1.0" encoding="UTF-8"?> <LinearLayout android:id="@+id/LinearLayout01" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <RelativeLayout android:layout_width="fill_parent" android:gravity="center" android:layout_height="fill_parent"> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_marginLeft="15dp" android:textAppearance="?android:attr/textAppearanceLarge" android:layout_height="wrap_content"></TextView> <ImageView android:src="@drawable/ic_dialog_menu_generic" android:layout_marginRight="15dp" android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content"></ImageView> <TextView android:id="@+id/summary" android:layout_below="@id/title" android:layout_marginLeft="15dp" android:layout_width="wrap_content" android:layout_height="wrap_content"></TextView> </RelativeLayout> </LinearLayout>