线性布局和相对布局

Posted 2022-11-25 z啵唧啵唧

安卓的UI组件

线性布局LinearLayout

常用的属性

实例

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--
        orientation 属性用来设置排列方式
        vertical 表示垂直排列  horizontal 表示水平排序
        match_parent 表示匹配父空间
        gravity属性用来设置内部元素的布局方式
        layout_weight属性用来设置元素在父空间当中所占的权重(是把剩余的内容按照权重的方式进行分配)
    -->
    <LinearLayout
        android:id="@+id/zb"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:orientation="vertical"
        android:background="#000000"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:paddingTop="50dp"
        android:paddingBottom="10dp">
        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#FF0033"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="20dp"
        android:orientation="horizontal"
        android:background="#0066FF">
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#FF0033"
            android:layout_weight="1"/>
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#000000"
            android:layout_weight="1"/>
    </LinearLayout>

</LinearLayout>

效果展示

.

相对布局RelativeLayout

相对布局除了拥有线性布局所有的属性而外,他也同样有一些自己特有的属性

实例

<?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">

    <View
        android:id="@+id/view_1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#000000" />

    <View
        android:id="@+id/view_2"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FF0000"
        android:layout_below="@id/view_1"/>
    <LinearLayout
        android:id="@+id/view_3"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_below="@id/view_2"
        android:background="#00FF00"
        android:orientation="horizontal"
        android:padding="15dp">
        <View
            android:layout_width="100dp"
            android:layout_height="match_parent"
            android:background="#FF0033"/>
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#000000"
            android:padding="15dp">

            <View
                android:id="@+id/view_4"
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:background="#FF9900" />
            <View
                android:layout_width="100dp"
                android:layout_height="match_parent"
                android:id="@+id/view_5"
                android:layout_toRightOf="@id/view_4"
                android:background="#FFFFFF"
                android:layout_marginLeft="15dp"/>
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>

效果展示

.