Android View介绍和总结

View 视图

所有的UI元素都是通过View于ViewGroup构建的,对于一个Android应用的用户界面来说,ViewGroup作为容器盛装界面中的控件,它可以包含普通的View控件,也可以包含ViewGroup。

界面布局编写方式

  • 在XML文件中编写布局:推荐此种方式布局。
    • 有效的将界面中布局的代码和Java代码隔离,使程序的结构更加清晰。
  • 在Java代码中编写布局
    • 在Android中所有布局和控件的对象都可以通过new关键字创建出来,将创建的View控件添加到ViewGroup布局中,从而实现View控件在布局界面显示。

常见界面布局

  • 线性布局
    • 特点:以水平或垂直方向排列。
  • 相对布局
    • 特点:通过相对定位排列
  • 帧布局
    • 特点:开辟空白区域,帧里的控件(层)叠加。
  • 表格布局
    • 特点:表格形式排列。
  • 约束布局
    • 特点:可视化的方式编写布局。

布局的通用属性

Android系统提供的五种常用布局直接或者间接继承自ViewGroup,因此它们也支持在ViewGroup中定义的属性,这些属性可以看作是布局的通用属性。

属性名称属性名称
android:id设置布局的标识
android:layout_width设置布局的宽度
android: layout_height设置布局的宽度
android:background设置布局的背景
android:layout_margin设置当前布局与屏幕边界或与周围控件的距离
android:padding设置当前布局与该布局中控件的距离

LinearLayout线性布局

线性布局(LinearLayout)主要以水平或垂直方式来显示界面中的控件。当控件水平排列时,显示顺序依次为从左到右,当控件垂直排列时,显示顺序依次为从上到下。

<LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation ="vertical">
   <!-- <android:orientation  此属性控制控件排列方向,包含两个属性值:vertical(垂直)、horizontal(水平)-->
    <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            <!-- android:layout_weight 权重 -->
            android:text="按钮1"/>
</LinearLayout>   

注意事项

LinearLayout布局中的android:layout_width属性值不可设为wrap_content。 这是因为LinearLayout的优先级比Button高,如果设置为wrap_content,则Button控件的android:layout_weight属性会失去作用。

<Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"/>

注意:当控件使用权重属性时,布局宽度属性值通常设置为0dp。

RelativeLayout相对布局

  • 相对布局(RelativeLayout)是通过相对定位的方式指定子控件位置,即以其它控件或父容器为参照物,摆放控件位置。
  • 定义格式
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    属性 = "属性值">
</RelativeLayout>

控件位置属性

控件属性功能描述
android:layout_centerInParent设置当前控件位于父布局的中央位置
android:layout_centerVertical设置当前控件位于父布局的垂直居中位置
android:layout_centerHorizontal设置当前控件位于父控件的水平居中位置
android:layout_above设置当前控件位于某控件上方
android:layout_below设置当前控件位于某控件下方
android:layout_toLeftOf设置当前控件位于某控件左侧
android:layout_toRightOf设置当前控件位于某控件右侧
android:layout_alignParentTop设置当前控件是否与父控件顶端对齐
android:layout_alignParentLeft设置当前控件是否与父控件左对齐
android:layout_alignParentRight设置当前控件是否与父控件右对齐
android:layout_alignParentBottom设置当前控件是否与父控件底端对齐
android:layout_alignTop设置当前控件的上边界与某控件的上边界对齐
android:layout_alignBottom设置当前控件的下边界与某控件的下边界对齐
android:layout_alignLeft设置当前控件的左边界与某控件的左边界对齐
android:layout_alignRight设置当前控件的右边界与某控件的右边界对齐

FrameLayout帧布局

  • 帧布局(FrameLayout)用于在屏幕上创建一块空白区域,添加到该区域中的每个子控件占一帧,这些帧会一个一个叠加在一起,后加入的控件会叠加在上一个控件上层。
  • 所有控件都默认显示在屏幕左上角。
  • 定义格式
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    属性 ="属性值">
</FrameLayout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    <!-- 设置帧布局容器的前景图像(始终在所有子控件之上) -->
    android:foreground="@mipmap/ic_launcher"
    <!-- 设置前景图像显示位置 -->
    android:foregroundGravity="left" >
