【Android 界面效果25】android中include标签的使用

在一个项目中我们可能会需要用到相同的布局设计，如果都写在一个xml文件中，代码显得很冗余，并且可读性也很差，所以我们可以把相同布局的代码单独写成一个模块，然后用到的时候可以通过<include /> 标签来重用layout代码。

app_title.xml：

[xhtml] view plaincopy

1. <?xml version=”1.0″ encoding=”utf-8″?>
2. <RelativeLayout android:id=”@+id/titleLayout” android:layout_width=”fill_parent” android:layout_height=”wrap_content”
3. android:background=”@drawable/bt” xmlns:android=”http://schemas.android.com/apk/res/android”>
4. <TextView android:text=”@string/login” android:id=”@+id/title” android:textSize=”20px” android:textColor=”@color/white”
5. android:layout_width=”wrap_content” android:layout_centerInParent=”true” android:layout_height=”wrap_content”/>
6. <Button android:text=”返回” android:id=”@+id/refresh” android:layout_width=”wrap_content” android:layout_height=”wrap_content”
7. android:layout_alignParentRight=”true” android:focusable=”false” android:textColor=”@color/white”
8. android:background=”@drawable/okbutton” android:layout_marginRight=”3px”/>
9. </RelativeLayout>

app_tradelogin.xml:

[xhtml] view plaincopy

1. <?xml version=”1.0″ encoding=”utf-8″?>
2. <!– android:layout_below与 android:layout_above 是必须设置的，否则界面不规则，不设置android:layout_above本界面没有滑动效果–>
3. <ScrollView android:layout_below=”@+id/titleLayout” android:layout_above=”@+id/appbottom” android:layout_width=”fill_parent”
4. android:layout_height=”fill_parent” android:layout_centerInParent=”true” xmlns:android=”http://schemas.android.com/apk/res/android”>
5. <LinearLayout android:id=”@+id/theWholeLinearLayout” android:orientation=”vertical” android:layout_width=”fill_parent”
6. android:layout_height=”wrap_content” android:paddingLeft=”10px” android:paddingTop=”6px” android:paddingRight=”10px” >
7. <LinearLayout android:id=”@+id/linearLayoutLeft” android:orientation=”vertical” android:layout_width=”fill_parent” android:layout_height=”wrap_content”>
8. <TableLayout android:id=”@+id/widget43″ android:layout_width=”fill_parent”
9. android:layout_height=”fill_parent” android:orientation=”vertical”
10. xmlns:android=”http://schemas.android.com/apk/res/android” android:stretchColumns=”1″>
11. <TableRow >
12. <!–  引用定义好的TextView样式,如果这里的属性和样式里定义的属性重复，则这里会替换样式里定义的属性–>
13. <TextView android:id=”@+id/traderName” android:text=”@string/traderName” style=”@style/StyleTextInfo1″ mce_style=”@style/StyleTextInfo1″/>
14. <Spinner android:id=”@+id/traderNameS” android:layout_width=”fill_parent” android:layout_height=”wrap_content”>
15. </Spinner>
16. </TableRow>
17. <TableRow>
18. <TextView android:id=”@+id/departName” android:text=”@string/departName” style=”@style/StyleTextInfo1″ mce_style=”@style/StyleTextInfo1″/>
19. <Spinner android:id=”@+id/departNameS” android:layout_width=”fill_parent” android:layout_height=”wrap_content”/>
20. </TableRow>
21. <TableRow >
22. <TextView android:id=”@+id/strComponyName” android:text=”@string/accType” style=”@style/StyleTextInfo1″ mce_style=”@style/StyleTextInfo1″/>
23. <Spinner android:id=”@+id/accTyte” android:layout_width=”fill_parent” android:layout_height=”wrap_content”/>
24. </TableRow>
25. <TableRow >
26. <TextView android:id=”@+id/strUserAcc” android:text=”@string/userAcc” style=”@style/StyleTextInfo1″ mce_style=”@style/StyleTextInfo1″/>
27. <EditText android:id=”@+id/accEditText” android:text=”” android:numeric=”decimal” style=”@style/StyleEditText1″ mce_style=”@style/StyleEditText1″/>
28. </TableRow>
29. <TableRow >
30. <TextView android:id=”@+id/userPwd” android:text=”@string/userPWD” style=”@style/StyleTextInfo1″ mce_style=”@style/StyleTextInfo1″/>
31. <EditText android:id=”@+id/userPwdET” android:text=”” android:password=”true” style=”@style/StyleEditText1″ mce_style=”@style/StyleEditText1″/>
32. </TableRow>
33. <TableRow >
34. <TextView android:id=”@+id/commPwd” android:text=”@string/commPWD” style=”@style/StyleTextInfo1″ mce_style=”@style/StyleTextInfo1″/>
35. <EditText android:id=”@+id/commPwdET” android:text=”” android:password=”true” style=”@style/StyleEditText1″ mce_style=”@style/StyleEditText1″/>
36. </TableRow>
37. </TableLayout>
38. </LinearLayout>
39. <LinearLayout android:orientation=”vertical” android:layout_width=”fill_parent” android:layout_height=”wrap_content”>
40. <LinearLayout android:id=”@+id/linearLayoutTab1″ android:layout_height=”wrap_content”
41. android:layout_width=”fill_parent” android:orientation=”horizontal”>
42. <LinearLayout android:id=”@+id/linearLayoutTab2″ android:layout_height=”wrap_content”
43. android:layout_width=”fill_parent” android:orientation=”horizontal” android:layout_weight=”1″>
44. <CheckBox android:id=”@+id/recordAcc”  android:layout_width=”wrap_content” android:layout_height=”wrap_content”/>
45. <TextView android:id=”@+id/commPwd” android:text=”@string/saveUserAcc” style=”@style/StyleTextInfo1″ mce_style=”@style/StyleTextInfo1″/>
46. </LinearLayout>
47. <LinearLayout android:id=”@+id/linearLayoutTab2″ android:layout_height=”wrap_content”
48. android:layout_width=”fill_parent” android:orientation=”horizontal” android:layout_weight=”1″>
49. <CheckBox android:id=”@+id/hideAcc” android:layout_width=”wrap_content” android:layout_height=”wrap_content”/>
50. <TextView android:id=”@+id/commPwd” android:text=”@string/ycUserAcc” style=”@style/StyleTextInfo1″ mce_style=”@style/StyleTextInfo1″/>
51. </LinearLayout>
52. </LinearLayout>
53. <LinearLayout android:id=”@+id/linearLayoutTab1″ android:layout_height=”wrap_content”
54. android:layout_width=”fill_parent” android:orientation=”horizontal”>
55. <LinearLayout android:layout_width=”220px” android:layout_height=”wrap_content” android:orientation=”horizontal”
56. android:gravity=”center”>
57. <Button android:id=”@+id/confirmexch” android:gravity=”center” android:layout_width=”wrap_content”
58. android:layout_height=”50px” android:textSize=”22dp” android:text=”@string/login” android:layout_weight=”1″
59. android:focusable=”false” android:textColor=”@color/white” android:background=”@drawable/buttonl”/>
60. </LinearLayout>
61. <LinearLayout android:id=”@+id/linearLayoutTab” android:layout_height=”wrap_content”
62. android:layout_width=”fill_parent” android:gravity=”center”>
63. <ImageView android:layout_width=”wrap_content” android:layout_height=”50px” android:id=”@+id/myImage”/>
64. </LinearLayout>
65. </LinearLayout>
66. </LinearLayout>
67. </LinearLayout>
68. </ScrollView>

