如何为Android应用创建视图布局

0. 创建视图布局的大致思路

  1. 使用layout组件进行视图布局
  2. 使用layout_margin控制视图间距
  3. 使用layout_widthlayout_height控制视图宽度和高度
  4. 使用layout_weight控制多个视图间的大小比例

1. 使用layout组件进行视图布局

  • 简单布局可以通过嵌套LinearLayout(horizontal or vertical)来实现;
  • 复杂布局可以使用ConstraintLayout(以避免多层LinearLayout嵌套)。

2. 使用layout_margin控制视图间距

  • 在layout组件内设置layout_margin可以为所有子组件与父组件间提供外边距;
  • 如果希望在水平布局的组件间增加间距,可以在靠后的组件上添加layout_marginStart(相比于layout_marginLeft对RightToLeft语言的支持更好)。

3. 使用layout_widthlayout_height控制视图宽度和高度

如果希望组件占满整个布局空间的宽度或者高度,可以将组件的layout_width / layout_height设置为match_parent; 如果希望组件仅仅占有自身所需宽度或者高度,可以将组件的layout_width / layout_height设置为wrap_content

4. 使用layout_weight控制多个视图组件在间的大小比例

在决定子组件视图的宽度时,LinearLayout使用的是layout_widthlayout_weight参数的混合值。

LinearLayout是分两个步骤来设置视图宽度的。

  • 第一步,LinearLayout查看layout_width属性值(竖直方位则查看layout_height属性值)。

屏幕截图 2025-05-19 05.40.14.png

  • 第二步,LinearLayout依据layout_weight属性值进行额外的空间分配。

屏幕截图 2025-05-19 05.40.22.png

layout_weight代表该视图组件在其父组件的布局空间中所占有的权重,例如,如果A组件的layout_weight为2,B组件的layout_weight为1,则A将获得父组件2/3的额外宽度,而B则将获得父组件1/3的额外宽度。

屏幕截图 2025-05-19 05.40.31.png

weight设置值也可以是浮点数。一种常见的设定方式是各组件属性值加起来等于1.0或100。比如,在上一个例子中,A组件的layout_weight应该为0.66,B组件的layout_weight则为0.37。

如想让LinearLayout分配完全相同的宽度给各自的视图,则只需设置各组件的layout_width属性值为0dp以避开第一步的空间分配就可以了。这样LinearLayout就会只考虑使用layout_weight属性值(而忽视组件自身的宽度)来完成所需的空间分配。

屏幕截图 2025-05-19 05.40.40.png

注意,如果不小心将某个组件的layout_weight设置为1,可能会导致该组件占满整个布局空间,导致其他组件在UI中不可见。

5. 例子:创建以下布局

屏幕截图 2025-05-19 05.39.54.png

所需步骤如下:

  1. 添加1个Layout(vertical)组件;
  2. 在Layout(vertical)组件内添加所需的视图元素、以及1个Layout(horizontal)组件(用于将Save和Clear按钮置于其中,以对其进行水平布局);
  3. 将Layout(vertical)的layout_margin设置为15dp,以为所有子组件提供距离屏幕边框15dp的外边距;
  4. 将Clear按钮的layout_marginStart设置为30dp,以在两个按钮间提供30dp的间距;
  5. 将StudentName和StudentEmail的layout_width设置为match_parent以占满水平宽度;
  6. Layout(horizontal)默认将Save和Clear按钮的layout_weight设置为1,因此2个按钮占据相等的水平宽度。

References

  • https://developer.android.com/develop/ui/views/layout/constraint-layout
  • https://www.youtube.com/watch?v=XamMbnzI5vE
  • https://book.douban.com/subject/25848404/