#爱加密杯#Android应用切换皮肤功能实现

 

当然布局的切换要是apk类型的皮肤包才行。
首先我们写好3个布局，把三个按钮放在界面的上中下。
1）按钮在上面

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:tools="http://schemas.android.com/tools"
3.     android:id="@+id/main"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     tools:context=".MainActivity"
7.     android:paddingBottom="@dimen/activity_vertical_margin"
8.     android:paddingLeft="@dimen/activity_horizontal_margin"
9.     android:paddingRight="@dimen/activity_horizontal_margin"
10.     android:paddingTop="@dimen/activity_vertical_margin" >
12.     <TextView
13.              android:id="@+id/text"
14.         android:layout_width="wrap_content"
15.         android:layout_height="wrap_content"
16.         android:layout_centerInParent="true"
17.         android:text="点击界面到设置皮肤界面"
18.         android:textColor="#000000"
19.         android:textSize="20sp" >
20.     </TextView>
22.     <LinearLayout
23.         android:layout_alignParentTop="true"
24.         android:id="@+id/buttonLinear"
25.         android:layout_width="fill_parent"
26.         android:layout_height="wrap_content" >
28.         <LinearLayout
29.             android:layout_width="0.0dip"
30.             android:layout_height="fill_parent"
31.             android:layout_weight="1.0"
32.             android:gravity="center" >
34.             <ImageButton
35.                 android:id="@+id/prev"
36.                 android:layout_width="wrap_content"
37.                 android:layout_height="wrap_content"               
38.                 android:scaleType="center"
39.                 android:src="@drawable/prev" />
40.         </LinearLayout>
42.         <LinearLayout
43.             android:layout_width="0.0dip"
44.             android:layout_height="fill_parent"
45.             android:layout_weight="1.0"
46.             android:gravity="center" >
48.             <ImageButton
49.                 android:id="@+id/play"
50.                 android:layout_width="wrap_content"
51.                 android:layout_height="wrap_content"
52.                 
    
53.                 android:scaleType="center"
54.                 android:src="@drawable/play" />
55.         </LinearLayout>
57.         <LinearLayout
58.             android:layout_width="0.0dip"
59.             android:layout_height="fill_parent"
60.             android:layout_weight="1.0"
61.             android:gravity="center" >
63.             <ImageButton
64.                 android:id="@+id/next"
65.                 android:layout_width="wrap_content"
66.                 android:layout_height="wrap_content"                
    
67.                 android:scaleType="center"
68.                 android:src="@drawable/next" />
69.         </LinearLayout>
70.     </LinearLayout>
72. </RelativeLayout>

复制代码

2）按钮在中间：

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:tools="http://schemas.android.com/tools"
3.     android:id="@+id/main"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     tools:context=".MainActivity"
7.     android:paddingBottom="@dimen/activity_vertical_margin"
8.     android:paddingLeft="@dimen/activity_horizontal_margin"
9.     android:paddingRight="@dimen/activity_horizontal_margin"
10.     android:paddingTop="@dimen/activity_vertical_margin" >
12.     <TextView
13.              android:id="@+id/text"
14.         android:layout_alignParentBottom="true"
15.         android:layout_width="wrap_content"
16.         android:layout_height="wrap_content"
17.         android:layout_centerInParent="true"
18.         android:text="点击界面到设置皮肤界面"
19.         android:textColor="#000000"
20.         android:textSize="20sp" >
21.     </TextView>
23.     <LinearLayout
24.         android:layout_centerInParent="true"
25.         android:id="@+id/buttonLinear"
26.         android:layout_width="fill_parent"
27.         android:layout_height="wrap_content" >
29.         <LinearLayout
30.             android:layout_width="0.0dip"
31.             android:layout_height="fill_parent"
32.             android:layout_weight="1.0"
33.             android:gravity="center" >
35.             <ImageButton
36.                 android:id="@+id/prev"
37.                 android:layout_width="wrap_content"
38.                 android:layout_height="wrap_content"               
39.                 android:scaleType="center"
40.                 android:src="@drawable/prev" />
41.         </LinearLayout>
43.         <LinearLayout
44.             android:layout_width="0.0dip"
45.             android:layout_height="fill_parent"
46.             android:layout_weight="1.0"
47.             android:gravity="center" >
49.             <ImageButton
50.                 android:id="@+id/play"
51.                 android:layout_width="wrap_content"
52.                 android:layout_height="wrap_content"
53.                 
    
