布局初探之简单模型

Android界面开发多多少少会有很多雷同或者相似的布局，不仅如此，纵观Android应用的界面，总也逃不出那些熟悉的结构。
今天，我根据经验，把我认为的常见的布局做一个分析，归纳出几种简单的模型，这些模型一般是我认为解决其对应布局问题的最佳布局，具体要看情况。
因为工作的限制，我无法专门研究天马行空，万罗天象的布局，只能根据我工作中碰到的布局，略加斟酌。
还有一点我要强调，这些布局的原则就是：简单，灵活。 

模型一： 水平三列坐拥式
      效果图：
      
      说明：水平三列，两边分别是"返回"，"提交"的按钮，中间是必须居中的几个字，一般都是标题名称。
              仿佛标题内容的背景坐拥左右两位美女般的按钮。
      方法：主要使用FrameLayout布局
      素材：
              、
      layout代码：

01

<!--这种布局:

02	缺点是，标题只能就几个字，字多了就会撑开并和两边的按钮重叠

03	优点是，代码简洁;-->

04	<?xml version="1.0" encoding="utf-8"?>

05	<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

06	android:layout_width="fill_parent"

07	android:layout_height="wrap_content"

08	android:background="@drawable/layout01_bg"

09	android:paddingLeft="10dip"

10	android:paddingRight="10dip"

11

>

12	<Button android:layout_gravity="left|center_vertical"

13	android:layout_width="wrap_content"

14	android:layout_height="wrap_content"

15	android:background="@drawable/layout01_tool"

16	android:text="返回"

17	android:padding="8dip"

18

/>

19

20	<TextView android:layout_gravity="center"

21	android:layout_width="wrap_content"

22	android:layout_height="wrap_content"

23	android:text="标题内容"

24	android:textSize="18dip"

25	android:textColor="#000000" />

26

27	<Button android:layout_gravity="right|center_vertical"

28	android:layout_width="wrap_content"

29	android:layout_height="wrap_content"

30	android:background="@drawable/layout01_tool"

31	android:text="前进"

32	android:padding="8dip"

33

/>

34	</FrameLayout>

模型二：水平三列双耳式
      效果图：
 
      说明： 水平三列，两边分别是"返回"，"提交"的按钮，中间是几个字，这几个字可以居左，居中，居右，而不与两边的按钮重叠。
               此模型和坐拥式模型相似，但是中间的部分不是把左右按钮坐拥入怀，而是单独占据，且也只占据中间部分。
               这种模型能够实现坐拥式模型的效果，而且能偏左偏右而不和两边按钮重叠。
               但是因为这种情况使用RelativeLayout布局比较好，需要定义ID，稍微麻烦了一点点。 
      方法：主要是RelativeLayout布局
      素材：同上
      layout代码：

01

<!--这种布局：

02	缺点是代码还算简洁，但是比坐拥式要稍微复杂一点

03	有点是比坐拥式更强大，更灵活

04

-->

05	<?xml version="1.0" encoding="utf-8"?>

06	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

07	android:layout_width="fill_parent"

08	android:layout_height="wrap_content"

09	android:background="@drawable/layout01_bg"

10	android:paddingLeft="10dip"

11	android:paddingRight="10dip"

12

>

13	<Button android:id="@+id/left_button"

14	android:layout_alignParentLeft="true"

15	android:layout_centerVertical="true"

16	android:layout_width="wrap_content"

17	android:layout_height="wrap_content"

18	android:background="@drawable/layout01_tool"

19	android:text="返回列表"

20	android:padding="8dip"

21

/>

22	<Button android:id="@+id/right_button"

23	android:layout_alignParentRight="true"

24	android:layout_centerVertical="true"

25	android:layout_width="wrap_content"

26	android:layout_height="wrap_content"

27	android:background="@drawable/layout01_tool"

28	android:text="评论"

29	android:padding="8dip"

30

/>

31	<!--设置LeftOf和RightOf，可填充中间空余部分-->

32	<TextView android:layout_toRightOf="@id/left_button"

33	android:layout_toLeftOf="@id/right_button"

34	android:layout_centerVertical="true"

35	android:gravity="left"

36	android:paddingLeft="5dip"

37	android:layout_width="fill_parent"

38	android:layout_height="wrap_content"

39	android:text="资讯>>正文"

40	android:textSize="18dip"

41	android:textColor="#000000" />

42

43	</RelativeLayout>

      关于这个模型，我补充一点，很多人认为这个用LinearLayout布局，设置两边的控件居左居右，中间的设置layout_gravity想偏左就偏左，想偏右就偏右。
      但是，LinearLayout布局方向为"horizontal" ,layout_gravity是无效的。

