iOS UIButton 图片文字上下垂直布局 解决方案
1、实现效果:
这是一个UIButton,需要改变image和title相对位置。
2、实现原理:
利用UIEdgeInsetsMake:里面的四个参数表示距离上边界、左边界、下边界、右边界的距离,默认都为零
此时,4个边距都有一个初始值,我们设置UIEdgeInsetsMake(0,0,0,0),位置是不动的
当我们给top一个正1的位移:UIEdgeInsetsMake(1,0,0,0),此时btn内的image是向下移动了0.5。
注意:为什么是0.5,这是因为我们没有设置button的内部控件对齐方式,位移距离此时变成了一半。
比如:btn.contentHorizontalAlignment和contentVerticalAlignment
只有当我们设置了这两个属性,位移才会和设置位移值相等。
我们记住一个原则,当设置正值,就表示内边距变大,负值则表示减少内边距。
3、实现如下:
定义按钮
btnFlash = UIButton(frame: frame)
btnFlash.setImage(UIImage(named: "flash_off"), for: .normal)
btnFlash.setTitle("手电筒", for: .normal)
self.view.addSubview(btnFlash)
setButtonMiddle(btn: btnFlash)
方法调用
/// 设置按钮图片文字上下垂直居中
/// 前提:1、必须设置好按钮的图片和文字
/// 2、按钮frame能让图片和文字正常显示出来(别btn宽度太小,文字都省略号了)
///
/// - Parameter btn: <#btn description#>
func setButtonMiddle(btn:UIButton) {
if btn.imageView == nil || btn.titleLabel == nil{
return
} let imgW:CGFloat = btn.imageView!.frame.size.width
let imgH:CGFloat = btn.imageView!.frame.size.height
let lblW:CGFloat = btn.titleLabel!.frame.size.width
let lblH:CGFloat = btn.titleLabel!.frame.size.height
//设置图片和文字的间距,这里可自行调整
let margin:CGFloat = btn.imageEdgeInsets = UIEdgeInsetsMake(-lblH-margin/, , , -lblW)
btn.titleEdgeInsets = UIEdgeInsetsMake(imgH+margin/, -imgW, , ) }
总结来说,就是:
图片 向 右上角 移动
文字 向 左下角 移动
PS:如果图片文字左右平移,参考这个
iOS UIButton 图片文字左右互移 位置对调 解决方案
iOS UIButton 图片文字上下垂直布局 解决方案的更多相关文章
- iOS UIButton 图片文字左右互移 位置对调 解决方案
实现类似效果: 代码实现: btnGrade.titleEdgeInsets = UIEdgeInsetsMake(, -(btnGrade.imageView?.bounds.width)!, , ...
- UIButton图片文字控件位置自定义(图片居右文字居左、图片居中文字居中、图片居左文字消失等)
在开发中经常会碰到需要对按钮中的图片文字位置做调整的需求.第一种方式是通过设置按钮中图片文字的偏移量.通过方法setTitleEdgeInsets和setImageEdgeInsets实现 代码如下: ...
- iOS·UIButton如何文字在下图片在上
创建子类继承自UIButton,在layoutSubviews方法中改变文字和图片的位置就可以了,同理,稍作改变,可以写出文字在上图片在下.本文只给出文字在下图片在上的代码 -(void)layout ...
- UIButton 图片文字位置
在实际开发过程中经常在按钮上添加文字和图片,位置和图片的位置根据需求放置也是不一样的.下面实现了各种显示方式,如下图: UIButton+LSAdditions.h // // UIButton+LS ...
- UIButton图片文字位置的四种情况
我们在做项目的过程中经常会遇到各定制UIButton 1.左边图片,右边文字 2.左边文字,右边图片 3.上边图片,下边文字 4.上边文字,下边图片 针对这四种情况 使用UIButton的catego ...
- iOS - UIButton设置文字标题下划线以及下划线颜色
创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...
- day08—css布局解决方案之多列布局
转行学开发,代码100天——2018-03-24 本文将记录CSS布局之垂直布局解决方案. 常见的多列布局包括以下: 1.定宽+自适应 2.两列定宽+一列自适应 3.不定宽+自适应 4.两列不定宽+一 ...
- iOS UIButton文字和图片间距随意调整
代码地址如下:http://www.demodashi.com/demo/11606.html 前记 在开发中,我们经常会遇到这么一种情况,就是一个按钮上面有图片也有文字,但是往往设计并不是我们想要的 ...
- CSS 实现:图片+文字的布局(综合)
☊[实现要求]:图片+文字+居中 √[实现]: ① img + 文字 <div class="demo2-1"> <img src="" al ...
随机推荐
- Verilog学习笔记基本语法篇(十三)...............Gate门
Verilog中已有一些建立好的逻辑门和开关的模型.在所涉及的模块中,可通过实例引用这些门与开关模型,从而对模块进行结构化的描述. 逻辑门: and (output,input,...) nand ( ...
- Thinkphp各种方法知识图谱
A方法:用于实例化控制器 ThinkPHP函数详解:A方法 B方法:执行某个行为 I方法(其命名来自于英文Input):获取输入参数 支持过滤和默认值 ThinkPHP函数详解:I方法 D方法:D函数 ...
- java集合-hashCode
hashCode 的作用 在 Java 集合中有两类,一类是 List,一类是 Set 他们之间的区别就在于 List 集合中的元素师有序的,且可以重复,而 Set 集合中元素是无序不可重复的.对于 ...
- ASP.NET根据URL生成网页缩略图示例程序(C#语言)
工作中可能马上要用到根据URL生成网页缩略图功能,提前做好准备. 在网上找了份源码,但是有错误:当前线程不在单线程单元中,因此无法实例化 ActiveX 控件“8856f961-340a-11d0-a ...
- AES .net 、JS 相互加密解密
/// <summary> /// AES加密 /// </summary> public class AES { /// <summary> /// 加密 /// ...
- 更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- 完美卸载oracle11g步骤
完美卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->Oracle - OraHome ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- html5标签的改变
1.新的文档类型声明 浏览器解析html模式是有两种模式,按照各自浏览器的定义渲染的页面叫“怪异模式”,而按照w3c组织统一的标准渲染叫“标准模式”.一般都是使用标准模式来保持网页兼容性,区分这两种模 ...