构建简单界面

Android 应用的界面 由布局(ViewGroup 对象)和微件(View 对象)层次结构构建。

  1. 布局是一种不可见的容器,用于控制其子视图在屏幕上的位置。
  2. 微件是界面组件 如 按钮和文本框
  3. Base Line 是微件之间的关系连接线 base line是两个或更多视图之间的双向约束条件,它可以采用一致的方式放置被链接的视图
  4. Autoconnect 作用是 用来 根据拖动位置 自动添加约束规则

其中 所有布局组件都在 xml 对应文档中 定义.

属性名词 wrap_content 尽可能弹性缩小 适应内容 match_content 尽可能弹性扩展 适应内容 wrap_parrent 尽可能弹性扩展 适应父微件 match_parrent 尽可能弹性扩展 适应父微件

布局中的工具模块

  1. palette 用来添加 微件
  2. Component Tree 用来显示 布局 和 微件 相互关系
  3. Attributes 用来显示微件属性
  4. 界面操作工具栏(头部顶栏):

    1. select design sufrece
    2. API
    3. device
    4. theme
    5. language 界面设计指定
    6. view options
    7. margin
    8. auto connect
    9. Guidlines
  5. 自动布局指定

    1. chain 链条 Horizontal Chain 水平链条 Vertical Chain 垂直链条
    2. center 居中
      1. 可以 水平居中 垂直居中
      2. 也可 在父模块中 水平居中 垂直居中
    3. organize 膨胀
      1. 水平膨胀
      2. 垂直膨胀
    4. Align 位置
      1. 水平 靠左右,居中
      2. 垂直 靠上下,居中

使用 Android Studio Layout Editor 创建一个布局

