【我的Android之路】常用布局总览

338 阅读4分钟
如需转载,请标明地址

Android 常用布局控件复习整理
如有错误,欢迎指出。


这里只是对各个常用布局进行一个大概的预览,常用属性的查阅。详细使用会后续补充。

布局可定义应用中的界面结构(例如 Activity 的界面结构)。布局中的所有元素均使用 View 和 ViewGroup 对象的层次结构进行构建。View 通常绘制用户可查看并进行交互的内容。然而,ViewGroup 是不可见容器,用于定义 View 和其他 ViewGroup 对象的布局结构,如图所示。


Google 虽然给了我们开发者很多的布局方式。
但是,我们在平时开发中经常使用的也就那几种。分别是:

  • LinearLayout(线性布局)
  • RelativeLayout(相对布局)
  • FrameLayout(帧布局)
  • ConstraintLayout(约束布局)

这里把在实际中经常使用的一些属性和布局方式进行罗列。还有很多的属性可以参考官方文档

布局


LinearLayout(线性布局)

  • orientation 布局中组件的排列方式,有horizontal(水平),vertical(竖直,默认),两种方式
    android:orientation="vertical"
    android:orientation="horizontal"
  • gravity 控制组件所包含的子元素的对其方式
    android:gravity="start"
    android:gravity="top"
    android:gravity="center"
    android:gravity="end|bottom"
  • layout_gravity 控制该组件在父容器里的对齐方式
    android:layout_gravity="start"
    android:layout_gravity="top"
    android:layout_gravity="center"
    android:layout_gravity="end|bottom"
  • layout_weight 在子控件中使用该属性,根据线性布局的排列方向和布局大小等比例分布子控件
// 小技巧:如果想让多个子控件中的某一个放大填满时,只将其设置layout_weight即可
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

RelativeLayout(相对布局)

  • layout_centerHorizontal 相对于父元素水平居中
    android:layout_centerHorizontal="true"
  • layout_centerVertical 相对于父元素垂直居中
    android:layout_centerVertical="true"
  • layout_centerInparent 相对于父元素完全居中
    android:layout_centerInparent="true"
  • layout_alignParentBottom 贴紧父元素的下边缘
    android:layout_alignParentBottom="true"
  • layout_alignParentStart 贴紧父元素的左边缘
    android:layout_alignParentStart="true"
  • layout_alignParentEnd 贴紧父元素的右边缘
    android:layout_alignParentEnd="true"
  • layout_alignParentTop 贴紧父元素的上边缘
    android:layout_alignParentTop="true"
  • layout_below 在某元素的下方
    android:layout_below="@+id/"
  • layout_above 在某元素的的上方
    android:layout_above="@+id/"
  • layout_toStartOf 在某元素的左边
    android:layout_toStartOf="@+id/"
  • layout_toEndOf 在某元素的右边
    android:layout_toEndOf="@+id/"
  • layout_alignTop 本元素的上边缘和某元素的上边缘对齐
    android:layout_alignTop="@+id/"
  • layout_alignStart 本元素的左边缘和某元素的左边缘对齐
    android:layout_alignStart="@+id/"
  • layout_alignBottom 本元素的下边缘和某元素的下边缘对齐
    android:layout_alignBottom="@+id/"
  • layout_alignEnd 本元素的右边缘和某元素的右边缘对齐
    android:layout_alignEnd="@+id/"
  • android:gravity 同上
  • android:layout_gravity 同上

FrameLayout(帧布局)

我们一般不直接在FrameLayout上布局子控件。而是将其作为代码生成的控件的容器。通过代码将子控件加入。

ConstraintLayout(约束布局)

ConstraintLayout 在同一层级的View的绘制上有所性能的提升
但是它的出现能够有效的减少布局深度。对于多层嵌套的布局来说,大大提升了性能。

  • layout_constraintLeft_toLeftOf 本元素的左边缘和某元素的左边缘约束
    app:layout_constraintLeft_toLeftOf="@+id/"
    app:layout_constraintLeft_toLeftOf="parent"
  • layout_constraintLeft_toRightOf 本元素的左边缘和某元素的右边缘约束
    app:layout_constraintLeft_toRightOf="@+id/"
    app:layout_constraintLeft_toRightOf="parent"
  • layout_constraintRight_toLeftOf 本元素右边缘和某元素的左边缘约束
    app:layout_constraintRight_toLeftOf="@+id/"
    app:layout_constraintRight_toLeftOf="parent"
  • layout_constraintRight_toRightOf 本元素的右边缘和某元素的右边缘约束
    app:layout_constraintRight_toRightOf="@+id/"
    app:layout_constraintRight_toRightOf="parent"
  • layout_constraintTop_toTopOf 本元素的上边缘和某元素的上边缘约束
    app:layout_constraintTop_toTopOf="@+id/"
    app:layout_constraintTop_toTopOf="parent"
  • layout_constraintTop_toBottomOf 本元素的上边缘和某元素的下边缘约束
    app:layout_constraintTop_toBottomOf="@+id/"
    app:layout_constraintTop_toBottomOf="parent"
  • layout_constraintBottom_toTopOf 本元素的下边缘和某元素的上边缘约束
    app:layout_constraintBottom_toTopOf="@+id/"
    app:layout_constraintBottom_toTopOf="parent"
  • layout_constraintBottom_toBottomOf 本元素的下边缘和某元素的下边缘约束
    app:layout_constraintBottom_toBottomOf="@+id/"
    app:layout_constraintBottom_toBottomOf="parent"
  • layout_constraintBaseline_toBaselineOf 本元素的文本基线和某元素的文本基线约束
    app:layout_constraintBaseline_toBaselineOf="@+id/"
  • layout_constraintStart_toEndOf 本元素的左边缘和某元素的右边缘约束
    app:layout_constraintStart_toEndOf="@+id/"
    app:layout_constraintStart_toEndOf="parent"
  • layout_constraintStart_toStartOf 本元素的左边缘和某元素的左边缘约束
    app:layout_constraintStart_toStartOf="@+id/"
    app:layout_constraintStart_toStartOf="parent"
  • layout_constraintEnd_toStartOf 本元素的右边缘和某元素的左边缘约束
    app:layout_constraintEnd_toStartOf="@+id/"
    app:layout_constraintEnd_toStartOf="parent"
  • layout_constraintEnd_toEndOf 本元素的右边缘和某元素的右边缘约束
    app:layout_constraintEnd_toEndOf="@+id/"
    app:layout_constraintEnd_toEndOf="parent"
  • layout_constraintCircle 本元素和某元素绑定角度约束
    app:layout_constraintCircle="@+id/"
  • layout_constraintCircleAngle 本元素和某元素的夹角约束
    app:layout_constraintCircleAngle="90"
  • layout_constraintCircleRadius 本元素和某元素的夹角距离约束
    app:layout_constraintCircleAngle="90dp"
  • layout_constraintHorizontal_bias 本元素和某元素水平偏移约束
    app:layout_constraintHorizontal_bias="0.3"
  • layout_constraintVertical_bias 本元素和某元素垂直偏移约束
    app:layout_constraintVertical_bias="0.3"
  • layout_constraintHorizontal_weight 本元素和某元素水平权重约束
    app:layout_constraintHorizontal_weight="1"
ConstraintLayout 还有相当多的的控件约束方式,这里就不一一列举了,感兴趣的可以参考官方文档