Android常见界面布局

View视图

所有的UI元素都是通过View与ViewGroup构建的，对于一个Android应用的用户界面来说，ViewGroup作为容器盛装界面中的控件，它可以包含普通的View控件，也可以包含ViewGroup。
image
Android采用View和ViewGroup类来形成视图之间的嵌套关系（，ViewGroup是View的子类，ViewGroup视图中即可以有View视图，也可以有ViewGroup视图，这样就可以形成视图的嵌套。

如果一个View视图被直接添加（嵌套）在一个ViewGroup视图中，就称后者是前者的父(parent)视图，前者是后者的子(child)视图。

注：
1) 下面标记必须放在最外面的视图
xmlns:android="http://schemas.android.com/apk/res/android"
2)一个标记对应一个视图
视图相关的 XML文件中使用标记对应View视图，即使用不同的标记对应View的不同子类，用标记中的属性对应类的成员。

和视图相关的XML文件的根标记必须对应一个View或ViewGroup视图。

例如，下列XML文件中<LinearLayout>标记对应ViewGroup的LinearLayout子类、<Button>标记对应View的Button子类。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" >
    <Button
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="确定"
    />
</LinearLayout>

界面布局编写方式

  • 在XML文件中编写布局：推荐
    有效的将界面中布局的代码和Java代码隔离，使程序的结构更加清晰。

  • 在Java代码中编写布局
    在Android中所有布局和控件的对象都可以通过new关键字创建出来，将创建的View控件添加到ViewGroup布局中，从而实现View控件在布局界面中显示。

度量值

属性中的某些值经常使用px,dp,sp,in,mm等度量单位，解释如下：

  • px：全称是pixel，表示屏幕的一个像素。
  • dp：全称是density-independent pixels，dp是设置视图大小时建议使用的单位。
  • sp：全称是scaled pixels，sp是设置字体大小时建议使用的单位。
  • mm：全称是millimeter，表示毫米。
  • in：全称是inch，表示英寸。

View视图的常用属性

1）android:layout_width

  • 作用：设置视图在父视图中的宽度。
  • 取值：“match_parent”、“wrap_content”或具体数值。如：200dp。
    当取值是"match_parent"时，表示当前视图的宽度将填满父视图的剩余的宽度，
    当取值是"wrap_content"时,表示自适应大小：大小恰好容视图的内容。

2） android:layout_height

  • 作用：设置视图在父视图中的高度。
  • 取值：“match_parent”、“wrap_content”或具体数值,如：200dp

3）android:background

  • 作用：设置视图的背景颜色或背景图像。
  • 取值：颜色值（RGB颜色模式）或一幅图像。
    颜色值是用6位数字组成的十六进制数,并需要将十六进制数用#做前缀。如下：android:background ="#87CEEB"
    android:background="@drawable/dog" (dog.jpg是资源图像中的一幅图像 )

4）android:layout_gravity （android:gravity 对象内部的对齐方式 ）

  • 作用：设置视图在父视图中的对齐方式。
  • 取值:"top" "bottom" "left" "right" "center"，以及这些值的组合值 。
    例如"left|center"、"left|bottom"等。

5）android:padding （margin:外边距）

  • 作用：设置视图的内边距。
  • 注：android:padding同时设置视图4个边的边距。
    android:paddingBottom，android:paddingLeft，android:paddingRight，android:paddingTop等分别设置底边、左边、右边和顶边的边距。
  • 取值：度量值。例如 android:padding ="8dp"

6）android:id

  • 作用：确定视图的ID标识。在某些时候，Java代码部分需要根据视图的ID寻找XML文件中给出的视图，以便做进一步的编码。
  • 取值：一个用字符串表示的整数，字符串由用户来指定，所代表的整数由系统的R类负责指定。为视图指定ID的格式是 android:id = "@+id/ID值"
<Button
     android:id="@+id/save_button" 
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="保存"
/>
  • 使用： 在Java代码中，可以使用findViewById(int resid)方法找到XML文件中给出的Button视图。
    例如：Button saveButton = (Button)findViewById(R.id.save_button);

7）android:alpha

  • 一个视图可以设置android:alpha属性的值（取值0~1的浮点数） 。
    例如： android:alpha="0.6"
  • 注： 当android:alpha属性值=0，视图完全透明; =1，视图完全不透明

视图的布局方式

image

  • TabHost 底部（或顶部）选项卡
  • GridLayout 类似表格

布局的通用属性

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

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

LinearLayout线性布局

线性布局（LinearLayout）主要以水平或垂直方式来显示界面中的控件。

  • 当控件水平排列时，显示顺序依次为从左到右android: orientation ="horizontal">

  • 当控件垂直排列时，显示顺序依次为从上到下android: orientation ="vertical">

image

layout_weight权重

形式： android: layout_weight ="数字"

作用： 如果设置了权值就是按照比例共享父布局剩余的空间

注：

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

  • 当控件使用权重属性时，布局宽度属性值通常设置为0dp。

演示代码

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

image

滚动条 ScrollView或HorizontalScrollView

滚动条只滚动他的直接子视图，且直接子视图只能有一个。

  • ScrollView视图提供垂直滚动条，用户可用滚动方式和其中的子视图进行交互。
    如果列布局的LinearLayout视图中有较多视图时，一个更好的办法是把它放到ScrollView视图中。

  • HorizontalScrollView视图提供水平滚动条，用户可用水平方式和其中的子视图进行交互。
    如果行布局的LinearLayout视图中有较多视图时，一个更好的办法是把它放到HorizontalScrollView视图中。

RelativeLayout相对布局

相对布局（RelativeLayout）是通过相对定位的方式指定子控件位置，即以其它控件或父容器为参照物，摆放控件位置。

