layout_marginTop,layout_marginBottom,layout_marginRight,layout_marginLeft 是 RelativeLayout 中的四种属性,今天在进行UI设计的时候,着实困扰了好久,索性做个总结。

先上结论:

  • layout_marginTop 指定该属性所在控件距上部最近控件的最小值;

  • layout_marginBottom 指定该属性所在控件距下部最近控件的最小值;

  • layout_marginLeft 指定该属性所在控件距左边最近控件的最小值;

  • layout_marginRight 指定该属性所在控件距右边最近控件的最小值。

    首先,需要明确的是,RelativeLayout 是相对布局,这意味着其中的所有控件如果不进行具体的位置确定,都将汇集在左上角。

下面,以代码为例,来学习这四个属性。
新建一个 project 为:RelativeLayoutTest,其他一切按照默认,一路 Enter 。接下来,我们只需要修改布局文件,然后查看效果。

一个控件的情况

## layout_marginTop

  • 根据这个名字,我们也可以知道,它指的是 该属性所在控件的边缘与上部控件的边缘的距离,这里的边缘是最靠近的边缘,即两个控件之间的最小距离,这里是该控件的上部边缘与父控件的下部边缘。
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  6. <Button android:id="@+id/project"
  7. android:layout_width="wrap_content"
  8. android:layout_height="wrap_content"
  9. android:text="项目"
  10. android:layout_marginTop="50dp"/>
  11. </RelativeLayout>

我们在布局文件中新建了一个 Button 按钮,指定 layout_marginTop 的值为 50dp,效果如下:

按钮上边缘距离父控件的距离为 50dp。

## layout_marginBottom

下面,我们将上部代码的 最后一行改为 android:layout_marginBottom="50dp",查看效果:

为什么按钮不是距离父控件的下部50dp,而是紧贴父控件的左上角呢?我们前面讲过,RelativeLayout 布局的控件是默认汇集在左上角的,我们指定的layout_marginBottom 的值远小于父控件默认的距离,此时,控件会按照默认取值。
layout_marginLeft 和 layout_marginRight 也是同理。

两个控件的情况

layout_marginTop

我们新增了一个“任务”按钮:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  6. <Button android:id="@+id/project"
  7. android:layout_width="wrap_content"
  8. android:layout_height="wrap_content"
  9. android:text="项目" />
  10. <Button android:id="@+id/task"
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content"
  13. android:text="任务"
  14. android:layout_marginTop="50dp"/>
  15. </RelativeLayout>

查看效果如下:

可以很明显的看出,’任务‘按钮本来是与“项目”按钮重合的,现在,由于 android:layout_marginTop 的作用,它移到了上部边缘距离父布局下部边缘 50dp 的位置。

下面,我们给 “任务” 按钮添加一行代码:
android:layout_below="@id/project"
这行代码指定 “任务” 按钮位于 “项目” 按钮的下方,其他代码不变,我们来看看效果:

对比一下第一张图的项目按钮与本张图的任务按钮的位置,我们就可以发现,此时,layout_marginTop 指定的50dp 指的是:任务按钮与项目按钮之间的距离是50dp,而不是任务按钮与父控件下边缘的距离为50dp。

  • 现在,你应该明白我所说的最近控件的含义了吧。

layout_marginBottom

我们将上述代码中的 android:layout_marginTop="50dp" 改为 android:layout_marginBottom="50dp",并删除android:layout_below="@id/project",查看效果:

此时只有一个 "任务" 按钮了。因为,父布局是 RelativeLayout,两个按钮重合了。这也说明,当layout_marginBottom指定的距离小于默认的距离时,会按照默认的方式排列控件。

额外赠送一个: layout_margin

layout_margin 指定该属性所在的控件距上下左右最近控件的最小值。

仍旧是看一下代码:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent">
  6. <Button android:id="@+id/project"
  7. android:layout_width="wrap_content"
  8. android:layout_height="wrap_content"
  9. android:text="项目"
  10. android:layout_margin="10dp"/>
  11. <Button android:id="@+id/task"
  12. android:layout_width="wrap_content"
  13. android:layout_height="wrap_content"
  14. android:text="任务"
  15. android:layout_margin="50dp"/>
  16. </RelativeLayout>

查看效果如下;

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/hultron/p/88841139c4ebbe76afa53ddf26098f64.html

