布局和动态布局 | 青训营笔记

99 阅读3分钟

布局和动态布局 | 青训营笔记

写在前面

这是我参与「第四届青训营 」笔记创作活动的第1天

该笔记为之前断断续续的笔记片段和大项目之后的笔记的整合,复习一些基本知识和在项目中遇到的问题。如有不妥之处,还望予以指正。

知识梳理

UI(User Interface)

UI 是用户第一眼看见的,是用户面对时间最长也是最主要的交互界面。

UI 的好坏会严重影响到用户的行为。

就我个人看来, Android APP 主要是由容器和内容物构成。容器也就是布局,内容物也就是各式各样的组件。想要合理又美观的 UI ,需要 UI 设计师精心设计。

UI 组件

个人常用的 UI 组件如下。都继承自 View,具有基本相同的属性 。

TextView:文本组件。

ImageView:图像组件。

ScrollView:滚动组件,让里面的布局能够上下、左右滚动。

EditText:输入框组件。

Button:按钮组件。

RadioButton:单选按钮。

CheckBox:复选按钮。

布局

Android APP 的布局是通过 XML 文件来管理的,让我想起了写 HTML 的时候,有点像,感觉上 HTML 写起来更简单。听说 Flutter 也是一个十分不错的开发利器,但本人学识浅薄,也只限于听说过,并没有用来开发。

LinearLayout:线性布局,可以设置垂直排列或者水平排列,常用。

RelativeLayout:相对布局,通过父容器和组件之间的相对位置来定位,常用。

FrameLayout:单帧布局,一般填充一个单一对象,如 fragment。

ConstraintLayout:约束布局,与相对布局有些类似,非常适合在可视化界面开发,推荐使用。

AbsoluteLayout:绝对布局,通过坐标定位的方法定位组件或者布局,完全不建议使用。

组合

通过布局和组件可以实现许多常用的场景。如:

登录和注册:用户ID(输入框)、密码(输入框)、登录或者注册(按钮)

用户信息:用户头像(图像)、用户名(文本)、用户二维码(按钮)

商品:商品图片(图像)、商品信息(文本)、前去购买(按钮)

动态布局

通过代码生成的方式,生成相应的布局和组件。最后通过 addView() 添加到对应的布局中去。

// 定义一个线性布局
LinearLayout linearLayout = new LinearLayout(this);
// 设置布局属性
linearLayout.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,300));
// 设置布局为水平排列
linearLayout.setOrientation(LinearLayout.HORIZONTAL);

在某些需要动态布局的地方可以通过这种方式来设置布局。但我更喜欢用 layout.xml 文件,更加方便。

遇到的问题

ScrollView 不能添加多个组件或布局

我想展示一个电影榜单,电影榜单显示的内容是一个滚动列表,列表里面的子项是显示一个包含电影基本信息的组合。

当多个组合放入 ScrollView 中时报错,显示不能添加多个组件或布局。

用一个线性布局作为容器容纳这些组合,设置为垂直排列,再将布局添加到 ScrollView 中即可正常运行。