模型三： 水平四列双耳互补式
      效果图：
 
 
      说明： 两边是按钮，中间部分被两个控件互补式分割，主要是左边的会随内容填充，但是必须两者内容宽度之和不能大于中间部分。
               这个和双耳式差不多，也说明了，双耳式在保证有空余空间的基础上，可以扩充到4列，5列等多列。
      方法：主要是RelativeLayout布局
      素材：同上
      layout代码：

01	<!--双耳式在多列情况下的扩展式-->

02	<?xml version="1.0" encoding="utf-8"?>

03	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

04	android:layout_width="fill_parent"

05	android:layout_height="wrap_content"

06	android:background="@drawable/layout01_bg"

07	android:paddingLeft="10dip"

08	android:paddingRight="10dip"

09

>

10	<Button android:id="@+id/left_button"

11	android:layout_alignParentLeft="true"

12	android:layout_centerVertical="true"

13	android:layout_width="wrap_content"

14	android:layout_height="wrap_content"

15	android:background="@drawable/layout01_tool"

16	android:text="返回列表"

17	android:padding="8dip"

18

/>

19	<Button android:id="@+id/right_button"

20	android:layout_alignParentRight="true"

21	android:layout_centerVertical="true"

22	android:layout_width="wrap_content"

23	android:layout_height="wrap_content"

24	android:background="@drawable/layout01_tool"

25	android:text="评论"

26	android:padding="8dip"

27

/>

28	<!-- 下面这个宽度是wrap_content,在左边按钮的右边，能够随内容加宽 -->

29	<TextView android:id="@+id/center_text_01"

30	android:layout_toRightOf="@id/left_button"

31	android:layout_centerVertical="true"

32	android:gravity="left"

33	android:paddingLeft="5dip"

34	android:layout_width="wrap_content"

35	android:layout_height="wrap_content"

36	android:background="#aabbcc"

37	android:text="夫妇+小三"

38	android:textSize="18dip"

39	android:textColor="#000000" />

40	<!-- 下面这个宽度是fill_parent,自动填充中间部分的空余空间，分别定义了左右依赖的控件，所以放在最后 -->

41	<TextView android:id="@+id/center_text_02"

42	android:layout_toRightOf="@id/center_text_01"

43	android:layout_toLeftOf="@id/right_button"

44	android:layout_centerVertical="true"

45	android:gravity="right"

46	android:paddingLeft="5dip"

47	android:layout_width="fill_parent"

48	android:layout_height="wrap_content"

49	android:background="#ccaabb"

50	android:text="何求"

51	android:textSize="18dip"

52	android:textColor="#000000" />

53	</RelativeLayout>

 模型四：水平多列分摊式(增强版)
      效果图：
 
      说明：几大模块均占所有区域，之间以小小的分割线隔离。
              因为分割线只占很小的部分，所有模块和分割线并不是分摊的，但是模块标题本身占据大头，他们之间是分摊的。
      素材：
 
      方法： 直接用LinearLayout布局，模块均摊，都设置layout_weight="1"，分割线不分摊，不设置layout_weight,默认自包裹，不延伸。
      layout代码：

01	<!--此代码采用动态生成，只要稍加判断，效果一样-->

02	<?xml version="1.0" encoding="utf-8"?>

03	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

04	android:layout_width="fill_parent"

05	android:layout_height="25dip"

06	android:background="#ffffff"

07

>

08	<TextView android:text="首页"

09	android:layout_weight="1"

10	android:gravity="center"

11	android:layout_gravity="center_vertical"

12	android:layout_width="wrap_content"

13	android:layout_height="wrap_content"

14

/>

15	<ImageView android:gravity="center"

16	android:layout_gravity="center_vertical"

17	android:layout_width="10dip"

18	android:layout_height="wrap_content"

19	android:src="@drawable/layout04_split"

20

/>

21	<TextView android:text="资讯"

22	android:layout_weight="1"

23	android:gravity="center"

24	android:layout_gravity="center_vertical"

25	android:layout_width="wrap_content"

26	android:layout_height="wrap_content"

27

/>

28	<ImageView android:gravity="center"

29	android:layout_gravity="center_vertical"

30	android:layout_width="10dip"

31	android:layout_height="wrap_content"

32	android:src="@drawable/layout04_split"/>

33	<TextView android:text="博客"

34	android:layout_weight="1"

35	android:gravity="center"

36	android:layout_gravity="center_vertical"

37	android:layout_width="wrap_content"

38	android:layout_height="wrap_content"

39

/>

40	<ImageView android:gravity="center"

41	android:layout_gravity="center_vertical"

42	android:layout_width="10dip"

43	android:layout_height="wrap_content"

44	android:src="@drawable/layout04_split"/>

45	<TextView android:text="图片"

46	android:layout_weight="1"

47	android:gravity="center"

48	android:layout_gravity="center_vertical"

