Android 用style 简化 layout 布局文件（简单教程， So easy）

我有一个页面上面有若干个button样式都是相同的 在屏幕居中 25号白色字

之前的代码如下：

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout  
3.   xmlns:android="http://schemas.android.com/apk/res/android"  
4.   android:layout_width="fill_parent"  
5.   android:layout_height="fill_parent"  
6.   android:background="@color/background">  
7.  <ImageView  
8.     android:id="@+id/home_iv1"  
9.     android:layout_width="wrap_content"  
10.     android:layout_height="wrap_content"  
11.     android:paddingTop="15dip"  
12.     android:layout_centerHorizontal="true"  
13.     android:src="@drawable/home"  
14.     />  
15.     <Button  
16.         android:id="@+id/home_bt1"  
17.         android:layout_width="wrap_content"  
18.         android:layout_height="wrap_content"  
19.         android:layout_centerHorizontal="true"  
20.         android:layout_below="@id/home_iv1"  
21.         android:layout_marginTop="15dip"  
22.         android:background="@drawable/selector"  
23.         android:gravity="center"  
24.         android:text="@string/home_b1"  
25.         />  
26.     ........  
27.     <Button  
28.         android:id="@+id/home_bt5"  
29.         android:layout_width="wrap_content"  
30.         android:layout_height="wrap_content"  
31.         android:layout_centerHorizontal="true"  
32.         android:layout_below="@id/home_bt4"  
33.         android:layout_marginTop="15dip"  
34.         android:background="@drawable/selector"  
35.         android:gravity="center"  
36.         android:text="@string/home_b5"  
37.         />  
38. </RelativeLayout>  

 

我们可以看到这五个按钮除了ID和text、还有below（因为用的相对布局，如果用线性布局这块也可以相同）其他的都一样，那我们能不能简化一下这些重复的代码呢？可以，用style。

先看看用style怎么设置这些重复的属性：

在values下新建style.xml

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3. <style name="homebtn" >  
4.   <item name="android:layout_width">wrap_content</item>  
5.   <item name="android:layout_height">wrap_content</item>  
6.   <item name="android:textSize">20sp</item>  
7.   <item name="android:textColor">#FFFFffff</item>  
8.   <item name="android:gravity">center</item>  
9.   <item name="android:layout_marginTop">15dip</item>  
10.   <item name="android:layout_centerHorizontal">true</item>  
11.   <item name="android:background">@drawable/selector</item>  
12. </style>  
13. </resources>  

 在回到我们的布局文件在按钮中设置style="@style/homebtn"就可以了

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout  
3.   xmlns:android="http://schemas.android.com/apk/res/android"  
4.   android:layout_width="fill_parent"  
5.   android:layout_height="fill_parent"  
6.   android:background="@color/background">  
7.  <ImageView  
8.     android:id="@+id/home_iv1"  
9.     android:layout_width="wrap_content"  
10.     android:layout_height="wrap_content"  
11.     android:paddingTop="15dip"  
12.     android:layout_centerHorizontal="true"  
13.     android:src="@drawable/home"  
14.     />  
15.     <Button  
16.         android:id="@+id/home_bt1"  
17.         style="@style/homebtn"  
18.         android:layout_below="@id/home_iv1"  
19.         android:text="@string/home_b1"  
20.         />  
21.     .......  
22.         <Button  
23.         android:id="@+id/home_bt5"  
24.         style="@style/homebtn"  
25.         android:layout_below="@id/home_bt4"  
26.         android:text="@string/home_b5"  
27.         />  
28. </RelativeLayout>  

 

其实在style中可以定义多个样式给不同的组件使用，现在我们把ImageView也用样式定义一下吧：

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3. <style name="homebtn" >  
4.   <item name="android:layout_width">wrap_content</item>  
5.   <item name="android:layout_height">wrap_content</item>  
6.   <item name="android:textSize">20sp</item>  
7.   <item name="android:textColor">#FFFFffff</item>  
8.   <item name="android:gravity">center</item>  
9.   <item name="android:layout_marginTop">15dip</item>  
10.   <item name="android:layout_centerHorizontal">true</item>  
11.   <item name="android:background">@drawable/selector</item>  
12. </style>  
13. <style name="homeiv">  
14.   <item name="android:layout_width">wrap_content</item>  
15.   <item name="android:layout_height">wrap_content</item>  
16.   <item name="android:layout_marginTop">15dip</item>  
17.   <item name="android:layout_centerHorizontal">true</item>  
18. </style>  
19. </resources>  

 

 好了介绍到这里也就完了。等。。等一下这里好像出现了和刚才的布局文件一样的问题，重复的代码！（我是不是有重复癖，看见重复就想消灭。。）

这里的重复能不能消灭呢，这也是可以的。在style下还有一个个有用的属性：

parent – 可选，一些在自定义的style中没有指定的属性会继承parent style中的值。parent可以是android预定义的resource，也可以是自己定义的style。
现在看看使用parent之后的样子：

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <resources>  
3. <style name="homeiv">  
4.   <item name="android:layout_width">wrap_content</item>  
5.   <item name="android:layout_height">wrap_content</item>  
6.   <item name="android:layout_marginTop">15dip</item>  
7.   <item name="android:layout_centerHorizontal">true</item>  
8.   <item name="android:background">@drawable/home</item>  
9. </style>  
10. <style name="homebtn" parent="@style/homeiv">  
11.   <item name="android:textSize">20sp</item>  
12.   <item name="android:textColor">#FFFFffff</item>  
13.   <item name="android:gravity">center</item>  
14.   <item name="android:background">@drawable/selector</item>  
15. </style>  
16. </resources>  

 

当然style最主要的作用不是用来精简代码，而是让开发者自定义更个性的效果，不过这个附加的作用也不错。