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
则用来制作其中的各种组件块。