49	android:layout_width="wrap_content"

50	android:layout_height="wrap_content"

51

/>

52	<ImageView android:gravity="center"

53	android:layout_gravity="center_vertical"

54	android:layout_width="10dip"

55	android:layout_height="wrap_content"

56	android:src="@drawable/layout04_split"/>

57	<TextView android:text="论坛"

58	android:layout_weight="1"

59	android:gravity="center"

60	android:layout_gravity="center_vertical"

61	android:layout_width="wrap_content"

62	android:layout_height="wrap_content"

63

/>

64	</LinearLayout>

模型五：垂直三行天地式
      效果图：

      说明：类似于水平三列双耳式，上下固定，中间自适应（自填充），不多说。
      方法：同水平三列双耳式，使用RelativeLayout布局
      layout代码：

01	<?xml version="1.0" encoding="utf-8"?>

02	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	android:layout_width="fill_parent"

04	android:layout_height="fill_parent">

05	<TextView android:id="@+id/top_text"

06	android:layout_alignParentTop="true"

07	android:layout_width="fill_parent"

08	android:layout_height="wrap_content"

09	android:gravity="center"

10	android:text="上海车展"

11	android:textColor="#ffffff"/>

12	<LinearLayout android:id="@+id/bottom_linear"

13	android:layout_width="fill_parent"

14	android:layout_height="wrap_content"

15	android:gravity="center"

16	android:layout_alignParentBottom="true"

17	android:background="#123456"

18	android:orientation="horizontal">

19	<Button  android:layout_width="wrap_content"

20	android:layout_height="wrap_content"

21	android:text="上一张"/>

22	<Button  android:layout_width="wrap_content"

23	android:layout_height="wrap_content"

24	android:layout_gravity="center"

25	android:text="下一张"/>

26	</LinearLayout>

27	<!-- 下面部分是中间主体部分，我特意用LinearLayout包裹起来，表示这里面可以填充其他任何组合的控件 -->

28	<LinearLayout android:id="@+id/center_linear"

29	android:layout_below="@id/top_text"

30	android:layout_above="@id/bottom_linear"

31	android:layout_width="fill_parent"

32	android:layout_height="fill_parent"

33	android:background="#ffffff"

34	android:gravity="center">

35	<ImageView android:layout_width="fill_parent"

36	android:layout_height="fill_parent"

37	android:src="@drawable/shanhai" />

38	</LinearLayout>

39	</RelativeLayout>

模型六：垂直三行弹簧式
      效果图：

      说明：这种模型很简单，类似于弹簧，最下面的一行能伸能屈，中间部分随内容固定。
      方法：类似于模式五。
      layout代码：

01	<?xml version="1.0" encoding="utf-8"?>

02	<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

03	android:layout_width="fill_parent"

04	android:layout_height="fill_parent">

05	<!-- 顶部 -->

06	<TextView android:id="@+id/top_text"

07	android:layout_alignParentTop="true"

08	android:layout_width="fill_parent"

09	android:layout_height="wrap_content"

10	android:gravity="center"

11	android:text="上海车展"

12	android:textColor="#ffffff"/>

13	<!-- 顶部的下面是中间导航部分 -->

14	<LinearLayout android:id="@+id/center_linear"

15	android:layout_below="@id/top_text"

16	android:layout_width="fill_parent"

17	android:layout_height="wrap_content"

18	android:gravity="center"

19	android:background="#123456"

20	android:orientation="horizontal">

21	<Button  android:layout_width="wrap_content"

22	android:layout_height="wrap_content"

23	android:text="上一张"/>

24	<Button  android:layout_width="wrap_content"

25	android:layout_height="wrap_content"

26	android:layout_gravity="center"

27	android:text="下一张"/>

28	</LinearLayout>

29	<!-- 最后部分填充剩下的区域 -->

30	<LinearLayout android:id="@+id/bottom_linear"

31	android:layout_below="@id/center_linear"

32	android:layout_width="fill_parent"

33	android:layout_height="fill_parent"

34	android:background="#ffffff"

35	android:gravity="center"

36	android:layout_alignParentBottom="true">

37	<ImageView android:layout_width="fill_parent"

38	android:layout_height="fill_parent"

39	android:src="@drawable/shanhai" />

40	</LinearLayout>

41	</RelativeLayout>

      初探之下，列举了简单的6中模型，除此之外，本人发现受限于手机屏幕大小的限制和高宽的固定，有很多web的布局其实在手机上的实现是很难的。
      希望看了文章的人，能支持一下，有什么好的经典的布局，给我留言，一起探讨，一起分享。
      最后公布一个大概布局的三字文：

上中下，左中右，多行列，用相对。

线性局，紧凑排，无方向，可居中。

帧布局，定位准，相关弱，代码少。