安卓基础回顾2:Android的布局

Android布局

概述:本篇为大家讲解安卓 LinearLayout、RelativeLayout、自定义ViewGroup、FrameLayout、TableLayout、AbsoluteLayout六种布局进行详细的讲解。

一.线性布局(LinerLayout)

1.线性布局,两种排法:

从左到右 android:orientation=”horizontal”

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >
<Button
    android:layout_width="200px"
    android:layout_height="100px"
    android:text="按钮一"
    />
    <Button
        android:layout_width="200px"
        android:layout_height="100px"
        android:text="按钮二"
        />
    <Button
        android:layout_width="200px"
        android:layout_height="100px"
        android:text="按钮三"
        />
</LinearLayout>

这里写图片描述

从左到右 android:orientation=”vertical”
将LinearLayout 的 orientation属性的属性值改成”vertical”

这里写图片描述

2.线性布局中控件的权重(layout_weight)

权重是线性布局中非常重要的属性,这个属性允许我们按比例方式指定控件大小,对于不同手机的适配是非常重要的作用,也有利于UI界面的美观

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    >
    <EditText
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="输入用户名:"
    />
<Button
    android:layout_width="0px"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="提交"
    />

    <Button
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="取消"
        />
</LinearLayout>

图一
这里写图片描述

将输入框的权重设置为4 android:layout_weight=”4”,即可得到下图二
这里写图片描述

注意:

  • 当是水平分布时,可以注意到button,与EditText的宽度为0,因为当设置了权重后控件的的宽度由weight的多少决定,此处宽度设置为0为规范做法。当为竖直(vertical)时则高度设置为0;

  • 权重是线性布局特有的,不能在相对布局中使用。


二.相对布局(最常用的布局)

相对布局是最常用的布局,和LinearLayout的排列规则不同RelativeLayout的布局更加随意,可以通过定位的方式把控件出现在布局的任意位置

1.RelativeLayout的属性

参考其他控件进行布局,默认为父控件。
有三种类型的属性:

  • 属性值是true或false
    android:layout_centerHrizontal 水平居中
    android:layout_centerVertical 垂直居中
    android:layout_centerInparent 相对于父元素完全居中。
    android:layout_alignParentBottom 位于父元素的下边缘
    android:layout_alignParentTop 位于父元素的上边缘
    android:layout_alignParentLeft 位于父元素的左边缘
    android:layout_alignParentRight 位于父元素的右边缘

  • 属性值是”@id/*“
    android:layout_below 在某元素的下方
    android:layout_above 在某元素的上方
    andorid:layout_toRightOf 在某元素的右方
    android:layout_toLeftOf 在某元素的左方
    android:layout_alignBottom 和某元素下方对齐
    android:layout_alignTop 和某元素上方对齐
    android:layout_alignRight 和某元素右方对齐
    android:layout_alignLeft 和某元素左方对齐

  • 属性值是数值
    android:layout_marginLeft 离某元素左边缘的距离
    android:layout_marginRight 离某元素右边缘的距离
    android:layout_marginTop 离某元素上边缘的距离
    android:layout_marginBottom 离某元素下边缘的距离

示例代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1号盒子"

        />


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="2号盒子" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="3号盒子"
        android:id="@+id/txt_center"
        android:layout_centerInParent="true"
        />

    <TextView
        android:layout_alignParentBottom="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="4号盒子" />

    <TextView
        android:layout_below="@id/txt_center"
        android:background="#d0d9ff"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="5号盒子" />

    <TextView
        android:layout_alignBottom="@+id/txt_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="6号盒子" />

    <TextView
        android:layout_marginLeft="150dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="7号盒子" />

    <TextView
        android:layout_centerVertical="true"
        android:layout_marginLeft="100dp"
        android:layout_toRightOf="@id/txt_center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="8号盒子"/>
</RelativeLayout>

这里写图片描述


三.帧布局

没有方便的定位方式,所有控件默认摆放在布局左上角,后面的控件会覆盖前面的控件

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="100dp"
        android:textColor="#777"
        android:text="第一层"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="80dp"
        android:textColor="#000"
        android:text="第二层"/>

</FrameLayout>

这里写图片描述

注意:第二层是在第一层之后添加的所以会压在第一层上

我们亦可以设置layout_gravity=”right”;属性设置控件的对齐方式,与线性布局类似。

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="40dp"
        android:textColor="#000"
        android:layout_gravity="left"
        android:text="第一层"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二层"
        android:layout_gravity="right"
        android:textColor="#777"
        android:textSize="100dp" />

</FrameLayout>

这里写图片描述


四.百分比布局

使用较少不做详细的描述


五.总结

前三种布局基本满足绝大多数公司需求,但注意只有线性布局支持权重,在多数情况下需要几种不同的布局嵌套使用,如:外层使用线性布局,内层嵌套多个相对布局,完成界面。

猜你喜欢

转载自blog.csdn.net/qq_38845493/article/details/80566848
今日推荐