Day 2 | 介面设计与元件布局

介面设计

1. Layout档在res/layout之下
2. 元件盘可直接挑选所需元件
3. 元件可直接点选并利用属性表修改相关内容
4. 元件树(Component Tree)描述元件阶层关系

若要从元件盘挑选，建议直接拖曳至元件树，因为能明确表示阶层，避免摆放错误。

布局元件

需使用布局元件(ViewGroup)来管理元件摆放位置；若要使元件被布局元件所控制，必须将其放入布局元件之内，形成父子层级的关系。

• LinearLayout 线性布局
  • 会依照摆放顺序排列子层元件
  • 分成垂直(Vertical)与水平(Horizontal)两种排列方向(Orientation)
  • 预设以水平排列
  • 用layout_width跟layout_height设定元件的宽度与高度
    • match_parent 元件宽度与高度扩展至与父层相同
    • wrap_content 元件宽度与高度随内容调整，内容包含文字、图片或子层
    • 固定数值
• FrameLayout 框架布局
  • 会将子层级元件依照元件树的排列顺序，由排列在前面的元件优先放置，并依序一层层覆盖。(树越上面，画面越下面)
• ConstraintLayout 约束性布局
  • 采用堆叠的方式呈现元件，子层的元件需要明确指出参考的对象，这种参考对象的行为称为「约束条件」
  1. 用padding设定内部距离摆放元件
  2. 设定buttonA对齐父层(Parent)
  3. 设定buttonB对齐A(@+id/btn_A)

视窗元件

所有画面都是由视窗元件(view)与布局元件构成；布局元件管控排列方式，视窗元件则是装置上会显示的内容(如文字图片等)

• TextView 纯文字
• Button 按钮，附带点击动画
• EditText 文字框，被点击後可以弹出键盘让使用者输入讯息
• RadioButton与RadioGroup 单选元件与单选元件群组，当RadioGroup中其中一个元件被选取，它的checked属性会变成"true"，其他RadioButton的checked属性会变成"false"