【详解marginTop与marginBottom】
layout_marginTop,layout_marginBottom,layout_marginRight,layout_marginLeft 是 RelativeLayout 中的四种属性,今天在进行UI设计的时候,着实困扰了好久,索性做个总结。
先上结论:
layout_marginTop 指定该属性所在控件距上部最近控件的最小值;
layout_marginBottom 指定该属性所在控件距下部最近控件的最小值;
layout_marginLeft 指定该属性所在控件距左边最近控件的最小值;
layout_marginRight 指定该属性所在控件距右边最近控件的最小值。
首先,需要明确的是,RelativeLayout 是相对布局,这意味着其中的所有控件如果不进行具体的位置确定,都将汇集在左上角。
下面,以代码为例,来学习这四个属性。
新建一个 project 为:RelativeLayoutTest,其他一切按照默认,一路 Enter 。接下来,我们只需要修改布局文件,然后查看效果。
一个控件的情况
## layout_marginTop
- 根据这个名字,我们也可以知道,它指的是 该属性所在控件的边缘与上部控件的边缘的距离,这里的边缘是最靠近的边缘,即两个控件之间的最小距离,这里是该控件的上部边缘与父控件的下部边缘。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:id="@+id/project"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="项目"
android:layout_marginTop="50dp"/>
</RelativeLayout>
我们在布局文件中新建了一个 Button 按钮,指定 layout_marginTop 的值为 50dp,效果如下:
按钮上边缘距离父控件的距离为 50dp。
## layout_marginBottom
下面,我们将上部代码的 最后一行改为 android:layout_marginBottom="50dp"
,查看效果:
为什么按钮不是距离父控件的下部50dp,而是紧贴父控件的左上角呢?我们前面讲过,RelativeLayout 布局的控件是默认汇集在左上角的,我们指定的layout_marginBottom 的值远小于父控件默认的距离,此时,控件会按照默认取值。
layout_marginLeft 和 layout_marginRight 也是同理。
两个控件的情况
layout_marginTop
我们新增了一个“任务”按钮:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:id="@+id/project"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="项目" />
<Button android:id="@+id/task"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="任务"
android:layout_marginTop="50dp"/>
</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 指定该属性所在的控件距上下左右最近控件的最小值。
仍旧是看一下代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:id="@+id/project"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="项目"
android:layout_margin="10dp"/>
<Button android:id="@+id/task"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="任务"
android:layout_margin="50dp"/>
</RelativeLayout>
查看效果如下;
转载于:https://www.cnblogs.com/hultron/p/88841139c4ebbe76afa53ddf26098f64.html
【详解marginTop与marginBottom】相关推荐
- CSS-Cascading Style Sheet_层叠样式表_用法详解
CSS Cascading Style Sheet 1. CSS 介绍 1. CSS 概念介绍 CSS 全称 Cascading Style Sheet 层叠样式表1. 专门用来为HTML标签添加样式 ...
- JavaWeb = jQuery使用详解
jQuery 是一个优秀的 javascript 的轻量级框架之一,封装了 dom 操作.事件.页面动画.异步操作等功能. 特别值得一提的是基于 jquery 的插件非常丰富,大多数前端业务场景都有其 ...
- 制作一个简单的轮播图(详解新手教学)
制作一个简单的轮播图(详解新手教学) 相信很多初学者,无论是前端还是后端,对于制作页面时,都想自己亲手制作一个轮播图. 如何制作一个轮播图: 基础知识:有HTML,Css,js基础 本文使用技术: H ...
- html 登录界面js代码,详解JS实现系统登录页的登录和验证
这篇文章用JS显示表单的登录以及验证和对键盘的监听,这里有两种方法,一种是无需用户验证直接登录,一种是需要账户密码匹配才可登录. 1. html代码 登 录 2.CSS样式 .content{ pad ...
- flv.js php,flv.js的使用详解
这次给大家带来flv.js的使用详解,使用flv.js的注意事项有哪些,下面就是实战案例,一起来看一下. Bilibili相信大家都不会陌生,而 Flv.js 就是由 bilibili 网站开源的 H ...
- 从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- 前端之CSS篇(四)——CSS浮动详解
前言:页面布局要学习三大核心,盒子模型,浮动 和定位 . 1.CSS浮动 场景:整个网页的布局 本节需要解决的问题: 为什么需要浮动 浮动的排列特性 3种最常见的布局方式 为什么需要清除浮动 写出至少 ...
- Demo---progress-steps------ 2/50(详解)
看详解前 请务必具备的基础知识: 1.什么是基线 2. 元素的分类 3. justify-content; 的那些事 4.区分伪类和伪元素(以下内容 帮助理解与区分) 1 ) 1.伪元素 ...
- vscode中setting.json配置详解
vscode中的setting.json配置文件配置详解 话不多说上配置文件 大家按需复制到自己的setting.json配置文件中即可 [{// 控制是否在编辑器中显示 CodeLens." ...
最新文章
- RESTful之视图集ViewSet
- 扩增子统计绘图7三元图
- 2015年11月 广州深圳 MVP 线下活动
- javascript中使用重载
- 31天重构学习笔记3. 提升方法
- MongoDB架构图解
- SAP CRM WebClient UI和CRM Fiori Account里显示Opportunity逻辑
- C++之运算符重载(上)
- Nvidia CUDA初级教程6 CUDA编程一
- Mongodb For Mac OSX 登录验证
- pr中小人国微缩世界,速度快门的变化,动态地图,手写文字效果,打字机输入文字,照片定格效果
- 【C语言进阶】⑤关于数组传参和指针传参辨析
- python实现手机通讯录和学生信息管理系统(4种方法)
- Python文本文件的输入输出
- RecyclerView Adapter 优雅封装搞定所有列表
- NetFlow学习总结
- 车载以太网解决方案,你了解多少?
- R语言绘图patchwork拼图详解快速实现组合图拼接
- 小程序授权信息是保存在微信服务器,微信小程序登陆,授权,手机号授权流程及滚动穿透,保存图片等问题...
- Animation旋转360度
热门文章
- 自定义View——带清空文本的功能的ClearEditText
- 基数排序 | 主位优先 次位优先 | C语言
- github上标星70.5k,贼火的Java面试突击手册,不看就真的亏了
- synchronized用法详解
- 中美印日四国程序员比较------wuzhimin
- 【数据挖掘】2022年京东算法工程师笔试题(23届)
- Java_idea+MySQL基于Springboot口腔牙科诊所管理系统#vue毕业设计
- 关于一些优秀的前端网站
- 计算机特点及应用领域阐述,浅谈计算机的特点及应用.doc
- c语言there的用法,C语言函数(H类字母)