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 = 5 btn.imageEdgeInsets = UIEdgeInsetsMake(-lblH-margin/2, 0, 0, -lblW) btn.titleEdgeInsets = UIEdgeInsetsMake(imgH+margin/2, -imgW, 0, 0) }
总结来说,就是:
图片 向 右上角 移动
文字 向 左下角 移动
PS:如果图片文字左右平移,参考这个
iOS UIButton 图片文字左右互移 位置对调 解决方案
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 周边上新:园子的第一款马克杯温暖上架