</FrameLayout>

TableLayout表格布局

  • 采用行、列的形式来管理控件,它不需要明确声明包含多少行、多少列,而是通过在TableLayout布局中添加TableRow布局来控制表格的行数,通过在TableRow布局中添加控件来控制表格的列数。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    <!-- 设置帧布局容器的前景图像(始终在所有子控件之上) -->
    android:foreground="@mipmap/ic_launcher"
    <!-- 设置前景图像显示位置 -->
    android:foregroundGravity="left" >
</FrameLayout>

表格布局属性

布局属性功能描述
android:stretchColumns设置该列被拉伸
android:shrinkColumns设置该列被收缩
android:collapseColumns设置该列被隐藏

表格布局控件属性

控件属性功能描述
android:layout_column设置该单元显示位置
android:layout_span设置该单元格占据几行,默认为1行
    <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       <!-- 第3列可被拉伸 -->
        android:stretchColumns="2">
        <TableRow>
            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                <!-- 设置控件所在列 -->
                android:layout_column="0"
                android:text="按钮1" />
        </TableRow>
    </TableLayout>

ConstraintLayout约束布局

  • ConstraintLayout是Android Studio2.2新添加的布局。
  • 它适合使用可视化的方式编写界面布局——当然,可视化操作的背后仍然是使用XML代码实现的,只不过这些代码是Android Studio根据我们的操作自动生成的。
  • 相对定位
  • 居中定位和倾向
  • Chain

相对定位

  • 相对定位是在ConstraintLayout中创建布局的基本构建方法之一。相对定位即一个控件相对于另一个控件进行定位。
  • ConstraintLayout布局中的控件可以在横向和纵向上以添加约束关系的方式进行相对定位,其中,横向边包括Left、Start、Right、End,纵向边包括Top、Bottom、Baseline(文本底部的基准线)。
image-20200317173856912
image-20200317173901142

相对定位关系的属性

属性名称功能描述
layout_constraintLeft_toLeftOf控件的左边与另外一个控件的左边对齐
layout_constraintLeft_toRightOf控件的左边与另外一个控件的右边对齐
layout_constraintRight_toLeftOf控件的右边与另外一个控件的左边对齐
layout_constraintRight_toRightOf控件的右边与另外一个控件的右边对齐
layout_constraintTop_toTopOf控件的上边与另外一个控件的上边对齐
layout_constraintTop_toBottomOf控件的上边与另外一个控件的底部对齐
layout_constraintBaseline_toBaselineOf控件间的文本内容基准线对齐
layout_constraintStart_toEndOf控件的起始边与另外一个控件的尾部对齐
layout_constraintStart_toStartOf控件的起始边与另外一个控件的起始边对齐
layout_constraintEnd_toStartOf控件的尾部与另外一个控件的起始边对齐
layout_constraintEnd_toEndOf控件的尾部与另外一个控件的尾部对齐

居中定位和倾向

  • 在ConstraintLayout布局中,控件可以通过添加约束的方式确定该控件在父布局(ConstraintLayout)中的相对位置。
  • 当相同方向上(横向或纵向),控件两边同时向ConstraintLayout添加约束,则控件在添加约束的方向上居中显示。
  • 父布局中横向居中 
image-20200317174128051
  • 在约束是同向相反的情况下,默认控件是居中的,但是也像拔河一样,两个约束的力大小不等时,就会产生倾向。
属性名称功能描述
layout_constraintHorizontal_bias横向的倾向
layout_constraintVertical_bias纵向的倾向

注意:如果ConstraintLayout布局中的控件在居中方向(横向或者纵向)上和父布局(ConstraintLayout)的尺寸一致,此时该方向的居中约束和倾向没有意义。

Chain

  • Chain(链)是一种特殊的约束,他使我们能够对一组水平或竖直方向互相关联的控件进行统一管理。一组控件通过一个双向的约束关系链接起来,就能形成一个Chain。

Chain的样式

本章小结

本章主要针对Android界面布局的相关知识进行讲解。通过本章的学习,我们希望读者能够掌握View和ViewGroup的功能、掌握不同界面布局以及布局中控件属性的使用,因为在Android应用中,所有功能大部分都体现在界面上,界面的美观会给用户一个友好的体验。