【详解marginTop与marginBottom】相关推荐

  1. CSS-Cascading Style Sheet_层叠样式表_用法详解

    CSS Cascading Style Sheet 1. CSS 介绍 1. CSS 概念介绍 CSS 全称 Cascading Style Sheet 层叠样式表1. 专门用来为HTML标签添加样式 ...

  2. JavaWeb = jQuery使用详解

    jQuery 是一个优秀的 javascript 的轻量级框架之一,封装了 dom 操作.事件.页面动画.异步操作等功能. 特别值得一提的是基于 jquery 的插件非常丰富,大多数前端业务场景都有其 ...

  3. 制作一个简单的轮播图(详解新手教学)

    制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础 本文使用技术: H ...

  4. html 登录界面js代码,详解JS实现系统登录页的登录和验证

    这篇文章用JS显示表单的登录以及验证和对键盘的监听,这里有两种方法,一种是无需用户验证直接登录,一种是需要账户密码匹配才可登录. 1. html代码 登 录 2.CSS样式 .content{ pad ...

  5. flv.js php,flv.js的使用详解

    这次给大家带来flv.js的使用详解,使用flv.js的注意事项有哪些,下面就是实战案例,一起来看一下. Bilibili相信大家都不会陌生,而 Flv.js 就是由 bilibili 网站开源的 H ...

  6. 从零开始学前端 - 7. CSS盒模型 margin和padding详解

    作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...

  7. 前端之CSS篇(四)——CSS浮动详解

    前言:页面布局要学习三大核心,盒子模型,浮动 和定位 . 1.CSS浮动 场景:整个网页的布局 本节需要解决的问题: 为什么需要浮动 浮动的排列特性 3种最常见的布局方式 为什么需要清除浮动 写出至少 ...

  8. Demo---progress-steps------ 2/50(详解)

    ​ 看详解前 请务必具备的基础知识: 1.什么是基线 2. 元素的分类 3. justify-content; 的那些事 ​​​​​4.区分伪类和伪元素(以下内容 帮助理解与区分) 1 ) 1.伪元素 ...

  9. vscode中setting.json配置详解

    vscode中的setting.json配置文件配置详解 话不多说上配置文件 大家按需复制到自己的setting.json配置文件中即可 [{// 控制是否在编辑器中显示 CodeLens." ...

最新文章

  1. RESTful之视图集ViewSet
  2. 扩增子统计绘图7三元图
  3. 2015年11月 广州深圳 MVP 线下活动
  4. javascript中使用重载
  5. 31天重构学习笔记3. 提升方法
  6. MongoDB架构图解
  7. SAP CRM WebClient UI和CRM Fiori Account里显示Opportunity逻辑
  8. C++之运算符重载(上)
  9. Nvidia CUDA初级教程6 CUDA编程一
  10. Mongodb For Mac OSX 登录验证
  11. pr中小人国微缩世界,速度快门的变化,动态地图,手写文字效果,打字机输入文字,照片定格效果
  12. 【C语言进阶】⑤关于数组传参和指针传参辨析
  13. python实现手机通讯录和学生信息管理系统(4种方法)
  14. Python文本文件的输入输出
  15. RecyclerView Adapter 优雅封装搞定所有列表
  16. NetFlow学习总结
  17. 车载以太网解决方案,你了解多少?
  18. R语言绘图patchwork拼图详解快速实现组合图拼接
  19. 小程序授权信息是保存在微信服务器,微信小程序登陆,授权,手机号授权流程及滚动穿透,保存图片等问题...
  20. Animation旋转360度

热门文章

  1. 自定义View——带清空文本的功能的ClearEditText
  2. 基数排序 | 主位优先 次位优先 | C语言
  3. github上标星70.5k,贼火的Java面试突击手册,不看就真的亏了
  4. synchronized用法详解
  5. 中美印日四国程序员比较------wuzhimin
  6. 【数据挖掘】2022年京东算法工程师笔试题(23届)
  7. Java_idea+MySQL基于Springboot口腔牙科诊所管理系统#vue毕业设计
  8. 关于一些优秀的前端网站
  9. 计算机特点及应用领域阐述,浅谈计算机的特点及应用.doc
  10. c语言there的用法,C语言函数(H类字母)