Android 子控件 自定义viewgroup android控件布局

1.LinearLayout线性布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/androidxiaoren"

    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <EditText
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:hint="2022120"/>
        <Button
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="登陆"
            android:layout_height="wrap_content"/>
    </LinearLayout>
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"
        android:layout_gravity="start"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="button2"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="button3"/>
</LinearLayout>
</LinearLayout>

android:background="@drawable/androidxiaoren"//为页面布局添加背景，可为颜色和图片 android:orientation="vertical"//子控件垂直排列 android:orientation="horizontal"//子控件水平排列 android:layout_width="0dp"//将布局的宽度置零，使用权值控制控件的宽度 android:layout_weight="1"//用于设置控件的权值 android:layout_gravity="start"//用于设置控件在布局中的位置

效果如图：

2.RelativeLayout相对布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/androidxiaoren">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:text="Button1" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:text="button3" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="button2" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:text="button4" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="button5" />



</RelativeLayout>

相对父布局的属性： 

<!--android:layout_alignParentTop="true"将子控件的上边沿与父控件的上边沿对齐-->
<!--android:layout_alignParentBottom="true"将子控件的下边沿与父控件的下边沿对齐-->
<!--    android:layout_alignParentLeft="true"将子控件与父控件的左边沿对齐-->
<!--    android:layout_alignParentRight="true"将子控件与父控件的右边沿对齐-->
<!--    android:layout_centerInParent="true"子控件在水平和垂直方向均居中对齐-->

效果如下：

 

 相对子控件的属性如下：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/androidxiaoren">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:text="button1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_alignLeft="@+id/button3"
        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_toRightOf="@+id/button1"
        android:text="button4" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_toLeftOf="@+id/button6"
        android:text="button5" />
    <Button
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="button6" />


</RelativeLayout>

<!--    android:layout_centerHorizontal="true"子控件水平方向居中对齐-->
<!--    android:layout_centerVertical="true"子控件垂直方向居中对齐-->
<!--     android:layout_below="@id/but1"将一个子控件放到另一个子控件下方-->
<!--    android:layout_toRightOf="@id/but1将一个子控件放到另一个子控件右方-->
    <!--    android:layout_toLeftOf="@id/but1将一个子控件放到另一个子控件左方-->
    <!--    android:layout_above="@id/but1将一个子控件放到另一个子控件上方-->
    <!--    android:layout_alignBottom="@id/but1将一个子控件与另一个子控件下方对齐-->
    <!--    android:layout_alignLeft="@id/but1将一个子控件与另一个子控件左方对齐-->
    <!--    android:layout_alignRight="@id/but1将一个子控件与另一个子控件右方对齐-->
    <!--    android:layout_alignTop="@id/but1将一个子控件与另一个子控件上方对齐-->

 3.FrameLayout帧布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:foreground="@drawable/android"
    android:foregroundGravity="bottom|right"
    >

    <TextView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#FF6143" />

    <TextView
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="#7BFE00" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="#FFFF00" />
</FrameLayout>

 帧布局：下一个控件永远盖在上一个控件上面，但是可以通过与LinearLayout相同的方法调整子控件的位置。

特殊用法：

• android:foreground:*设置改帧容器的角色图像
• android:foreGravity:设置背景图像显示的位置

效果如图：

 4.百分比布局

对FrameLayout和RelativeLayout进行功能扩展，提供了两种全新的布局：PercentFrameLayout和

PercentRelativeLayout

首先添加依赖：

implementation 'com.android.support:percent:27.0.2'

以PercentFrameLayout为例：

<?xml version="1.0" encoding="utf-8"?>
<androidx.percentlayout.widget.PercentFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:id="@+id/button1"
        android:text="Button1"
        android:layout_gravity="left|top"
        />
    <Button
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:id="@+id/button2"
        android:text="Button2"
        android:layout_gravity="right|top"
        />
    <Button
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:id="@+id/button3"
        android:text="Button3"
        android:layout_gravity="left|bottom"
        />
    <Button
        app:layout_widthPercent="50%"
        app:layout_heightPercent="50%"
        android:id="@+id/button4"
        android:text="Button4"
        android:layout_gravity="right|bottom"
        />

</androidx.percentlayout.widget.PercentFrameLayout>

通过如下代码设置子控件的长宽所占的百分比。

app:layout_widthPercent="50%"app:layout_heightPercent="50%" android:layout_gravity="left|top"用于设置子控件的位置 效果如图

PercentRelativeLayout继承RelativeLayout的所有属性，并可以使用app:layout_widthPercent="50%" app:layout_heightPercent="50%"指定控件的宽和高