Kotlin课堂学习--设置布局相关操作(线性布局、相对布局、帧布局)

目录

布局介绍

操作

介绍

 线性布局LinearLayout

排列方式

 按钮Button设置

输入框EditText设置

相对布局RelativeLayout

相对整体的布局

 相对某一个控件的布局

帧布局

布局介绍

操作

进入默认xml文件,先删除里面的组件,然后调节成split形式,点击展示框,右击进入convent view,出现下面选择框。

注意:不删除组件可能导致出现下面选择框

介绍

LinearLayout表示线性布局,即所包含的控件成线性排列。

RelativeLayout表示相对布局,即所包含的控件可以通过相对定位使其出现在布局的任何位置。

FrameLayout表示帧布局,即所包含的控件都处于默认位置(左上角)。

 线性布局LinearLayout

注意:height和width必须设置为wrap_content,如果设置成match_parent会产生覆盖现象。

排列方式

去除默认TextView控件,在LinearLayout控件中添加如下属性:

android:orientation="horizontal"

1.android:orientation = "horizontal"指定布局内控件排列方式为水平排列 

2.android:orientation = "vertical"指定布局内控件排列方式为垂直排列

3.不设置则默认水平排列

 按钮Button设置

添加三个按钮:

<Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button1"
        android:text="1"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:text="2"
        />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:text="3"
        />

控件默认横向显示:

控件的长宽一般情况下不可设为0。

当height或者width被设置为0时,需要设置权重大小,使其宽度或者长度不被height或者width控制,而是由权重控制其比例。如下:

仅展示一个button设置:

<Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        android:text="2"
        android:gravity="left"
        android:layout_weight="2"
        />

示例中width被设置为0dp,而下方设置靠左对齐,权重为3,设置其他几个button后,通过权重占比大小分配宽度。

gravity用于设置控件的对齐方式,layout_weight设置控件的权重大小。

将三个控件的width设置为0dp,对齐方式为左对齐,比重依次为3、2、1,展示如下: 

输入框EditText设置

EditText控件用于设置输入框,其中:hint用于设置输入框的提示文字

<EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/edittext1"
        android:hint="pls input something"
        android:layout_weight="1"
        />

效果: (EditText和Button整体比重分配)

相对布局RelativeLayout

相对整体的布局

字段 效果

layout_alignParentTop

位于视图上方
layout_alignParentButtom 位于视图下方
layout_alignParentLeft 位于视图左侧
layout_alignParentRight 位于视图右侧
layout_centerInParent 位于视图中间

设置五个按钮

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

效果:

 相对某一个控件的布局

字段 效果
layout_above 位于指定控件上方
layout_below 位于指定控件下方
layout_toLeftOf 位于指定控件左侧
layout_toRightOf 位于指定控件右侧
layout_centerInParent 位于视图中间

设置五个按钮

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text="1"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="2"
        />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="3"
        />
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toLeftOf="@id/button3"
        android:text="4"
        />
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button3"
        android:layout_toRightOf="@id/button3"
        android:text="5"
        />

效果:

帧布局

默认布局,所有控件都处在默认位置(左上角

猜你喜欢

转载自blog.csdn.net/m0_61059796/article/details/129932669