iOS UIButton 图片文字上下垂直布局 解决方案

时间:2023-03-08 17:29:11
iOS UIButton  图片文字上下垂直布局 解决方案

1、实现效果:

iOS UIButton  图片文字上下垂直布局 解决方案

这是一个UIButton,需要改变image和title相对位置。

2、实现原理:

利用UIEdgeInsetsMake:里面的四个参数表示距离上边界、左边界、下边界、右边界的距离,默认都为零

iOS UIButton  图片文字上下垂直布局 解决方案

此时,4个边距都有一个初始值,我们设置UIEdgeInsetsMake(0,0,0,0),位置是不动的

当我们给top一个正1的位移:UIEdgeInsetsMake(1,0,0,0),此时btn内的image是向下移动了0.5。

注意:为什么是0.5,这是因为我们没有设置button的内部控件对齐方式,位移距离此时变成了一半。

比如:btn.contentHorizontalAlignment和contentVerticalAlignment

iOS UIButton  图片文字上下垂直布局 解决方案

只有当我们设置了这两个属性,位移才会和设置位移值相等。

我们记住一个原则,当设置正值,就表示内边距变大,负值则表示减少内边距

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 图片文字左右互移 位置对调 解决方案