LinearLayout和RelativeLayout简述

发布时间 2023-04-12 10:46:28作者: 潶Se星期天~

LinearLayout

特点:单层平面,普遍用于包裹多个控件,可嵌套

优点

  • 理解和使用简单
  • weight自适应填充空白

缺点

  • 图层不能相互覆盖

用途

LinearLayout 的单图层特点,再结合 weight 属性可以快速根据页面结构进行设计。

下面举几个例子:

  1. 登录输入框设计中,使用 LinearLayout 作为外框,内部可添加 EditTextImageView 等诸多组件。

    登录页面输入框效果图

    如上图所示,在 EditText 左右加入许多自定义图标,并用LinearLayout包裹,这是一种常见的设计方式。为了提升用户体验,LinearLayout 也可以作为点击事件的载体

  2. 在WebView这类自带点击事件的组件中,除了JS进行交互外。还可以通过外部包裹一个LinearLayout,同时重载 dispatchTouchEvent 方法关闭WebView本身的点击效果,最终实现WebView的整体点击效果(实际是穿过WebView层点击到LinearLayout)

  3. 在较为复杂的布局中,可以通过多重嵌套,并设置不同的 orientation 来进行设计,例如下面的电影列表item设计:

电影列表Item布局

RelativeLayout

特点:定位准确,可以设计多图层覆盖

优点:

  • 可以实现更加准确的定位
  • 可以多图层覆盖

缺点:

  • 设计约束较为复杂

用途

RelativeLayout 弥补了 LinearLayout 的单图层特点,可以多图层覆盖悬浮效果。常见于翻页按钮,加载遮蔽板等,这些有多图层的要求。

RelativeLayout的图层遮蔽关系是 从上到下,下面的组件遮蔽上面的

下面举几个例子:

  1. 为了提升用户体验,通常会设计 加载遮蔽 页面,通过一个布局将整个或者部分页面遮蔽住,此时需要考虑多图层的效果,因此用 RelativeLayout 较为合适,例如:

    • 非遮蔽的加载圈:非遮蔽加载圈
    • 半透明的遮蔽加载圈:半透明遮蔽加载圈

    *注意,遮蔽页面需要设置 可点击 否则是能够穿过点击到下方组件的

  2. 常用的翻页按钮,悬浮与页面两侧,也要用 RelativeLayout 进行设置,例如:

    翻页悬浮按钮

总结

​ 在使用过程中,还有其他许多布局能够选择,但是这两种最为基础。通常来讲,整体根布局为 RelativeLayout ,这样就可以进行多图层的设置,而 LinearLayout 则用来制作其中的各种组件块