按钮图片文字随意摆放
日常开发中我门都会遇到图片和文字在一个区域，这样的话系统的按钮就满足不了我们需求，下面先看图:
上代码:
/* *按钮图片和文字一体随意摆放. */ #import <UIKit/UIKit.h> @interface XMButton : UIButton @property (nonatomic,assign)CGRect titleRect; @property (nonatomic,assign)CGRect imageRect; @end #import "XMButton.h" @implementation XMButton - (instancetype)initWithFrame:(CGRect)frame { if (self = [super initWithFrame:frame]) { self.titleLabel.font = [UIFont systemFontOfSize:13]; } return self; } - (CGRect)titleRectForContentRect:(CGRect)contentRect { if (!CGRectIsEmpty(self.titleRect)&&!CGRectEqualToRect(self.titleRect, CGRectZero)) { return self.titleRect; } return [super titleRectForContentRect:contentRect]; } - (CGRect)imageRectForContentRect:(CGRect)contentRect { if (!CGRectIsEmpty(self.imageRect)&&!CGRectEqualToRect(self.imageRect, CGRectZero)) { return self.imageRect; } return [super imageRectForContentRect:contentRect]; }
@end
调用：
//图上文下 XMButton *wxButton = [XMButton buttonWithType:UIButtonTypeCustom]; [wxButton setTitle:@"我是微信" forState:UIControlStateNormal]; [wxButton setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal]; [wxButton setTitleColor:[UIColor yellowColor] forState:UIControlStateHighlighted]; [wxButton setBackgroundColor:[UIColor greenColor]]; [wxButton setImage:[UIImage imageNamed:@"weixinfenxiang"] forState:UIControlStateNormal]; wxButton.frame = CGRectMake(20, 70, 80, 80); wxButton.imageRect = CGRectMake(10, 5, wxButton.bounds.size.width-20, wxButton.bounds.size.height-25); wxButton.titleRect = CGRectMake(CGRectGetMinX(wxButton.imageRect), CGRectGetMaxY(wxButton.imageRect), CGRectGetWidth(wxButton.imageRect), 20); wxButton.titleLabel.textAlignment = NSTextAlignmentCenter; [self.view addSubview:wxButton]; //图下文上 XMButton *qqButton = [XMButton buttonWithType:UIButtonTypeCustom]; [qqButton setTitle:@"我是企鹅" forState:UIControlStateNormal]; [qqButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; [qqButton setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted]; qqButton.backgroundColor = [UIColor greenColor]; [qqButton setImage:[UIImage imageNamed:@"qqfenxiang"] forState:UIControlStateNormal]; qqButton.frame = CGRectMake(20, 200, 80, 80); qqButton.titleRect = CGRectMake(10,5, qqButton.bounds.size.width-20, 20); qqButton.imageRect = CGRectMake(10, CGRectGetMaxY(qqButton.titleRect), CGRectGetWidth(qqButton.titleRect),CGRectGetHeight(qqButton.frame)-30); qqButton.titleLabel.textAlignment = NSTextAlignmentCenter; [self.view addSubview:qqButton]; //图右文左 XMButton *wbButton = [XMButton buttonWithType:UIButtonTypeCustom]; [wbButton setTitle:@"我是微博" forState:UIControlStateNormal]; [wbButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; [wbButton setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted]; wbButton.backgroundColor = [UIColor greenColor]; [wbButton setImage:[UIImage imageNamed:@"weibofenxiang"] forState:UIControlStateNormal]; wbButton.frame = CGRectMake(20, 300, 130, 60); wbButton.titleRect = CGRectMake(10, wbButton.bounds.size.height/2-20/2, 60, 20); wbButton.imageRect = CGRectMake(CGRectGetMaxX(wbButton.titleRect), 5, wbButton.bounds.size.width-wbButton.titleRect.size.width-20, wbButton.bounds.size.height-10); wbButton.titleLabel.textAlignment = NSTextAlignmentCenter; [self.view addSubview:wbButton]; //系统默认（图左文右） XMButton *pyButton = [XMButton buttonWithType:UIButtonTypeCustom]; [pyButton setTitle:@"我是朋友圈" forState:UIControlStateNormal]; [pyButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; [pyButton setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted]; pyButton.backgroundColor = [UIColor greenColor]; [pyButton setImage:[UIImage imageNamed:@"pengyouquanfenxiang"] forState:UIControlStateNormal]; pyButton.frame = CGRectMake(20, 400, 130, 60); [self.view addSubview:pyButton];
2.另外一种方式:
#import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, CDMImagePosition) { CDMImagePositionLeft = 0, //图片在左，文字在右，默认 CDMImagePositionRight = 1, //图片在右，文字在左 CDMImagePositionTop = 2, //图片在上，文字在下 CDMImagePositionBottom = 3, //图片在下，文字在上 }; @interface UIButton (CDMImagePosition) /** * 利用UIButton的titleEdgeInsets和imageEdgeInsets来实现文字和图片的自由排列 * 注意：这个方法需要在设置图片和文字之后才可以调用，且button的大小要大于 图片大小+文字大小+spacing * * @param spacing 图片和文字的间隔 */ - (void)setImagePosition:(CDMImagePosition)postion spacing:(CGFloat)spacing; @end
#import "UIButton+CDMImagePosition.h" @implementation UIButton (CDMImagePosition) - (void)setImagePosition:(CDMImagePosition)postion spacing:(CGFloat)spacing { CGFloat imageWith = self.imageView.image.size.width; CGFloat imageHeight = self.imageView.image.size.height; #pragma clang diagnostic push #pragma clang diagnostic ignored "-Wdeprecated-declarations" CGFloat labelWidth = [self.titleLabel.text sizeWithFont:self.titleLabel.font].width; CGFloat labelHeight = [self.titleLabel.text sizeWithFont:self.titleLabel.font].height; #pragma clang diagnostic pop CGFloat imageOffsetX = (imageWith + labelWidth) / 2 - imageWith / 2;//image中心移动的x距离 CGFloat imageOffsetY = imageHeight / 2 + spacing / 2;//image中心移动的y距离 CGFloat labelOffsetX = (imageWith + labelWidth / 2) - (imageWith + labelWidth) / 2;//label中心移动的x距离 CGFloat labelOffsetY = labelHeight / 2 + spacing / 2;//label中心移动的y距离 switch (postion) { case CDMImagePositionLeft: self.imageEdgeInsets = UIEdgeInsetsMake(0, -spacing/2, 0, spacing/2); self.titleEdgeInsets = UIEdgeInsetsMake(0, spacing/2, 0, -spacing/2); break; case CDMImagePositionRight: self.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth + spacing/2, 0, -(labelWidth + spacing/2)); self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imageHeight + spacing/2), 0, imageHeight + spacing/2); break; case CDMImagePositionTop: self.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX); self.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY, -labelOffsetX, -labelOffsetY, labelOffsetX); break; case CDMImagePositionBottom: self.imageEdgeInsets = UIEdgeInsetsMake(imageOffsetY, imageOffsetX, -imageOffsetY, -imageOffsetX); self.titleEdgeInsets = UIEdgeInsetsMake(-labelOffsetY, -labelOffsetX, labelOffsetY, labelOffsetX); break; default: break; } }
还有一种利用分类＋runtime 的形式，留给大家写吧，Demo 就不上了，代码都在上面了.
