LinearLayout
特点:单层平面,普遍用于包裹多个控件,可嵌套
优点
- 理解和使用简单
- weight自适应填充空白
缺点
- 图层不能相互覆盖
用途
LinearLayout 的单图层特点,再结合 weight 属性可以快速根据页面结构进行设计。
下面举几个例子:
-
在登录输入框设计中,使用
LinearLayout作为外框,内部可添加EditText和ImageView等诸多组件。
如上图所示,在
EditText左右加入许多自定义图标,并用LinearLayout包裹,这是一种常见的设计方式。为了提升用户体验,LinearLayout也可以作为点击事件的载体。 -
在WebView这类自带点击事件的组件中,除了JS进行交互外。还可以通过外部包裹一个LinearLayout,同时重载
dispatchTouchEvent方法关闭WebView本身的点击效果,最终实现WebView的整体点击效果(实际是穿过WebView层点击到LinearLayout) -
在较为复杂的布局中,可以通过多重嵌套,并设置不同的
orientation来进行设计,例如下面的电影列表item设计:

RelativeLayout
特点:定位准确,可以设计多图层覆盖
优点:
- 可以实现更加准确的定位
- 可以多图层覆盖
缺点:
- 设计约束较为复杂
用途
RelativeLayout 弥补了 LinearLayout 的单图层特点,可以多图层覆盖悬浮效果。常见于翻页按钮,加载遮蔽板等,这些有多图层的要求。
RelativeLayout的图层遮蔽关系是 从上到下,下面的组件遮蔽上面的
下面举几个例子:
-
为了提升用户体验,通常会设计
加载遮蔽页面,通过一个布局将整个或者部分页面遮蔽住,此时需要考虑多图层的效果,因此用RelativeLayout较为合适,例如:- 非遮蔽的加载圈:

- 半透明的遮蔽加载圈:

*注意,遮蔽页面需要设置
可点击否则是能够穿过点击到下方组件的 - 非遮蔽的加载圈:
-
常用的翻页按钮,悬浮与页面两侧,也要用
RelativeLayout进行设置,例如:
总结
在使用过程中,还有其他许多布局能够选择,但是这两种最为基础。通常来讲,整体根布局为 RelativeLayout ,这样就可以进行多图层的设置,而 LinearLayout 则用来制作其中的各种组件块。