Android学习——XML布局

首先我们来看下布局文件：activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
//
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</LinearLayout>

22328602.jpg

一、线性布局LinearLayout

1、LinearLayout常用属性：
android:id ：定义布局id，即标识符，可以通过id来找到该布局或者控件。
android :layout_width ：布局宽度，有match_parent ,wrap_content，fill_paren。
android:layout_height ：布局高度，有match_parent,wrap_content，fill_paren。
android:background ：设置布局的背景，可以用颜色，也可以使用图片，颜色常以六位的十六进制表示。
android:layout_margin ：外边距，布局或控件距离外部元素的边距。
android:layout_padding ：内边距，布局或控件距离内部元素的边距。
android:orientation ：布局中组件的排列方式,有horizontall(水平),vertical(坚直,默认）两种方式。
android:layout_weight：权重，该属性是用来等比例地划分区域。
android:gravity：控制组件所包含的子元素的对齐方式，可多个組合,如(left l buttom）

2、使用例子：

1710746848163.jpg

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="第一个文本框"
            android:background="#ffff00"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:gravity="center"
            android:text="第二个文本框"
            android:background="#ff0000"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="3"
            android:gravity="center"
            android:text="第三个文本框"
            android:background="#008000"/>
    </LinearLayout>

二、相对布局RelativeLayout

1、RelativeLayout常用属性：

797932661-1.png

2、父容器定位属性示意图：

44967125.jpg

3、margin与padding的区别：
初学者对于这两个属性可能会有一点混淆，这里区分下： 首先margin代表的是偏移,比如marginleft = "5dp"表示组件离容器左边缘偏移5dp; 而padding代表的则是填充,而填充的对象针对的是组件中的元素,比如TextView中的文字 比如为TextView设置paddingleft = "5dp",则是在组件里的元素的左边填充5dp的空间！ margin针对的是容器中的组件，而padding针对的是组件中的元素，要区分开来！

Margin:设置组件与父容器(通常是布局)的边距
android:layout_margin: 指定控件的四周的外部留出一定的边距
android:layout_marginLeft: 指定控件的左边的外部留出一定的边距
android:layout_marginTop: 指定控件的上边的外部留出一定的边距
android:layout_marginRight: 指定控件的右边的外部留出一定的边距
android:layout_marginBottom: 指定控件的下边的外部留出一定的边距

Padding:设置组件内部元素间的边距(可以理解为填充)
android:padding :指定控件的四周的内部留出一定的边距
android:paddingLeft: 指定控件的左边的内部留出一定的边距
android:paddingTop: 指定控件的上边的内部留出一定的边距
android:paddingRight: 指定控件的右边的内部留出一定的边距
android:paddingBottom: 指定控件的下边的内部留出一定的边距

4、使用例子：

image.png

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".TwoActivity">

    <Button
        android:id="@+id/btn_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:text="返回" />


    <Button
        android:id="@+id/btn_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/btn_back"
        android:layout_centerVertical="true"
        android:paddingLeft="0dp"
        android:text="左边按钮" />

    <Button
        android:id="@+id/btn_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/btn_back"
        android:layout_centerVertical="true"
        android:paddingRight="0dp"
        android:text="右边按钮" />

    <Button
        android:id="@+id/btn_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn_back"
        android:layout_centerHorizontal="true"
        android:paddingTop="0dp"
        android:text="顶部按钮" />

    <Button
        android:id="@+id/btn_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn_back"
        android:layout_centerHorizontal="true"
        android:paddingBottom="0dp"
        android:text="底部按钮" />

</RelativeLayout>

三、约束布局 ConstraintLayout

1、app:layout_constraint基础属性详解：

属性	描述
app:layout_constraintLeft_toLeftOf	把A的left side放在B的left side（左边对齐）
app:layout_constraintLeft_toRightOf	把A的left side放在B的right side（左边相对右边对齐）
app:layout_constraintRight_toLeftOf	把A的right side放在B的left side（右边相对左边对齐）
app:layout_constraintRight_toRightOf	把A的right side放在B的right side（右边对齐）
app:layout_constraintTop_toTopOf	把A的top side放在B的top side（顶部对齐）
app:layout_constraintTop_toBottomOf	把A的top side放在B的bottom side（顶部相对底部对齐）
app:layout_constraintBottom_toTopOf	把A的bottom side放在B的top side（底部相对顶部对齐）
app:layout_constraintBottom_toBottomOf	把A的bottom side放在B的bottom side（底部对齐）
app:layout_constraintStart_toEndOf	把A的start position放在B的end position（起始位置相对结束位置对齐）
app:layout_constraintStart_toStartOf	把A的start position放在B的start position（起始位置对齐）
app:layout_constraintEnd_toStartOf	把A的end position放在B的start position（结束位置相对起始位置对齐）
app:layout_constraintEnd_toEndOf	把A的end position放在B的end position（结束位置对齐）
app:layout_constraintBaseline_toBaselineOf	把A的bottom side放在B的top side（基准线对齐）