UIButton图片文字控件位置自定义(图片居右文字居左、图片居中文字居中、图片居左文字消失等)
在开发中经常会碰到需要对按钮中的图片文字位置做调整的需求。
第一种方式是通过设置按钮中图片文字的偏移量。通过方法setTitleEdgeInsets和setImageEdgeInsets实现
代码如下:
/*!**方式一***/ - (void)updateBtnStyle_rightImage:(UIButton *)btn { CGFloat btnImageWidth = btn.imageView.bounds.size.width; CGFloat btnLabelWidth = btn.titleLabel.bounds.size.width; CGFloat margin = 3; btnImageWidth += margin; btnLabelWidth += margin; [btn setTitleEdgeInsets:UIEdgeInsetsMake(0, -btnImageWidth, 0, btnImageWidth)]; [btn setImageEdgeInsets:UIEdgeInsetsMake(0, btnLabelWidth, 0, -btnLabelWidth)]; }
这种方式对普通的需求是可以满足的,但是操作起来麻烦,不是那么直观。对于像修改图片子控件的宽高这种高度自定义的行为是很难实现的。
第二种方式则可以像布局子视图一样自由调整图片和文字的位置,简单方便。可以调出需要的任意布局方式。
代码如下:
1.在.h文件中:
自定义类ZFButton,继承自UIButton。定义枚举ZFButtonType说明不同的类型。定义实例更新方法- (void)updateButtonStyleWithType:在需要的时候,根据自己的意愿更新成自己想要的样式。
#import <UIKit/UIKit.h> typedef enum : NSUInteger { ZFButtonTypeCenterImageCenterTitle,//图片,文字都居中 ZFButtonTypeRightImageLeftTitle,//图片右,文字左 ZFButtonTypeLeftImageNoneTitle,//图片左,文字无 } ZFButtonType; @interface ZFButton : UIButton + (instancetype)zfButtonWithType:(ZFButtonType)buttonType; - (void)updateButtonStyleWithType:(ZFButtonType)buttonType; @end
2.中.m文件中:
重写方法- (void)layoutSubviews,根据不同的类型生成不同的布局。
- (void)layoutSubviews { [super layoutSubviews]; if (self.type == ZFButtonTypeCenterImageCenterTitle) { [self resetBtnCenterImageCenterTitle]; } else if (self.type == ZFButtonTypeLeftImageNoneTitle) { [self resetBtnLeftImageNotTitle]; } else if (self.type == ZFButtonTypeRightImageLeftTitle) { [self resetBtnRightImageLeftTitle]; } }
工厂方法zfButtonWithType:创建不同类型的ZFButton。
实例更新方法- (void)updateButtonStyleWithType:更新成不同UI类型的Button
+ (instancetype)zfButtonWithType:(ZFButtonType)buttonType { ZFButton * btn = [ZFButton buttonWithType:UIButtonTypeCustom]; btn.type = buttonType; return btn; } - (void)updateButtonStyleWithType:(ZFButtonType)buttonType { self.type = buttonType; [self layoutSubviews]; }
具体算法如下:
#pragma mark - 私有方法 /*!**方式二***/ - (void)resetBtnCenterImageCenterTitle { self.imageView.frame = self.bounds; [self.imageView setContentMode:UIViewContentModeCenter]; self.titleLabel.frame = self.bounds; self.titleLabel.textAlignment = NSTextAlignmentCenter; } - (void)resetBtnLeftImageNotTitle { CGRect frame = self.bounds; frame.size.width *= 0.5; self.imageView.frame = frame; [self.imageView setContentMode:UIViewContentModeCenter]; self.titleLabel.frame = CGRectZero; self.titleLabel.textAlignment = NSTextAlignmentCenter; } - (void)resetBtnRightImageLeftTitle { CGRect frame = self.bounds; frame.size.width *= 0.5; self.titleLabel.frame = frame; self.titleLabel.textAlignment = NSTextAlignmentCenter; frame.origin.x = (self.bounds.size.width - frame.size.width); self.imageView.frame = frame; [self.imageView setContentMode:UIViewContentModeCenter]; }
效果图和层级图展示如下:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)