app_bottom.xml:

[xhtml] view plaincopy

1. <?xml version=”1.0″ encoding=”utf-8″?>
2. <LinearLayout android:id=”@+id/appbottom” android:orientation=”vertical” android:layout_width=”fill_parent”
3. android:layout_height=”wrap_content” android:layout_alignParentBottom=”true”
4. xmlns:android=”http://schemas.android.com/apk/res/android”>
5. <LinearLayout android:orientation=”horizontal” android:layout_width=”fill_parent”
6. android:layout_height=”wrap_content” android:background=”@drawable/light”>
7. <ImageView  android:id=”@+id/about” android:layout_width=”30px” android:layout_height=”wrap_content” android:src=”@drawable/ttt”
8. android:layout_alignParentLeft=”true”/>
9. <TextView android:id=”@+id/light” android:layout_width=”fill_parent” android:layout_height=”wrap_content” android:textColor=”@color/black”/>
10. </LinearLayout>
11. <LinearLayout android:orientation=”horizontal” android:layout_width=”fill_parent”
12. android:layout_height=”wrap_content” android:background=”@drawable/mainmenu”>
13. <Button android:id=”@+id/quotButton” android:layout_weight=”1″ android:layout_width=”52px” android:layout_height=”wrap_content”
14. android:textColor=”@color/white” android:text=”” android:background=”@drawable/button1″/>
15. <Button android:id=”@+id/entrustButton” android:layout_weight=”1″ android:layout_width=”52px” android:layout_height=”wrap_content”
16. android:textColor=”@color/white” android:text=”” android:background=”@drawable/button1″/>
17. <Button android:id=”@+id/queryButton” android:layout_weight=”1″ android:layout_width=”52px” android:layout_height=”wrap_content”
18. android:textColor=”@color/white” android:text=”” android:background=”@drawable/button1″/>
19. <Button android:id=”@+id/yinZhengButton” android:layout_weight=”1″ android:layout_width=”52px” android:layout_height=”wrap_content”
20. android:textColor=”@color/white” android:text=”” android:background=”@drawable/button1″/>
21. <Button android:id=”@+id/recordButton” android:layout_weight=”1″ android:layout_width=”52px” android:layout_height=”wrap_content”
22. android:textColor=”@color/white” android:text=”” android:background=”@drawable/button1″/>
23. <Button android:id=”@+id/logoutButton” android:layout_weight=”1″ android:layout_width=”52px” android:layout_height=”wrap_content”
24. android:textColor=”@color/white” android:text=”” android:background=”@drawable/button1″/>
25. </LinearLayout>
26. </LinearLayout>

tradelogin_portrait.xml:

[xhtml] view plaincopy

1. <?xml version=”1.0″ encoding=”utf-8″?>
2. <RelativeLayout android:layout_width=”fill_parent” android:layout_height=”fill_parent” style=”@style/StyleLayoutMain” mce_style=”@style/StyleLayoutMain”
3. xmlns:android=”http://schemas.android.com/apk/res/android”>
4. <!– include标签内不能设置RelativeLayout属性，如android:layout_alignParentBottom,因为不起作用 –>
5. <!– include标签内设置id属性后(android:id)，其引用的布局layout内的id属性就不起作用了，怀疑是其引用的layout外层包裹了一层include标签
6. 或者是覆盖了其内的属性id–>
7. <!– 如果没有include标签，所有布局代码都写在一个xml文件中，界面会显得很冗余，可读性很差。而且界面加载的时候是按照顺序加载的，前面的布局不能
8. 调用其后面的布局id。而采用include后，一个include中可以引用其后的include中的布局id属性 –>
9. <include android:id=”@id/titleLayout” layout=”@layout/app_title” />
10. <include layout=”@layout/app_tradelogin”/>
11. <include layout=”@layout/app_bottom”/>
12. </RelativeLayout>

效果如下：