详解基本界面布局方式

文章目录

• 一、PercentLayout 百分比布局
• 二、FrameLayout 框架布局
• 三、LineLayout线性布局
• 四、RelativeLayout相对布局

LinearLayout
RelativeLayout
FrameLayout
ContraintLayout
PercentLayout

一、PercentLayout 百分比布局

把界面设置为百分比布局，找不到设置的选项，需要导入。

1.在库中引入百分比布局

在此位置添加语句

等待加载（有刷新的按钮可以点击刷新的按钮）

再次搜索Percent

2.实例

<TextView
    android:id="@+id/tv_left_top"
    android:text="30%"
    android:textSize="30sp"
    app:layout_widthPercent = "30%"
    app:layout_heightPercent = "18%"
    android:textStyle="bold"
    android:gravity="center"
    android:background="#ddff00"
    />
<TextView
    android:id="@+id/tv_Right_top"
    app:layout_widthPercent = "70%"
    app:layout_heightPercent = "25%"
    android:text="70%"
    android:textSize="30sp"
    android:gravity="center"
    android:background="#0000ff"
    android:layout_toRightOf="@id/tv_left_top"
    />
 <TextView
     android:id="@+id/tv_center_left"
     app:layout_widthPercent = "50%"
     app:layout_heightPercent = "10%"
     android:layout_below="@id/tv_left_top"
     android:text="50%"
     android:gravity="center"
     android:textSize="30sp"
     android:background="#00ff00"
     app:layout_marginTopPercent = "10%"
     />

<TextView
    android:id="@+id/tv_below_center"
    app:layout_widthPercent = "70%"
    app:layout_heightPercent = "20%"
    android:layout_below="@id/tv_center_left"
    android:text="70%"
    android:gravity="center"
    android:textSize="30sp"
    android:background="#ff0000"
    app:layout_marginTopPercent = "5%"
    app:layout_marginLeftPercent = "10%"
    />

3.效果：

二、FrameLayout 框架布局

1.设置 为框架布局模式

2.实例

<TextView
    android:layout_gravity="center"
    android:background="#dd0000"
    android:layout_width="350dp"
    android:layout_height="350dp"/>
<TextView
    android:layout_gravity="center"
    android:background="#00dd00"
    android:layout_width="250dp"
    android:layout_height="250dp"/>
<TextView
    android:layout_gravity="center"
    android:background="#0000dd"
    android:layout_width="150dp"
    android:layout_height="150dp"/>

3.效果：

三、LineLayout线性布局

1.设置为线性布局模式

2.实例

<EditText
    android:hint="To:"
    android:textSize="20sp"
    android:inputType="text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
<EditText
    android:hint="Subject:"
    android:textSize="20sp"
    android:inputType="text"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>
<EditText
    android:hint="Message:"
    android:textSize="20sp"
    android:inputType="text"
    android:layout_weight="1"
    android:gravity="start"
    android:layout_width="match_parent"
    android:layout_height="0dp"/>
<LinearLayout
    android:orientation="horizontal"
    android:padding="10dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <Button
        android:layout_weight="1"
        android:text="Reset"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>
    <Button
        android:layout_weight="1"
        android:text="Send"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>
</LinearLayout>

3.效果:

四、RelativeLayout相对布局

1.设置为相对布局模式

2.实例

<Button
    android:text="Button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<Button
    android:text="Button2"
    android:layout_alignParentRight="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<Button
    android:text="Button3"
    android:layout_alignParentBottom="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<Button
    android:text="Button4"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<Button
    android:id="@+id/btn_center"
    android:text="Button5"
    android:layout_centerInParent="true"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

<Button
    android:text="Button6"
    android:layout_above="@id/btn_center"
    android:layout_toLeftOf="@id/btn_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<Button
    android:id="@+id/btn_7"
    android:text="Button7"
    android:layout_above="@id/btn_center"
    android:layout_toRightOf="@id/btn_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<Button
    android:id="@+id/btn_8"
    android:text="Button8"
    android:layout_below="@id/btn_center"
    android:layout_toLeftOf="@id/btn_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<Button
    android:text="Button9"
    android:layout_below="@id/btn_center"
    android:layout_alignRight= "@id/btn_7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

3.效果：

今天真是个命运多舛的一天，昨天是双十一狂欢夜，剁手剁到1点，早上七点多起来，摸摸弄弄来到学校就快8点了，风风火火到6楼实验室拿书，又火急火燎到2楼去上课，锻炼身体真的很好。上午上完课，中午又去测试蓝桥杯环境，不知不觉整到了1点20，又快马加鞭赶到食堂，吃完饭2点钟。下午没有课，回到实验室逛逛淘宝，买买器件，又整到3点多，老师突然来访，说打扫卫生，我又去测试环境，不慌不忙整到现在，等会还得去拍毛概视频，真是充实的一天啊。

本文地址：https://blog.csdn.net/lengyuefeng212/article/details/109623174