添加一个文本框和一个按钮

  1. 了解界面配置

    1. res -> layout -> activity_main.xml
    2. 选择 design 可以直接拖动 设计,text 为源代码
    3. 点击 Select Design Surface 并选择 Blueprint。
    4. 点击工具栏中的 Show 并确保选中 Show Constraint (定位辅助线)
    5. 确保 Autoconnect 关闭 > 工具栏中的提示应为 Turn On Autoconnect(磁铁标志 ,使处于关闭状态)
    6. 点击工具栏中的 Default Margins, 然后选择 16(外边距,之后仍可以调整每个视图的外边距)。
    7. 点击工具栏中的 Device in Editor, 然后选择 Pixel XL(设备选择)
    8. 左下方的 Component Tree 窗口显示布局的 视图层次结构 > 在该选项的初始化中,根视图是 ConstraintLayout,仅包含一个 TextView 对象
    9. ConstraintLayout 是一种布局,它根据同级视图和父布局的约束条件为每个视图定义位置 > 与 多数 style 设计类似,一层嵌套一层

    可创建具有扁平视图层次结构的简单布局和复杂布局

    可以避免对嵌套布局(布局内的布局)的需求,嵌套布局会增加绘制界面所需的时间。

  2. 添加一个文本框 > 文本框被限制在父布局的顶部和左侧

    1. 移除布局中已有的内容
    2. 点击 Component Tree 窗口中的 TextView,然后按 Delete
    3. 在左侧的 Palette 窗口中,点击左侧窗格中的 Text,然后将 Plain Text 拖放到设计编辑器中靠近布局顶部的位置。 > 这是一个接受纯文本输入的 EditText 微件。
    4. 在设计编辑器中点击视图 > 可以在每个角上看到大小调整手柄(正方形),并在每个边上看到约束锚点(圆形) > 为了能更好地控制,可需要使用工具栏中的按钮放大编辑器。
    5. 点击并按住顶边上的锚点,将其向上拖动,直至锚点吸附到布局的顶部(虚线),然后释放 这是一个约束条件 - 它指定视图应位于距离布局顶部 16dp 的位置(之前默认设置外边距为 16dp
  3. 添加一个按钮 > 按钮被限制在文本框及其基线的右侧

    1. Palette 窗口中,然后将 Button 拖放到设计编辑器中靠近右侧的位置
    2. 从按钮左侧创建一个约束条件,将其限制在文本框的右侧。 > 要在水平对齐中约束视图,需要在文本基线之间创建一个约束条件
    3. 点击关系按钮微键,然后点击 Edit Baseline (关系按钮,拖动连接基线,指定微件之间的关系连接) 基线锚点显示在按钮内部 点击并按住此锚点,然后将其拖动到 文本框(另一个微件) 中显示的基线锚点 > 设计微件之间位置关系

    注: 可以使用 顶部或底部 布局边缘创建水平对齐 但这种对齐方式不太好,不同屏幕兼容性 容易发生错位

  4. 更改界面字符串 > 文本输入使用Name预填充,按钮标记为Button

    1. 打开 Project 窗口,打开 app > res > values > strings.xml > 这是一个字符串资源文件,这个文件中指定所有界面字符串 > 这样可以在一个位置管理所有界面字符串,让字符串的查找、更新和本地化变得更加容易,也方便不同语言下的切换 > 当然也可以在activity_main.xml界面指定,但不是一个规范的使用,不利于后期维护 > 与布局或应用代码中的硬编码字符串相比更加统一

    2. 点击编辑器窗口顶部的 Open editor,进入 Translations Editor > 为添加和编辑默认字符串提供了一个简单的界面 > 并且有助于保持所有已翻译字符串井然有序 > 可以更好的 进行 xml 文件编辑

    3. string xml文件操作 点击 Add Key(或+), 以文本框提示文本的形式创建新字符串 设定 key = edit_message value = Enter a message Resource Folder 不变,默认指定到res xml文件夹

      再添加一个名称为button_send并且值为Send的键

      添加新 的 xml 行后,找不到对应 key 的微件 ,显示为红色

    4. 为每个微件设置这些字符串 > 进入 activity_main.xml Design 模式下 (也可在 Text 模式下操作) 指定布局文件

      然后按照以下步骤 在文本框添加 底部提示字符串: 找到 text 属性(当前设为Name)并删除值。 找到 hint 属性,然后点击文本框右侧的 Pick a Resource
      在 出现的对话框中,双击列表中的 edit_message

      这一步的作用是 将文本框底部提示hint 链接到 string 文档中的 edit_message
      > 结果显示 为 android:hint="@string/edit_message"

      布局中的按钮同理,找到 text 属性,点击 Pick a Resource, 然后选择 button_send 也可以 在 xml 对应微件中 写入

      android:text=@string/send_button 格式为 android:微件属性 = @xml文档/xml中key

    5. 让文本框大小灵活自主调整 > 要创建一个可以适应不同屏幕尺寸的布局

      让文本框拉伸以填充剩余的所有水平空间 扣除按钮和所有外边距后的空间

      点击工具栏中的 Show 并选择 Blueprint

      1. 选中两个视图(点击一个,按住 Shift 并点击另一个)
      2. 右键点击任何一个视图并选择 Chain > Create Horizontal Chain > base line是两个或更多视图之间的双向约束条件,它可以采用一致的方式放置被链接的视图
      3. 选择 按钮 的 Attributes 窗口。
      4. 使用 Attributes 窗口顶部的视图检查器将 按钮 右外边距设置为 16

      5. 点击文本框以查看其属性。 点击两次宽度指示器,确保将其设置为 Match Constraints > 本质是 设定 layout_width 排版宽度

        Match constraints表示宽度将 延长 以 符合水平约束条件 和外边距的定义 > 设置以后显示 边框为 弹簧样式

      文本框将拉伸以填充水平空间(扣除按钮和所有外边距后的空间)

      自动拉伸填充,修改边距

属性以不同顺序,不影响显示


运行应用 点击工具栏中的 Apply Changes 使用新布局更新应用 或者点击 Run, 安装并运行应用。

按钮仍然没有响应。要在点按按钮时启动另一个 Activity