现在的位置: 首页 > 综合 > 正文

常见的布局

2017年10月09日 ⁄ 综合 ⁄ 共 11996字 ⁄ 字号 小 中 大 ⁄ 评论关闭

 

模型一： 水平三列坐拥式
      效果图：
      
      说明：水平三列，两边分别是"返回"，"提交"的按钮，中间是必须居中的几个字，一般都是标题名称。
              仿佛标题内容的背景坐拥左右两位美女般的按钮。
      方法：主要使用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的布局其实在手机上的实现是很难的。
      希望看了文章的人，能支持一下，有什么好的经典的布局，给我留言，一起探讨，一起分享。
      最后公布一个大概布局的三字文：

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

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

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

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