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 图片文字上下垂直布局 解决方案的更多相关文章

  1. iOS UIButton 图片文字左右互移 位置对调 解决方案

    实现类似效果: 代码实现: btnGrade.titleEdgeInsets = UIEdgeInsetsMake(, -(btnGrade.imageView?.bounds.width)!, , ...

  2. UIButton图片文字控件位置自定义(图片居右文字居左、图片居中文字居中、图片居左文字消失等)

    在开发中经常会碰到需要对按钮中的图片文字位置做调整的需求.第一种方式是通过设置按钮中图片文字的偏移量.通过方法setTitleEdgeInsets和setImageEdgeInsets实现 代码如下: ...

  3. iOS·UIButton如何文字在下图片在上

    创建子类继承自UIButton,在layoutSubviews方法中改变文字和图片的位置就可以了,同理,稍作改变,可以写出文字在上图片在下.本文只给出文字在下图片在上的代码 -(void)layout ...

  4. UIButton 图片文字位置

    在实际开发过程中经常在按钮上添加文字和图片,位置和图片的位置根据需求放置也是不一样的.下面实现了各种显示方式,如下图: UIButton+LSAdditions.h // // UIButton+LS ...

  5. UIButton图片文字位置的四种情况

    我们在做项目的过程中经常会遇到各定制UIButton 1.左边图片,右边文字 2.左边文字,右边图片 3.上边图片,下边文字 4.上边文字,下边图片 针对这四种情况 使用UIButton的catego ...

  6. iOS - UIButton设置文字标题下划线以及下划线颜色

    创建button设置可以折行显示 - (void)viewDidLoad { [super viewDidLoad]; UIButton * button = [[UIButton alloc] in ...

  7. day08—css布局解决方案之多列布局

    转行学开发,代码100天——2018-03-24 本文将记录CSS布局之垂直布局解决方案. 常见的多列布局包括以下: 1.定宽+自适应 2.两列定宽+一列自适应 3.不定宽+自适应 4.两列不定宽+一 ...

  8. iOS UIButton文字和图片间距随意调整

    代码地址如下:http://www.demodashi.com/demo/11606.html 前记 在开发中,我们经常会遇到这么一种情况,就是一个按钮上面有图片也有文字,但是往往设计并不是我们想要的 ...

  9. CSS 实现:图片+文字的布局(综合)

    ☊[实现要求]:图片+文字+居中 √[实现]: ① img + 文字 <div class="demo2-1"> <img src="" al ...

随机推荐

  1. 奇怪的Hibernate——当?遇上%

    今天写了一个模糊查询的SQL语句,发现了点有趣的东东 情景: 平时写模糊查询的时候是"select * from user where username like %?%" 然后就 ...

  2. 开发apple pay碰到的问题总结

    本来想简单总结一下Apple Pay 开发过程中的几个问题, 结果被下面这篇文章全碰上了, 干脆全文转载, 作者对相关资源整理得比较详细, 比较有参考价值 总的来说, 我们做过 APNs 推送的话, ...

  3. js 的点击事件

    <button id="btn">click</button> var btn=document.getElementById('btn'); 第一种: b ...

  4. jQuery 制作逼真的日历翻转效果的倒计时

    在开发中,一些功能需要用到倒计时,例如最常见的活动开始.结束的倒计时.使用最流行的 JavaScript 库来制作这个效果很简单.下面就是一个 jQuery 制作的逼真的日历翻转效果的倒计时功能. 在 ...

  5. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  6. 来自 Codrops 的7种创新的拖放交互界面

    Codrops 分享了一些界面拖放的交互设计想法.基本的思路是在拖动一个项目的时候,为特定的操作呈现出可投掷的区域.这节省了大量的界面空间 ,并给出了一个有趣的动态的互动.有很多应用场景,例如分类和组 ...

  7. JavaScript学习笔记-表达式和语句

    表达式和语句 eval( ) 只有一个参数 参数非字符串时,直接返回这个参数: 参数为字符串时,它把字符串当成JavaScript代码进行编译,编译失败则抛出语法错误,编译成功则执行代码,并返回最后一 ...

  8. cordova 添加闪屏效果

    为项目添加SplashScreen插件 在Cordova项目目录运行: cordova plugin add apache.cordova.splashscreen 这个命令从插件git库下载插件代码 ...

  9. MS14-064 漏洞测试入侵win7

    Microsoft Windows OLE远程代码执行漏洞,OLE(对象链接与嵌入)是一种允许应用程序共享数据和功能的技术, 远程攻击者利用此漏洞通过构造的网站执行任意代码,影响Win95+IE3 – ...

  10. Arcgis创建SDE_Geometry、SDO_Geometry的区别【转】

    1. SDO_GEOMETRY Oracle Spatial在MDSYS模式下定义了一系列几何类型.函数来支持空间数据的存储和使用,最为人耳熟能详的就是SDO_GEOMETRY这种类型——当然,Arc ...