2、Android-UI（布局待完成）

时间：2019-04-07 09:50:56 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：lca 组件属性 test 宽度 line 添加 4行改变

2.3、布局

实现界面的整齐摆放各种控件需要使用布局来完成

布局是一种可用于放置很多控件的容器

可以按照一定的规律调整内部的控件位置

布局的内部不仅可以放置控件还可以放置布局

技术图片

1、线性布局

LinearLayout又称线性布局，是一种常常用到的布局

会将所包含的控件再线性方向上一次排列

垂直方向上排列的

之前的代码种排列都是垂直排列

是因为再android:orientation属性制指定了排列的方向上vertical

如果指定：horizontal控件就会在水平方向上进行排列

默认不指定就是水平方向horizontal

如果使用horizontal则内部的控件宽度就不能指定为match_parent单独一个控件就会占用水平方向

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_first"
        android:textAllCaps="false"
        android:text="to first"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_second"
        android:text="to second"/>
</LinearLayout>

技术图片

android:layout_gravity:

用于指定控件再布局中的对其方式，取值和android:gravity差不多

注意：

当LinerLayout的排列方向是horizontal是，只有垂直方向上的对齐方式才会生效，因为此水平方向上的对齐方式长度是不固定的

没添加一个控件、水平方向的长度都会改变，因而无法指定该方向上的对齐方式

即：水平---垂直生效垂直---水平生效

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_first"
        android:textAllCaps="false"
        android:text="to first"
        android:layout_gravity="top"
        />
    <Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button_second"
        android:layout_gravity="center"
    android:text="to second"/>
</LinerLayout>

结果如下图：

LinerLayout是水平方向的

我们只能指定垂直方向上的排列方向

技术图片

android:layout_weight:

允许开发者使用比列方式来指定控件的大小

再手机适配方面可以起到非常重要的作用

<EditText
    android:id="@+id/edit_test1"
   android:layout_weight="2"
    android:hint="请输入"
    android:layout_width="0dp"
    android:layout_height="wrap_content" />

<Button
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:id="@+id/button_first"
    android:textAllCaps="false"
    android:text="to first"
    android:layout_gravity="top"
    />

这里的EditView和Button的宽度都设置成了0dp

再设置android:layout_weight属性，此时的控件不再由android:width指定

这里设置成0dp是一种规范化的写法

dp是Android种用于指定控件大小、间距等属性的单位

这里也会根据android:layout_weight的值来等分屏幕的宽度

原理：

LinerLayout下所有指定的layout_wight的值相加

再根据每个控件的值进行求比例

技术图片

    <EditText
        android:id="@+id/edit_test1"
       android:layout_weight="2"
        android:hint="请输入"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button_first"
        android:textAllCaps="false"
        android:text="to first"
        android:layout_gravity="top"
        />

此时只有EditText种执行属性

Button的属性设置为刚好包裹住元素

EditText会沾满被Button使用之后的屏幕空间

技术图片

2、相对布局

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">
    <Button
        android:text="btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"/>
    <Button
        android:text="btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"/>
    <Button
        android:text="btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"/>
    <Button
        android:text="btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"/>
    <Button
        android:text="btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

效果：

技术图片

这里使用到如下的属性进行布局设置

android:layout_alignParentLeft：和父布局的左对齐

android:layout_alignParentTop：和父布局的上对齐

android:layout_alignParentRight：和父布局的右对齐

android:layout_alignParentBottom：和父布局的下对齐

android:layout_centerInParent：和父布局的居中显示

相对于父布局来说

之前的都是相对于父布局进行定位的

还可以相对控件进行定位

将代码进行修改：

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

    <Button
        android:text="btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn3"
        android:layout_toLeftOf="@+id/btn3"
        android:id="@+id/btn1"/>
    <Button
        android:text="btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn3"
        android:layout_toRightOf="@+id/btn3"
        android:id="@+id/btn2"/>
    <Button
        android:text="btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:id="@+id/btn3"/>
    <Button
        android:text="btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn3"
        android:layout_toLeftOf="@+id/btn3"
        android:id="@+id/btn4"/>
    <Button
        android:text="btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn3"
        android:layout_toRightOf="@+id/btn3"
        android:id="@+id/btn5"/>
</RelativeLayout>

效果：

技术图片

这里使用到的属性：

android:layout_above：让一个控件位于一个控件的上方

android:layout_below：让一个控件位于一个控件的下方

android:layout_toLeftOf：让一个控件位于一个控件的左侧

android:layout_toRightOf：让一个控件位于一个控件的右侧

