欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

详解基本界面布局方式

程序员文章站 2022-06-22 23:23:09
文章目录一、PercentLayout 百分比布局1.在库中引入百分比布局2.实例3.效果:二、FrameLayout 框架布局1.设置 为框架布局模式2.实例3.效果:三、LineLayout线性布局1.设置为线性布局模式2.实例3.效果:四、RelativeLayout相对布局1.设置为相对布局模式2.实例3.效果:LinearLayoutRelativeLayoutFrameLayoutContraintLayoutPercentLayout一、PercentLayout 百分比布局把界...

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