Android应用切换皮肤功能实现(二)

原文地址http://www.apkbus.com/forum.php?mod=viewthread&tid=149034&highlight=%E7%9A%AE%E8%82%A4

上次写完应用切换皮肤功能实现的时候，有网友提了些问题。我觉得上次说的还不够详细吧。现在接着再写详细点。
这次再在布局里增加了三个按钮图片的设置和一个字体颜色的设置。
1.其实上次只是讲到了切换皮肤时，只是替换了图片资源，其实连布局都可以切换。当然布局的切换要是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" >
11. <TextView
12. android:id="@+id/text"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:layout_centerInParent="true"
16. android:text="点击界面到设置皮肤界面"
17. android:textColor="#000000"
18. android:textSize="20sp" >
19. </TextView>
20. <LinearLayout
21. android:layout_alignParentTop="true"
22. android:id="@+id/buttonLinear"
23. android:layout_width="fill_parent"
24. android:layout_height="wrap_content" >
25. <LinearLayout
26. android:layout_width="0.0dip"
27. android:layout_height="fill_parent"
28. android:layout_weight="1.0"
29. android:gravity="center" >
30. <ImageButton
31. android:id="@+id/prev"
32. android:layout_width="wrap_content"
33. android:layout_height="wrap_content"
34. android:scaleType="center"
35. android:src="@drawable/prev" />
36. </LinearLayout>
37. <LinearLayout
38. android:layout_width="0.0dip"
39. android:layout_height="fill_parent"
40. android:layout_weight="1.0"
41. android:gravity="center" >
42. <ImageButton
43. android:id="@+id/play"
44. android:layout_width="wrap_content"
45. android:layout_height="wrap_content"
46. android:scaleType="center"
47. android:src="@drawable/play" />
48. </LinearLayout>
49. <LinearLayout
50. android:layout_width="0.0dip"
51. android:layout_height="fill_parent"
52. android:layout_weight="1.0"
53. android:gravity="center" >
54. <ImageButton
55. android:id="@+id/next"
56. android:layout_width="wrap_content"
57. android:layout_height="wrap_content"
58. android:scaleType="center"
59. android:src="@drawable/next" />
60. </LinearLayout>
61. </LinearLayout>
62. </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" >
11. <TextView
12. android:id="@+id/text"
13. android:layout_alignParentBottom="true"
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>
21. <LinearLayout
22. android:layout_centerInParent="true"
23. android:id="@+id/buttonLinear"
24. android:layout_width="fill_parent"
25. android:layout_height="wrap_content" >
26. <LinearLayout
27. android:layout_width="0.0dip"
28. android:layout_height="fill_parent"
29. android:layout_weight="1.0"
30. android:gravity="center" >
31. <ImageButton
32. android:id="@+id/prev"
33. android:layout_width="wrap_content"
34. android:layout_height="wrap_content"
35. android:scaleType="center"
36. android:src="@drawable/prev" />
37. </LinearLayout>
38. <LinearLayout
39. android:layout_width="0.0dip"
40. android:layout_height="fill_parent"
41. android:layout_weight="1.0"
42. android:gravity="center" >
43. <ImageButton
44. android:id="@+id/play"
45. android:layout_width="wrap_content"
46. android:layout_height="wrap_content"
47. android:scaleType="center"
48. android:src="@drawable/play" />
49. </LinearLayout>
50. <LinearLayout
51. android:layout_width="0.0dip"
52. android:layout_height="fill_parent"
53. android:layout_weight="1.0"
54. android:gravity="center" >
55. <ImageButton
56. android:id="@+id/next"
57. android:layout_width="wrap_content"
58. android:layout_height="wrap_content"
59. android:scaleType="center"
60. android:src="@drawable/next" />
61. </LinearLayout>
62. </LinearLayout>
63. </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" >
11. <TextView
12. android:id="@+id/text"
13. android:layout_width="wrap_content"
14. android:layout_height="wrap_content"
15. android:layout_centerInParent="true"
16. android:text="点击界面到设置皮肤界面"
17. android:textColor="#000000"
18. android:textSize="20sp" >
19. </TextView>
20. <LinearLayout
21. android:layout_alignParentBottom="true"
22. android:id="@+id/buttonLinear"
23. android:layout_width="fill_parent"
24. android:layout_height="wrap_content" >
25. <LinearLayout
26. android:layout_width="0.0dip"
27. android:layout_height="fill_parent"
28. android:layout_weight="1.0"
29. android:gravity="center" >
30. <ImageButton
31. android:id="@+id/prev"
32. android:layout_width="wrap_content"
33. android:layout_height="wrap_content"
34. android:scaleType="center"
35. android:src="@drawable/prev" />
36. </LinearLayout>
37. <LinearLayout
38. android:layout_width="0.0dip"
39. android:layout_height="fill_parent"
40. android:layout_weight="1.0"
41. android:gravity="center" >
42. <ImageButton
43. android:id="@+id/play"
44. android:layout_width="wrap_content"
45. android:layout_height="wrap_content"
46. android:scaleType="center"
47. android:src="@drawable/play" />
48. </LinearLayout>
49. <LinearLayout
50. android:layout_width="0.0dip"
51. android:layout_height="fill_parent"
52. android:layout_weight="1.0"
53. android:gravity="center" >
54. <ImageButton
55. android:id="@+id/next"
56. android:layout_width="wrap_content"
57. android:layout_height="wrap_content"
58. android:scaleType="center"
59. android:src="@drawable/next" />
60. </LinearLayout>
61. </LinearLayout>
62. </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. try{
4. Context ct =getSkinContext(context);
5. int resid = ct.getResources().getIdentifier(layoutName, "layout", ct.getPackageName());
6. if(resid != 0){
7. resultView= currentInflater.inflate(resid, root, attachToRoot);
8. }else{
9. resid = context.getResources().getIdentifier(layoutName, "layout",context.getPackageName());
10. resultView= defalutInflater.inflate(resid, root, attachToRoot);
11. }
12. }catch(Exception e){
13. e.printStackTrace();
14. }
15. return resultView;
16. }

复制代码

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

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

复制代码

下面放上切换皮肤的效果图。无图无真相嘛。
<ignore_js_op><ignore_js_op><ignore_js_op><ignore_js_op><ignore_js_op><ignore_js_op>

最后是源码，想要源码，就回复一下吧，反正又不会怀孕的。

本帖隐藏的内容

<ignore_js_op> 2.0.zip (6.5 MB, 下载次数: 117)