再次使用属性：

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

    <Button
        android:text="btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn3"
        android:layout_alignLeft="@+id/btn3"
        android:id="@+id/btn1"/>
    <Button
        android:text="btn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/btn3"
        android:layout_toRightOf="@+id/btn3"
        android:id="@+id/btn2"/>
    <Button
        android:text="btn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:id="@+id/btn3"/>
    <Button
        android:text="btn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn3"
        android:layout_toLeftOf="@+id/btn3"
        android:id="@+id/btn4"/>
    <Button
        android:text="btn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/btn3"
        android:layout_alignRight="@+id/btn3"
        android:id="@+id/btn5"/>


</RelativeLayout>

这里使用到如下属性：

android:layout_alignLeft：让一个控件的左边缘和零一控件的左边缘对齐(该控件默认位于父布局的上边)

android:layout_alignRight让一个控件的右边缘和另一控件的右边缘对齐(该控件默认位于父布局的上边)

同时还可以使用layout_alignTop和layout_alignBottom

技术图片

3、帧布局（FrameLayout ）

FrameLayout成为帧布局

应用的场景也相对比较少

所有的控件都默认摆放在布局的左上角

都会从左上角开始进行占用空间

新建文件：

技术图片

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text_view"/>
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"/>
</FrameLayout>

效果：

技术图片

当没有准备图片资源时，可以使用下方的代码进行引用

android:src="@mipmap/ic_launcher"

上述的使用场景比较小，但是可以使用的

效果种可以发现：

ImageView是在TextView之后添加的

但是此时的图片压在文字的上面

还可以进行修改布局中的对齐方式使用：android：gravity属性

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/text_view"
        android:layout_gravity="left"/>
    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_gravity="right"/>
</FrameLayout>

效果：

技术图片

4、表格布局（TableLayout）

遇到排列整齐的情况就可以使用表格布局进行排列

可以使布局排列整齐

TableLayout的属性：

android:collapseColumns:设置需要被隐藏的列的序号
android:shrinkColumns:设置允许被收缩的列的列序号
android:stretchColumns:设置运行被拉伸的列的列序号

以上这三个属性的列号都是从0开始算的,比如shrinkColunmns = "2",对应的是第三列！

android:layout_column="2":表示的就是跳过第二个,直接显示到第三个格子处,从1开始算的!
android:layout_span="4":表示合并4个单元格,也就说这个组件占4个单元格

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="2">

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:text="btn1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="btn2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="3"
            android:text="btn3"/>
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:text="btn4"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="btn5"/>
    </TableRow>
    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="2"
            android:text="btn6"/>
    </TableRow>
</TableLayout>

效果：

技术图片

5、网格布局GridLayout

作为android 4.0 后新增的一个布局

①跟LinearLayout(线性布局)一样,他可以设置容器中组件的对齐方式

②容器中的组件可以跨多行也可以跨多列(相比TableLayout直接放组件,占一行相比较)

常用属性：

设置组件的排列方式: android:orientation=""

设置组件的对齐方式: android:layout_gravity=""

设置网格布局的行列：

设置有多少行:android:rowCount="4" //设置网格布局有4行

设置有多少列:android:columnCount="4" //设置网格布局有4列

设置控件再几行几列（都是从0开始算）

组件在第几行:android:layout_row = "2" //设置组件位于第3行

组件在第几列:android:layout_column = "2" //设置该组件位于第3列

设置组件横向/纵向占几行几列

横跨几行:android:layout_rowSpan = "2" //纵向横跨2行

横跨几列:android:layout_columnSpan = "3" //横向横跨3列

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:orientation="horizontal"
    >

    <Button
        android:layout_column="3"
        android:text="/"/>
    <Button
        android:text="1"/>
    <Button
        android:text="2"/>
    <Button
        android:text="3"/>
    <Button
        android:text="*"/>
    <Button
        android:text="4"/>
    <Button
        android:text="5"/>
    <Button
        android:text="6"/>
    <Button
        android:text="-"
        android:id="@+id/btn_sub"/>
    <Button
        android:text="7"/>
    <Button
        android:text="8"/>
    <Button
        android:text="9"/>
    <Button
        android:layout_rowSpan="3"
        android:layout_width="wrap_content"
        android:layout_height="145dp"
        android:text="+"/>
    <Button
        android:text="0"
        android:layout_gravity="fill"
        android:layout_columnSpan="2"/>
    <Button
        android:text="00"/>
    <Button
        android:text="="
        android:layout_columnSpan="3"
        android:layout_height="wrap_content"
        android:layout_width="265dp"/>

</GridLayout>

技术图片

6、绝对布局（AbsoluteLayout）

通过指定x、y的坐标来控制组件再布局种的位置

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">

    <Button
        android:text="123"
        android:layout_x="40dp"
        android:layout_y="40dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</AbsoluteLayout>