54.                 android:scaleType="center"
55.                 android:src="@drawable/play" />
56.         </LinearLayout>
58.         <LinearLayout
59.             android:layout_width="0.0dip"
60.             android:layout_height="fill_parent"
61.             android:layout_weight="1.0"
62.             android:gravity="center" >
64.             <ImageButton
65.                 android:id="@+id/next"
66.                 android:layout_width="wrap_content"
67.                 android:layout_height="wrap_content"                
    
68.                 android:scaleType="center"
69.                 android:src="@drawable/next" />
70.         </LinearLayout>
71.     </LinearLayout>
73. </RelativeLayout>

复制代码

3）按钮在下面：

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2.     xmlns:tools="http://schemas.android.com/tools"
3.     android:id="@+id/main"
4.     android:layout_width="match_parent"
5.     android:layout_height="match_parent"
6.     tools:context=".MainActivity"
7.     android:paddingBottom="@dimen/activity_vertical_margin"
8.     android:paddingLeft="@dimen/activity_horizontal_margin"
9.     android:paddingRight="@dimen/activity_horizontal_margin"
10.     android:paddingTop="@dimen/activity_vertical_margin" >
12.     <TextView
13.         android:id="@+id/text"
14.         android:layout_width="wrap_content"
15.         android:layout_height="wrap_content"
16.         android:layout_centerInParent="true"
17.         android:text="点击界面到设置皮肤界面"
18.         android:textColor="#000000"
19.         android:textSize="20sp" >
20.     </TextView>
22.     <LinearLayout
23.         android:layout_alignParentBottom="true"
24.         android:id="@+id/buttonLinear"
25.         android:layout_width="fill_parent"
26.         android:layout_height="wrap_content" >
28.         <LinearLayout
29.             android:layout_width="0.0dip"
30.             android:layout_height="fill_parent"
31.             android:layout_weight="1.0"
32.             android:gravity="center" >
34.             <ImageButton
35.                 android:id="@+id/prev"
36.                 android:layout_width="wrap_content"
37.                 android:layout_height="wrap_content"               
38.                 android:scaleType="center"
39.                 android:src="@drawable/prev" />
40.         </LinearLayout>
42.         <LinearLayout
43.             android:layout_width="0.0dip"
44.             android:layout_height="fill_parent"
45.             android:layout_weight="1.0"
46.             android:gravity="center" >
48.             <ImageButton
49.                 android:id="@+id/play"
50.                 android:layout_width="wrap_content"
51.                 android:layout_height="wrap_content"
52.                 
    
53.                 android:scaleType="center"
54.                 android:src="@drawable/play" />
55.         </LinearLayout>
57.         <LinearLayout
58.             android:layout_width="0.0dip"
59.             android:layout_height="fill_parent"
60.             android:layout_weight="1.0"
61.             android:gravity="center" >
63.             <ImageButton
64.                 android:id="@+id/next"
65.                 android:layout_width="wrap_content"
66.                 android:layout_height="wrap_content"                
    
67.                 android:scaleType="center"
68.                 android:src="@drawable/next" />
69.         </LinearLayout>
70.     </LinearLayout>
72. </RelativeLayout>

复制代码

这些布局分别放在不同的apk包里。命名要相同，这里都叫activity_main.xml。
然后在BaseActivity里根据不同的皮肤上下文。就可以创建出不同的布局文件。这样就实现了同一个界面，在不同皮肤里。图片不同，布局也不同。
根据不同皮肤上下文，创建view的代码如下：

1. public static  View createViewFromResource(Context context,String layoutName,ViewGroup root, boolean  attachToRoot) {
2.                 View resultView =null;
3.                  
4.                 try{
5.                         Context ct =getSkinContext(context);
6.                         int resid = ct.getResources().getIdentifier(layoutName, "layout", ct.getPackageName());
7.                         if(resid != 0){
8.                             resultView= currentInflater.inflate(resid, root, attachToRoot);
9.                         }else{
10.                                 resid = context.getResources().getIdentifier(layoutName, "layout",context.getPackageName());
11.                                 resultView= defalutInflater.inflate(resid, root, attachToRoot);
12.                         }
13.                         
    
14.                 }catch(Exception e){
15.                         e.printStackTrace();
16.                         
    
17.                 }
18.                 return resultView;
19.         }

