【Android】基础—基本布局

【Android】基础—基本布局

基本布局

线性布局

垂直方向：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>
    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"/>
    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"/>

</LinearLayout>

水平方向：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"/>
    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"/>
    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3"/>

</LinearLayout>

指定控件大小

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="4"
        android:hint="请输入内容"/>
    <Button
        android:id="@+id/button_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="发送"/>

</LinearLayout>

当我们使用了android:layout_weight，控件宽度就不再由android:layout_width来决定，而是根据每个组件的数字进行比例划分（上面例子就是EditText : Button = 4 : 1）

相对布局

1. 相对于父容器的属性

• android:layout_alignParentStart：将控件的开始边（根据布局方向，可能是左边或右边）与父容器的开始边对齐。在支持从右到左（RTL）布局的语言环境中特别有用。
• android:layout_alignParentEnd：将控件的结束边（同样根据布局方向）与父容器的结束边对齐。
• android:layout_alignParentBottom：将控件的底部与父布局的底部对齐。
• android:layout_centerHorizontal：将控件水平居中于父布局。
• android:layout_centerVertical：将控件垂直居中于父布局。

2. 相对于兄弟控件的属性

• android:layout_toLeftOf：将控件放置于指定控件的左边。需要指定参照控件的ID（如@+id/someViewId）。
• android:layout_toRightOf：将控件放置于指定控件的右边。同样需要指定参照控件的ID。
• android:layout_above：将控件放置于指定控件的上方。
• android:layout_below：将控件放置于指定控件的下方。
• android:layout_alignTop：将控件的顶部与指定控件的顶部对齐。
• android:layout_alignBottom：将控件的底部与指定控件的底部对齐。
• android:layout_alignLeft：将控件的左边缘与指定控件的左边缘对齐。
• android:layout_alignRight：将控件的右边缘与指定控件的右边缘对齐。
• android:layout_alignStart：将控件的开始边与指定控件的开始边对齐（考虑RTL布局）。
• android:layout_alignEnd：将控件的结束边与指定控件的结束边对齐（考虑RTL布局）。

3. 其他常用属性

• android:layout_width 和 android:layout_height：设置控件的宽度和高度。常用值包括wrap_content（根据内容调整大小）、match_parent（填充父容器的整个宽度/高度）和具体数值（如dp、px等）。
• android:layout_margin 及其子属性（如android:layout_marginLeft、android:layout_marginTop等）：设置控件的外边距，即控件与其父容器或其他控件之间的空间。
• android:layout_gravity：设置控件在其父容器中的对齐方式（尽管在RelativeLayout中，这个属性主要用于子布局或特定场景，因为RelativeLayout主要通过上述相对属性来控制位置）。

简单举例：

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

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="button1" />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="button2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="button3" />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="button4" />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="button5" />

</RelativeLayout>

帧布局

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="HeHe" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:src="@mipmap/ic_launcher" />
</FrameLayout>

百分比布局

对FrameLayout和RelativeLayout进行扩展

扩展为PercentFrameLayout、PercentRelativeLayout

自定义布局

引入布局

如果我们把一个布局在多个活动中都要使用，那么就可以重新创建一个xml文档来写这个布局，在其他布局中引用这个布局

创建：

<?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="wrap_content">
    <Button
        android:id="@+id/title_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Back"
        android:textColor="#fff"/>
    <TextView
        android:id="@+id/title_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="标题"
        android:textColor="#fff"
        android:textSize="24sp"/>
    <Button
        androi