Android的五种布局

1 . 相对布局

1.1 概要大纲

在这里插入图片描述

1.2 设计实例
<?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">

    <!-- 这个是在容器中央的 -->

    <ImageView
        android:id="@+id/img1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:src="@drawable/huawei"/>

    <!-- 在中间图片的左边 -->
    <ImageView
        android:id="@+id/img2"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_toLeftOf="@id/img1"
        android:layout_centerVertical="true"
        android:src="@drawable/csdn"/>

    <!-- 在中间图片的右边 -->
    <ImageView
        android:id="@+id/img3"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_toRightOf="@id/img1"
        android:layout_centerVertical="true"
        android:src="@drawable/bz"/>

    <!-- 在中间图片的上面-->
    <ImageView
        android:id="@+id/img4"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_above="@id/img1"
        android:layout_centerHorizontal="true"
        android:src="@drawable/flower"/>

    <!-- 在中间图片的下面 -->
    <ImageView
        android:id="@+id/img5"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_below="@id/img1"
        android:layout_centerHorizontal="true"
        android:src="@drawable/linux"/>

</RelativeLayout>





以中间的logo为参考,来确定其它logo的位置的这样的一个布局方式。
在这里插入图片描述

2. 线性布局

有点类似web里面的浮动布局,使用weight设置权重来实现对窗体的一个分配效果。

2.1 水平线性

布局设计:

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

<!--    weight设置权重-->
    <TextView
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="one"
        android:background="#98FB98"
        />
    <TextView
        android:layout_weight="2"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="two"
        android:background="#FFFF00"
        />
    <TextView
        android:layout_weight="3"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:text="three"
        android:background="#FF00FF"
        />
</LinearLayout>

设计实例
在这里插入图片描述
根据layout_weight三个子组件在父容器中的分配空间会是1:2:3

2.2 垂直线性
2.3 设置分割线

3 表格布局

3.1 基本属性
3.1.1 设定行列数
  1. 如果我们直接往TableLayout中添加组件的话,那么这个组件将占满一行!!!
  2. 如果我们想一行上有多个组件的话,就要添加一个TableRow的容器,把组件都丢到里面!
    tablerow中的组件个数就决定了该行有多少列,而列的宽度由该列中最宽的单元格决定
  3. tablerow的layout_width属性,默认是fill_parent的,我们自己设置成其他的值也不会生效!!! 但是layout_height默认是wrapten——content的,我们却可以自己设置大小!
  4. 整个表格布局的宽度取决于父容器的宽度(占满父容器本身)
  5. 有多少行就要自己数啦,一个tablerow一行,一个单独的组件也一行!多少列则是看tableRow中 的组件个数,组件最多的就是TableLayout的列数
3.1.2 单元格操作

android:collapseColumns:设置需要被隐藏的列的序号
android:shrinkColumns: 设置允许被收缩的列的列序号
android:stretchColumns:设置运行被拉伸的列的列序号
以上这三个属性的列号都是从0开始算的,比如shrinkColunmns = “2”,对应的是第三列!
可以设置多个,用逗号隔开比如"0,2",如果是所有列都生效,则用"*"号即可
除了这三个常用属性,还有两个属性,分别就是跳格子以及合并单元格,这和HTML中的Table类似:
- android:layout_column="2":表示的就是跳过第二个,直接显示到第三个格子处,从1开始算的!
- android:layout_span="4":表示合并4个单元格,也就说这个组件占4个单元格

3.2 演示
3.2.1 隐藏列
3.2.2 收缩列
3.2.3 拉伸列
使用android:stretchColumns设置被拉伸的列的序号
3.2.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:gravity="center_vertical"
    android:stretchColumns="0,3"
    >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="用户名:" />
        <EditText android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="150dp"/>
        <TextView/>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
        <TextView/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="密码:" />
        <EditText android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minWidth="150dp"/>
        <TextView/>
    </TableRow>

    <TableRow android:layout_height="match_parent"
        android:layout_width="match_parent">
        <TextView/>
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登录"/>
        <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="退出"/>
        <TextView/>

    </TableRow>

</TableLayout>

效果
在这里插入图片描述

3.3 恶心bug

采用水平线性,考虑设计浮动布局的效果:利用layout_gravity设置left 和right 来实现左右浮动的效果。
在这里插入图片描述

而采用垂直线性可以设置左右浮动,却不能保证同行:
在这里插入图片描述

参考

在这里插入图片描述

解决策略
<RelativeLayout
        android:id="@+id/parent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        >

        <Button android:id="@+id/true_btn" android:background="@drawable/border"  android:layout_alignParentLeft="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/true_button"/>

        <Button android:id="@+id/false_btn" android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/false_button"/>

    </RelativeLayout>
    

使用相对布局:
在这里插入图片描述

4. 网格布局

几个重要的属性

  1. GridLayout层
    • android:columnCount="4"设置列数为4
    • android:columnCount="6"设置行数为6
  2. 子组件层
    • 定义组件横跨多少行多少列
      • android:layout_columnSpan="4"设置组件独占4列
      • android:layout_rowSpan="2"设置组件独占两行
    • 定义组件在哪行哪列
      • layout_row设置位于哪行
      • layout_column设置位于哪列

5. 帧布局

主要属性:

  1. android:foreground:设置改帧布局容器的前景图像
  2. android:foregroundGravity:设置前景图像显示的位置
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值