复制代码

2.另外一个是字体颜色的设置。因为不同的皮肤下，假如字体颜色不跟着皮肤变化的话，看着会非常的别扭。
我们只需要把字体颜色放在一个xml里。不同的皮肤，解析不同的xml得到颜色，就可以实现字体颜色根据皮肤变化了。
这部分代码如下：

1. public static int getColorByName(String name){
2.                 int res = -1;
3.                  try {                        
   
4.                                 
   
5.                          String xmlFileName ="skin_color.xml";
6.                          Document doc  =  getDocumentByFile(xmlFileName);
7.                          if(doc != null){
8.                                  String value = getColorByName(doc,name);
9.                                  res=Color.parseColor(value);
10.                          }                         
11.                  
12.                 } catch (Exception e) {
13.                         e.printStackTrace();
14.                 }
15.                 return res;
16.                 
    
17.         } 
    
18.         
    
19.         private synchronized static Document getDocumentByFile(String xmlFileName) throws Exception{
20.                  
21.                 String path = Constant.SKIN_DIR+"skin_color.xml";
22.                 File file = new File(path);
23.                 if(file.exists())
24.                 {
25.                         
    
26.                         InputStream inputStream = null;
27.                         try {                                
    
28.                                 inputStream = new FileInputStream(file);
29.                                 return getDocument(inputStream);
30.                         } catch (Exception e) {
31.                                 e.printStackTrace();
32.                         }
33.                 }
34.                 return getDocument(MyApplication.getApplication().getAssets().open(xmlFileName));
35.                  
36.         }
38.         private static String getColorByName(Document doc,String name){
39.                  NodeList nodeList= doc.getElementsByTagName(name);
40.                  String res =null;
41.                  if(nodeList != null){
42.                          int len = nodeList.getLength();
43.                          if(len > 0){
44.                                  Element el = (Element)nodeList.item(0);
45.                                  res = el.getAttribute("value");
46.                                 
    
47.                          }else{
48.                                  
49.                          }
50.                  }
51.                  return res;
52.         }

复制代码

下面放上切换皮肤的效果图。无图无真相嘛。
<ignore_js_op style='font: 15px/24px Arial, "Microsoft Yahei", "Hiragino Sans GB", "Simsun,sans-self"; color: rgb(51, 51, 51); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; display: block; white-space: normal; -ms-word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke- 0px;'><ignore_js_op style='font: 15px/24px Arial, "Microsoft Yahei", "Hiragino Sans GB", "Simsun,sans-self"; color: rgb(51, 51, 51); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; display: block; white-space: normal; -ms-word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke- 0px;'><ignore_js_op style='font: 15px/24px Arial, "Microsoft Yahei", "Hiragino Sans GB", "Simsun,sans-self"; color: rgb(51, 51, 51); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; display: block; white-space: normal; -ms-word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke- 0px;'><ignore_js_op style='font: 15px/24px Arial, "Microsoft Yahei", "Hiragino Sans GB", "Simsun,sans-self"; color: rgb(51, 51, 51); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; display: block; white-space: normal; -ms-word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke- 0px;'><ignore_js_op style='font: 15px/24px Arial, "Microsoft Yahei", "Hiragino Sans GB", "Simsun,sans-self"; color: rgb(51, 51, 51); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; display: block; white-space: normal; -ms-word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke- 0px;'><ignore_js_op style='font: 15px/24px Arial, "Microsoft Yahei", "Hiragino Sans GB", "Simsun,sans-self"; color: rgb(51, 51, 51); text-transform: none; text-indent: 0px; letter-spacing: normal; word-spacing: 0px; display: block; white-space: normal; -ms-word-wrap: break-word; font-size-adjust: none; font-stretch: normal; background-color: rgb(255, 255, 255); -webkit-text-stroke- 0px;'>