定义格式

     <RelativeLayout   xmlns:android="http://schemas.android.com/apk/res/android"
	属性 = "属性值"
	......>
     </RelativeLayout>

相对父视图

RelativeLayout中的子视图可以通过设置相对属性值，设置自己在父视图区域中的相对位置。

  • android:layout_alignParentBottom：取值是"true"或"false"，当取值是"true"时，当前子视图的底边与父视图的底边对齐。

  • android:layout_alignParentLeft：取值是"true"或"false"，当取值是"true"时，当前子视图的左边与父视图的左边对齐。

  • android:layout_alignParentRight：取值是"true"或"false"，当取值是"true"时，当前子视图的右边与父视图的右边对齐。

  • android:layout_alignParentTop：取值是"true"或"false"，当取值是"true"时，当前子视图的上边与父视图的上边对齐。

  • android:layout_centerHorizontal：取值是"true"或"false"，当取值是"true"时，当前子视图的中心与父视图的水平中心相同。

  • android:layout_centerVertical：取值是"true"或"false"，当取值是"true"时，当前子视图的中心与父视图的垂直中心相同。

  • android:layout_centerInParent：取值是“true”或“false”，当取值是“true”时，当前子视图的中心与父视图的水平中心和垂直中心相同，即和父视图的中心相同。

相对其他子视图

RelativeLayout中的子视图可以通过设置相对属性值，设置自己在父视图区域中的相对其他子视图的位置。

  • android:layout_above：取值是某个子视图的id，当前子视图的下边刚好在视图id的上方（下边与子视图的id的上边对齐）。
    例如，取值"@id/bird"，当前子视图在id是"bird"的子视图的上方。

  • android:layout_below：当前子视图在视图id的下方

  • android:layout_alignLeft：当前子视图的左边与视图id的左边对齐

  • android:layout_alignRight：当前子视图的右边与视图id的右边对齐

  • android:layout_alignTop：当前子视图的上边与视图id的上边对齐

  • android:layout_alignBottom：当前子视图的下边与视图id的下边对齐

  • android:layout_toLeftOf：当前子视图在视图id的左边

  • android:layout_toRightOf：当前子视图在视图id的右边

子视图的重叠

如果

  • 子视图b在子a的下方：android:layout_below="@id/a"
  • 子视图c在b的下方：android:layout_below="@id/b"
  • 子视图d在a的下方：android:layout_below="@id/a"

那么 子视图d就会和子视图b，甚至c发生重叠，如图4.2所示。
image

当视图发生重叠是，后面的视图会遮挡先前的视图的某些部分区域或全部区域，因此可以考虑设置视图的透明度，以便消除遮挡带来的不利影响。
一个视图可以设置android:alpha属性的值（取值0~1的浮点数），例如：android:alpha="0.6"当android:alpha属性值是0视图完全透明，是1完全不透明。

避免出现参照错误

注:当一个子视图还没有被添加到父视图之前，其他视图不能用它作参照物，否则会导致程序终止执行。例如，下列子视图button1错误地参照了还没有添加到父视图的button2：

<Button
        android:id="@+id/button1"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft= "true"
        android:layout_toLeftOf = "@id/button2"   <!--  这是一个错误参照 -->
        android:text="door" />
<Button
        android:id="@+id/button2"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf = "@id/button1"
        android:text="good" />

TableLayout表格布局

FrameLayout

帧布局（FrameLayout）用于在屏幕上创建一块空白区域，添加到该区域中的每个子控件占一帧，这些帧会一个一个叠加在一起，占用同一个二维空间，后加入的控件会叠加在上一个控件上层。

  • 如果FrameLayout视图中的子视图的可见性都是"visible"（android:visibility="visible"）
    而且没有采用特殊的对齐方式，那么最后一个添加的视图就会遮挡先前的子视图。

  • 所有控件都默认显示在屏幕左上角。

说明：setVisibility (int visibility)方法的参数取View类中的三个静态常量之一：VISIBLE，INVISIBLE或GONE

常用场景例子：
使用FrameLayout视图，它中有四个子视图，这四个TextView子视图的背景图片分别是春、夏、秋、冬的图像。我们在FrameLayout视图的上面又添加了四个按钮视图，点击相应的按钮，FrameLayout视图显示它中的相应的子视图
image

ConstraintLayout约束布局

ConstraintLayout是Android Studio2.2新添加的布局。
它适合使用可视化的方式编写界面布局——当然，可视化操作的背后仍然是使用XML代码实现的，只不过这些代码是Android Studio根据我们的操作自动生成的，不是由SDK支持。

三个特点：

  • 相对定位
  • 居中定位和倾向
  • Chain

（一）、相对定位
相对定位是在ConstraintLayout中创建布局的基本构建方法之一。相对定位即一个控件相对于另一个控件进行定位。

ConstraintLayout布局中的控件可以在横向和纵向上以添加约束关系的方式进行相对定位，其中，

  • 横向边包括Left、Start、Right、End，
  • 纵向边包括Top、Bottom、Baseline（文本底部的基准线）。
    image

通过对于上面单一属性的组合，可以得到如下属性：

属性名称 功能描述
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

在约束是同向相反的情况下，默认控件是居中的，但是也像拔河一样，两个约束的力大小不等时，就会产生倾向。

属性名称 功能描述
layout_constraintHorizontal_bias 横向的倾向
layout_constraintVertical_bias 纵向的倾向

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

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

image

Chain的样式
image

相关代码 app:layout_constraintHorizontal_chainStyle=""

实例：
顶部居中
image

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:text="@string/loginTitle"
        android:textSize="@dimen/mainTitleFontSize"
        />
posted @ 2023-03-08 16:22  kingwzun  阅读(239)  评论(0)  编辑  收藏  举报