菜鸟android4.0 Settings分析（二） 界面修改

 项目需要修改4.0的settings，先写点界面修改部分的实现吧

一、上面的分页tab

android3.0以后就加入了ActionBar，上面的那条是一个ActionBar，不熟悉的可以先去看看ActionBar的介绍

在Settings.java的onCreate（）方法中添加，代码如下：

[java] view plain copy print ?

1. ActionBar ab = getActionBar();  
2.         ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
3.         ab.setDisplayOptions(3);  
4.         Tab tab1 = ab.newTab();  
5.         tab1.setTabListener(new MyTabListener());  
6.         tab1.setText(R.string.settings_tab_individuation);  

ActionBar ab = getActionBar();
        ab.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
        ab.setDisplayOptions(3);
        Tab tab1 = ab.newTab();
        tab1.setTabListener(new MyTabListener());
        tab1.setText(R.string.settings_tab_individuation);

二、左侧Header背景及list item的背景更换

1、list item的背景在Settings.java的内部类HeaderAdapter的getView（）方法中进行设定，准备好自己的selector，参考代码如下：

[java] view plain copy print ?

1. if (holder.title.getText().equals(getContext().getResources().getString(R.string.header_category_wireless_networks))) {  
2.                 view.setBackgroundResource(R.drawable.selector_list_item_top);  
3.             } else {  
4.                 view.setBackgroundResource(R.drawable.selector_list_item_mid);  
5.             }  
6.               
7.             return view;  

if (holder.title.getText().equals(getContext().getResources().getString(R.string.header_category_wireless_networks))) {
            	view.setBackgroundResource(R.drawable.selector_list_item_top);
            } else {
            	view.setBackgroundResource(R.drawable.selector_list_item_mid);
            }
            
            return view;

2、背景的更换（即上图中左侧list下面的红色背景）

通过查看PreferenceActivity的源码，再查看对应的布局文件，找到list后面的layout的对应的id，在Settings.java的onCreate（）方法中进行背景的更换就可以了

参考代码如下：

[java] view plain copy print ?

1. View v1 = findViewById(com.android.internal.R.id.prefs);  
2.         v1.setBackgroundColor(Color.RED);  

View v1 = findViewById(com.android.internal.R.id.prefs);
        v1.setBackgroundColor(Color.RED);

3、左侧蓝色背景的更换

方法和左侧的背景更换一样，查看源码，找到对应的布局id，在Settings.java的onCreate（）方法中进行背景的更换就可以了，参考代码如下：

[java] view plain copy print ?

1. View v = findViewById(com.android.internal.R.id.prefs_frame);  
2.         v.setBackgroundColor(Color.BLUE);  

View v = findViewById(com.android.internal.R.id.prefs_frame);
        v.setBackgroundColor(Color.BLUE);

4、添加一点，右则的settings item的背景更换，右侧的item就是PreferenceScreen里面对应的Preference，看代码：

[html] view plain copy print ?

1. <CheckBoxPreference  
2.             android:defaultValue="true"  
3.             android:key="set_01"  
4.             android:layout="@layout/pref_list_item_top"  
5.             android:summaryOff="当前状态：关闭"  
6.             android:summaryOn="当前状态：开启"  
7.             android:title="提示-01"  
8.             android:widgetLayout="@layout/pref_widget_checkbox" />  
9.   
10.         <Preference  
11.             android:key="set_02"  
12.             android:layout="@layout/pref_list_item_mid"  
13.             android:summary="点击修改"  
14.             android:title="设置-02"  
15.             android:widgetLayout="@layout/pref_widget_more" />  

<CheckBoxPreference
            android:defaultValue="true"
            android:key="set_01"
            android:layout="@layout/pref_list_item_top"
            android:summaryOff="当前状态：关闭"
            android:summaryOn="当前状态：开启"
            android:title="提示-01"
            android:widgetLayout="@layout/pref_widget_checkbox" />

        <Preference
            android:key="set_02"
            android:layout="@layout/pref_list_item_mid"
            android:summary="点击修改"
            android:title="设置-02"
            android:widgetLayout="@layout/pref_widget_more" />

preference是可以指定layout和widgetLayout的，注意layout代码中控件的id，一定不可以错，要用系统的，layout代码如下：

