Android学习系列(5)--App布局初探之简单模型
来源:互联网 发布:linux安装论坛 编辑:程序博客网 时间:2024/05/16 00:41
人类科技的进步源自探索,探索来自于发现本原,当然App布局没这么先进,本文也只是一个归类总结。
这篇文章是android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用。
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的布局其实在手机上的实现是很难的。
希望看了文章的人,能支持一下,有什么好的经典的布局,给我留言,一起探讨,一起分享。
最后公布一个大概布局的三字文:
上中下,左中右,多行列,用相对。
线性局,紧凑排,无方向,可居中。
帧布局,定位准,相关弱,代码少。
- Android学习系列(5)--App布局初探之简单模型
- Android学习系列(5)--App布局初探之简单模型
- Android学习系列(5)--App布局初探之简单模型
- Android学习系列(5)--App布局初探之简单模型
- Android学习系列(5)--App布局初探之简单模型
- Android学习系列(5)--App布局初探之简单模型
- Android学习系列(二)--App布局初探之简单模型
- Android系列学习讲座之五--App布局初探之简单模型
- Android --- App布局初探之简单模型
- App布局初探之简单模型
- App布局初探之简单模型
- APP布局之简单模型的秘诀
- Android简单的App布局模型源代码
- App布局模型Android源代码
- 快乐分享Android学习心得---模型学习方探究App布局学习
- CSS学习之布局模型
- android app之布局优化
- ExtJs2.0学习系列(5)--区域布局之Accordion布局
- 文档:手册:1-4-0:3.1.2 渲染通路(Pass)
- js hashTable
- JavaScript可否多线程? 深入理解JavaScript定时机制
- 基础练习一
- .NET组件和COM组件之间的相互操作
- Android学习系列(5)--App布局初探之简单模型
- 手把手教你把Vim改装成一个IDE编程环境(图文)
- Train Problem
- eclipse中clean的作用
- ABAP_ALV_例子(采购申请单查询)
- linux ubuntu安装php运行环境
- MediaRecorder 学习
- LINUX SIGNAL信号标志详解
- 实习日记022(8月16日)