UIButton 图片和文本的位置调整-内边距

iOS15开始UIButton官方提供了更为友好的设置内边距的方式。
但是iOS15以下的版本我们还得维护。故在2024年作为iOS开发者掌握按钮的内边距设置方法还是必要的。正文开始。
默认图片左,文本右。设置图片位置使用imageEdgeInsets,文本位置使用titleEdgeInsets。
关于UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)上下左右写“正值”还是“负值”弄不清楚。即使做了10年的iOS开发,也是能绕开就绕开。通常使用UIImageView,UILbale 做图片和文字,上边盖一个透明按钮。
一句话解释如何设置内边距。
箭头就是内边距。箭头越大内边距就越大,内边距“增加” 就是“正值”。反之是“负值”。


截屏2024-08-04 09.21.01.png

所以图片向右移动10个点,相当于,距离左边的内边距增加,left = +10,距离右边的内边距减10,right = -10。如下:
UIEdgeInsets(top: 0, left: 10, bottom: 0, right: -10)。
“图片”和“文本”左右位置互换。图片向右移动了“文本”的距离,同时,文本向左移动了“图片”的距离。
以下是一个oc demo


截屏2024-08-04 09.43.26.png

截屏2024-08-04 09.44.54.png

以下swift工具类,直接用就行。
import UIKit
enum buttonStyle {
case imgLeft,imgRight,imgTop,imgBottom
}
extension UIButton {
func layoutBtn(space:CGFloat,style:buttonStyle){
let imgW = imageView?.frame.width ?? 0.0
let imgH = imageView?.frame.height ?? 0.0

    let titleLableW = titleLabel?.frame.width ?? 0.0
    let titleLableH = titleLabel?.frame.height ?? 0.0
    
    switch style {
    case .imgLeft:
            imageEdgeInsets = UIEdgeInsets(top: 0, left: -space/2.0, bottom: 0, right: space/2.0)
            titleEdgeInsets = UIEdgeInsets(top: 0, left: space/2.0, bottom: 0, right: -space/2.0)
        
    case .imgRight:
            imageEdgeInsets = UIEdgeInsets(top: 0, left: titleLableW+space/2.0, bottom: 0, right:-titleLableW-space/2.0)
            titleEdgeInsets = UIEdgeInsets(top: 0, left: -imgW-space/2.0, bottom: 0, right: imgW+space/2.0)
    case .imgTop:
        
            imageEdgeInsets = UIEdgeInsets(top: -titleLableH-space/2.0, left: titleLableW/2, bottom: 0, right:-titleLableW/2)
            titleEdgeInsets = UIEdgeInsets(top: 0, left: -imgW/2, bottom: -imgH-space/2.0, right: imgW/2)
            
    case .imgBottom:
        
            imageEdgeInsets = UIEdgeInsets(top: titleLableH+space/2.0, left: titleLableW/2, bottom: 0, right:-titleLableW/2)
            titleEdgeInsets = UIEdgeInsets(top: 0, left: -imgW/2, bottom: imgH+space/2.0, right: imgW/2)
    
    }
}

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容