[html] view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent"  
4.     android:layout_height="wrap_content"  
5.     android:background="@drawable/selector_list_item_bot"  
6.     android:gravity="center_vertical"  
7.     android:minHeight="?android:listPreferredItemHeight"  
8.     android:paddingRight="?android:scrollbarSize" >  
9.   
10.     <RelativeLayout  
11.         android:layout_width="wrap_content"  
12.         android:layout_height="wrap_content"  
13.         android:layout_marginBottom="6.0dip"  
14.         android:layout_marginLeft="15.0dip"  
15.         android:layout_marginRight="6.0dip"  
16.         android:layout_marginTop="6.0dip"  
17.         android:layout_weight="1.0" >  
18.   
19.         <TextView  
20.             android:id="@android:id/title"  
21.             android:layout_width="wrap_content"  
22.             android:layout_height="wrap_content"  
23.             android:ellipsize="marquee"  
24.             android:fadingEdge="horizontal"  
25.             android:singleLine="true"  
26.             android:textColor="@drawable/selector_text_title"  
27.             android:textSize="18.0sp" />  
28.   
29.         <TextView  
30.             android:id="@android:id/summary"  
31.             android:layout_width="wrap_content"  
32.             android:layout_height="wrap_content"  
33.             android:layout_alignLeft="@android:id/title"  
34.             android:layout_below="@android:id/title"  
35.             android:maxLines="2"  
36.             android:textColor="@drawable/selector_text_detail"  
37.             android:textSize="14.0sp" />  
38.     </RelativeLayout>  
39.   
40.     <LinearLayout  
41.         android:id="@android:id/widget_frame"  
42.         android:layout_width="wrap_content"  
43.         android:layout_height="fill_parent"  
44.         android:gravity="center_vertical"  
45.         android:orientation="vertical" />  
46.   
47. </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:background="@drawable/selector_list_item_bot"
    android:gravity="center_vertical"
    android:minHeight="?android:listPreferredItemHeight"
    android:paddingRight="?android:scrollbarSize" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="6.0dip"
        android:layout_marginLeft="15.0dip"
        android:layout_marginRight="6.0dip"
        android:layout_marginTop="6.0dip"
        android:layout_weight="1.0" >

        <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:textColor="@drawable/selector_text_title"
            android:textSize="18.0sp" />

        <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:textColor="@drawable/selector_text_detail"
            android:textSize="14.0sp" />
    </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>

widgetlayout的代码如下：

[html] view plain copy print ?

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <CheckBox xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@android:id/checkbox"  
4.     android:layout_width="wrap_content"  
5.     android:layout_height="wrap_content"  
6.     android:layout_gravity="center_vertical"  
7.     android:layout_marginRight="4.0dip"  
8.     android:button="@drawable/selector_checkbox"  
9.     android:clickable="false"  
10.     android:focusable="false" />  

<?xml version="1.0" encoding="UTF-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/checkbox"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginRight="4.0dip"
    android:button="@drawable/selector_checkbox"
    android:clickable="false"
    android:focusable="false" />

上面这个是CheckBox的widgetlayout

如果是普通的preference可以没有，也可以放一个imageView什么的（例如一个向右的箭头）起到指示作用。。效果如下：

三、点击对应tab里，左侧header list的刷新

申明一个标志位

在tab的点击事件里面对标记位进行置位，如下：

[java] view plain copy print ?

1. private class MyTabListener implements ActionBar.TabListener {  
2.   
3.       public void onTabSelected(Tab tab, FragmentTransaction ft) {  
4.           if (tab.getText().equals(getResources().getString(R.string.settings_tab_personal_info))) {  
5.               flag = FLAG_TAB_PERSONAL_INFO;  
6.           } else if (tab.getText().equals(getResources().getString(R.string.settings_tab_system))) {  
7.               flag = FLAG_TAB_SYSTEM;  
8.           } else if (tab.getText().equals(getResources().getString(R.string.settings_tab_individuation))) {  
9.               flag = FLAG_TAB_INDIVIDUATION;  
10.           }  
11.             
12.           invalidateHeaders();  
13.       }  
14.   
15.       public void onTabUnselected(Tab tab, FragmentTransaction ft) {  
16.             
17.       }  
18.   
19.       public void onTabReselected(Tab tab, FragmentTransaction ft) {  
20.       }  
21.   
22.   }  

private class MyTabListener implements ActionBar.TabListener {

      public void onTabSelected(Tab tab, FragmentTransaction ft) {
    	  if (tab.getText().equals(getResources().getString(R.string.settings_tab_personal_info))) {
    		  flag = FLAG_TAB_PERSONAL_INFO;
    	  } else if (tab.getText().equals(getResources().getString(R.string.settings_tab_system))) {
    		  flag = FLAG_TAB_SYSTEM;
    	  } else if (tab.getText().equals(getResources().getString(R.string.settings_tab_individuation))) {
    		  flag = FLAG_TAB_INDIVIDUATION;
    	  }
    	  
    	  invalidateHeaders();
      }

      public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    	  
      }

      public void onTabReselected(Tab tab, FragmentTransaction ft) {
      }

  }

然后在onBuilderHeader方法里面根据对应的flag加载不同的xml，代码如下：

[java] view plain copy print ?

1. @Override  
2.     public void onBuildHeaders(List<Header> headers) {  
3.         if (flag == FLAG_TAB_SYSTEM) {  
4.             loadHeadersFromResource(R.xml.settings_headers, headers);  
5.         } else if (flag == FLAG_TAB_PERSONAL_INFO) {  
6.             loadHeadersFromResource(R.xml.settings_headers_personal_info, headers);  
7.         } else {  
8.             loadHeadersFromResource(R.xml.settings_headers_individuation, headers);  
9.         }  
10.           
11.   
12.         updateHeaderList(headers);  
13.   
14.         mHeaders = headers;  
15.     }  

@Override
    public void onBuildHeaders(List<Header> headers) {
    	if (flag == FLAG_TAB_SYSTEM) {
    		loadHeadersFromResource(R.xml.settings_headers, headers);
    	} else if (flag == FLAG_TAB_PERSONAL_INFO) {
    		loadHeadersFromResource(R.xml.settings_headers_personal_info, headers);
    	} else {
    		loadHeadersFromResource(R.xml.settings_headers_individuation, headers);
    	}
        

        updateHeaderList(headers);

        mHeaders = headers;
    }

总结一下：

上面所说的只是最基本的界面修改。目前正在做settings，欢迎交流