@class UIImage, UIFont, UIColor, UIImageView, UILabel;
typedef NS_ENUM(NSInteger, UIButtonType) {
//以枚举的形似表示---button的界面形式
UIButtonTypeCustom = 0, // no button type
UIButtonTypeSystem NS_ENUM_AVAILABLE_IOS(7_0), // standard system button
UIButtonTypeDetailDisclosure,
UIButtonTypeInfoLight,
UIButtonTypeInfoDark,
UIButtonTypeContactAdd,
UIButtonTypePlain API_AVAILABLE(tvos(11.0)) __IOS_PROHIBITED __WATCHOS_PROHIBITED, // standard system button without the blurred background view
UIButtonTypeRoundedRect = UIButtonTypeSystem // Deprecated, use UIButtonTypeSystem instead
};
NS_CLASS_AVAILABLE_IOS(2_0) @interface UIButton : UIControl+ (instancetype)buttonWithType:(UIButtonType)buttonType;//创建button
@property(nonatomic) UIEdgeInsets contentEdgeInsets UI_APPEARANCE_SELECTOR; // default is UIEdgeInsetsZero. On tvOS 10 or later, default is nonzero except for custom buttons.调整button整体内部区域的位置和尺寸
@property(nonatomic) UIEdgeInsets titleEdgeInsets; // default is UIEdgeInsetsZero--调整button文字区域的位置和尺寸
@property(nonatomic) BOOL reversesTitleShadowWhenHighlighted; // default is NO. if YES, shadow reverses to shift between engrave and emboss appearance
@property(nonatomic) UIEdgeInsets imageEdgeInsets; // default is UIEdgeInsetsZero-----调整button图片区域的位置和尺寸
@property(nonatomic) BOOL adjustsImageWhenHighlighted; // default is YES. if YES, image is drawn darker when highlighted(pressed)
@property(nonatomic) BOOL adjustsImageWhenDisabled; // default is YES. if YES, image is drawn lighter when disabled
@property(nonatomic) BOOL showsTouchWhenHighlighted __TVOS_PROHIBITED; // default is NO. if YES, show a simple feedback (currently a glow) while highlighted
@property(null_resettable, nonatomic,strong) UIColor *tintColor NS_AVAILABLE_IOS(5_0); // The tintColor is inherited through the superview hierarchy. See UIView for more information.
@property(nonatomic,readonly) UIButtonType buttonType;
// you can set the image, title color, title shadow color, and background image to use for each state. you can specify data
// for a combined state by using the flags added together. in general, you should specify a value for the normal state to be used
// by other states which don't have a custom value set
- (void)setTitle:(nullable NSString *)title forState:(UIControlState)state; // default is nil. title is assumed to be single line
- (void)setTitleColor:(nullable UIColor *)color forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default if nil. use opaque white
- (void)setTitleShadowColor:(nullable UIColor *)color forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default is nil. use 50% black
- (void)setImage:(nullable UIImage *)image forState:(UIControlState)state; // default is nil. should be same size if different for different states
- (void)setBackgroundImage:(nullable UIImage *)image forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default is nil
- (void)setAttributedTitle:(nullable NSAttributedString *)title forState:(UIControlState)state NS_AVAILABLE_IOS(6_0); // default is nil. title is assumed to be single line
- (nullable NSString *)titleForState:(UIControlState)state; // these getters only take a single state value
- (nullable UIColor *)titleColorForState:(UIControlState)state;
- (nullable UIColor *)titleShadowColorForState:(UIControlState)state;
- (nullable UIImage *)imageForState:(UIControlState)state;
- (nullable UIImage *)backgroundImageForState:(UIControlState)state;
- (nullable NSAttributedString *)attributedTitleForState:(UIControlState)state NS_AVAILABLE_IOS(6_0);
// these are the values that will be used for the current state. you can also use these for overrides. a heuristic will be used to
// determine what image to choose based on the explict states set. For example, the 'normal' state value will be used for all states
// that don't have their own image defined.
@property(nullable, nonatomic,readonly,strong) NSString *currentTitle; // normal/highlighted/selected/disabled. can return nil
@property(nonatomic,readonly,strong) UIColor *currentTitleColor; // normal/highlighted/selected/disabled. always returns non-nil. default is white(1,1)
@property(nullable, nonatomic,readonly,strong) UIColor *currentTitleShadowColor; // normal/highlighted/selected/disabled.
@property(nullable, nonatomic,readonly,strong) UIImage *currentImage; // normal/highlighted/selected/disabled. can return nil
@property(nullable, nonatomic,readonly,strong) UIImage *currentBackgroundImage; // normal/highlighted/selected/disabled. can return nil
@property(nullable, nonatomic,readonly,strong) NSAttributedString *currentAttributedTitle NS_AVAILABLE_IOS(6_0); // normal/highlighted/selected/disabled. can return nil
// return title and image views. will always create them if necessary. always returns nil for system buttons
@property(nullable, nonatomic,readonly,strong) UILabel *titleLabel NS_AVAILABLE_IOS(3_0);
@property(nullable, nonatomic,readonly,strong) UIImageView *imageView NS_AVAILABLE_IOS(3_0);
/ these return the rectangle for the background (assumes bounds), the content (image + title) and for the image and title separately. the content rect is calculated based
// on the title and image size and padding and then adjusted based on the control content alignment. there are no draw methods since the contents
// are rendered in separate subviews (UIImageView, UILabel)
- (CGRect)backgroundRectForBounds:(CGRect)bounds;
- (CGRect)contentRectForBounds:(CGRect)bounds;// 用来计算按钮整体内容区域的大小和位置
- (CGRect)titleRectForContentRect:(CGRect)contentRect;// 用来计算按钮文字区域的大小和位置
- (CGRect)imageRectForContentRect:(CGRect)contentRect;// 用来计算按钮图片区域的大小和位置
@end
@interface UIButton(UIButtonDeprecated)
@property(nonatomic,strong) UIFont *font NS_DEPRECATED_IOS(2_0, 3_0) __TVOS_PROHIBITED;
@property(nonatomic) NSLineBreakMode lineBreakMode NS_DEPRECATED_IOS(2_0, 3_0) __TVOS_PROHIBITED;
@property(nonatomic) CGSize titleShadowOffset NS_DEPRECATED_IOS(2_0, 3_0) __TVOS_PROHIBITED;
@end#if TARGET_OS_IOS
@interface UIButton (SpringLoading)
@end
#endif
NS_ASSUME_NONNULL_END
注意：默认情况下，Cocoa Touch 框架中的UIButton只支持左图右文的布局方式，而且还不能直接设置图文间距。
但是在现实开发中，我们会遇到要求--上图片下文字；右图左文；上文下图的情况。
针对这种情况，我们的通常思路就是创建UIButton的子类或者类别
UIButton的类别
#import<UIKit/UIKit.h>
//系统默认的布局是内容整体居中，图片在左，文字在右，图片和文字间距为 0。
typedef NS_ENUM(NSInteger,ZBButtonLayoutStyle) {
ZBButtonLayoutTitleLeft,
ZBButtonLayoutTitleRight,
ZBButtonLayoutTitleTop,
ZBButtonLayoutTitleBottom,
};
@interface UIButton (TitleAndImageLayout)
- (void)zb_setLayoutStyle:(ZBButtonLayoutStyle)style spacing:(CGFloat)spacing;
@end
#import "UIButton+TitleAndImageLayout.h"
@implementation UIButton (TitleAndImageLayout)
- (void)zb_setLayoutStyle:(ZBButtonLayoutStyle)style spacing:(CGFloat)spacing{
[self layoutIfNeeded];//为了获取最新的 imageView 和 titleLabel 的 frame，强制更新
CGRect titleFrame = self.titleLabel.frame;
CGRect imageFrame = self.imageView.frame;
switch (style) {
// UIEdgeInsets 类型有四个成员变量 top、left、bottom、right，分别表示上左下右四个方向的偏移量，正值代表往内缩进，也就是往按钮中心靠拢，负值代表往外扩张，就是往按钮边缘贴近。
case ZBButtonLayoutTitleLeft:
{
// 图片右移
self.imageEdgeInsets = UIEdgeInsetsMake(0,
titleFrame.size.width + spacing,
0,
-(titleFrame.size.width + spacing));
// 文字左移
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(titleFrame.origin.x - imageFrame.origin.x),
0,
titleFrame.origin.x - imageFrame.origin.x);
}
break;
case ZBButtonLayoutTitleRight:
{
// 计算默认的图片文字间距
CGFloat originalSpacing = titleFrame.origin.x - (imageFrame.origin.x + imageFrame.size.width);
// 调整文字的位置
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(originalSpacing - spacing),
0,
(originalSpacing - spacing));
}
break;
case ZBButtonLayoutTitleTop:
{
// 图片下移，右移
self.imageEdgeInsets = UIEdgeInsetsMake(titleFrame.size.height + spacing,
0,
0,
-(titleFrame.size.width));
// 文字上移，左移
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(imageFrame.size.width),
imageFrame.size.height + spacing,
0);
}
break;
case ZBButtonLayoutTitleBottom:
{
// 图片上移，右移
self.imageEdgeInsets = UIEdgeInsetsMake(0,
0,
titleFrame.size.height + spacing,
-(titleFrame.size.width));
// 文字下移，左移
self.titleEdgeInsets = UIEdgeInsetsMake(imageFrame.size.height + spacing,
-(imageFrame.size.width),
0,
0);
}
break;
default:
break;
}
}
@end
使用方法
//button的大小会自动获取图片的大小，字体大小默认17
UIButton* left = [UIButton buttonWithType:UIButtonTypeCustom];
left.backgroundColor = [UIColor yellowColor];
[self.view addSubview:left];
left.frame = CGRectMake(50, 80, 50, 80);
[left setImage:[UIImage imageNamed:@"icon_交易方式@2x"] forState:UIControlStateNormal];
[left setTitle:@"左" forState:UIControlStateNormal];
left.titleLabel.font = [UIFont systemFontOfSize:36];
[left setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
[left zb_setLayoutStyle:ZBButtonLayoutTitleLeft spacing:2];
创建UIButton的子类
#import<UIKit/UIKit.h>
typedef NS_ENUM(NSInteger,ZBButtonLayoutStyle) {
ZBButtonLayoutTitleLeft,
ZBButtonLayoutTitleRight,
ZBButtonLayoutTitleTop,
ZBButtonLayoutTitleBottom,
};
@interface UILayoutButton : UIButton
@property (assign,nonatomic)IBInspectable CGSize imageSize;//图片大小
@property (nonatomic,assign)CGFloat titleAndImageSpace;//文字和图片间的距离
@property (assign, nonatomic) ZBButtonLayoutStyle layoutStyle; ///< 图片和文字的相对位置
@end
--------------------
#import "UILayoutButton.h"
@implementation UILayoutButton
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
- (void)setLayoutStyle:(ZBButtonLayoutStyle)layoutStyle{
_layoutStyle = layoutStyle;
if (layoutStyle!= ZBButtonLayoutTitleRight&&layoutStyle!= ZBButtonLayoutTitleLeft) {
self.titleLabel.textAlignment = NSTextAlignmentCenter;
}
}
#pragma mark---重写父类方法，改变title和image的坐标
- (CGRect)imageRectForContentRect:(CGRect)contentRect{
if (self.layoutStyle == ZBButtonLayoutTitleLeft) {
CGFloat x = contentRect.size.width - self.titleAndImageSpace - self.imageSize.width ;
CGFloat y = contentRect.size.height - self.imageSize.height;
y = y/2;
CGRect rect = CGRectMake(x,y,self.imageSize.width,self.imageSize.height);
return rect;
} else if (self.layoutStyle == ZBButtonLayoutTitleBottom) {
CGFloat x = contentRect.size.width - self.imageSize.width;
CGFloat y= 0 ;
x = x / 2;
CGRect rect = CGRectMake(x,y,self.imageSize.width,self.imageSize.height);
return rect;
}else if (self.layoutStyle == ZBButtonLayoutTitleTop){
CGFloat x = contentRect.size.width - self.imageSize.width;
CGFloat y= contentRect.size.height-self.titleAndImageSpace-self.imageSize.height ;
x = x / 2;
CGRect rect = CGRectMake(x,y,self.imageSize.width,self.imageSize.height);
return rect;
}
else {
return [super imageRectForContentRect:contentRect];
}
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect {
if (self.layoutStyle == ZBButtonLayoutTitleLeft) {
return CGRectMake(0, 0, contentRect.size.width - self.titleAndImageSpace - self.imageSize.width , contentRect.size.height);
} else if (self.layoutStyle == ZBButtonLayoutTitleBottom) {
return CGRectMake(0, self.titleAndImageSpace + self.imageSize.height , contentRect.size.width , contentRect.size.height - self.titleAndImageSpace - self.imageSize.height );
}
else if (self.layoutStyle == ZBButtonLayoutTitleTop){
return CGRectMake((contentRect.size.width- self.imageSize.width)/2.0 , 0 , contentRect.size.width , contentRect.size.height - self.titleAndImageSpace - self.imageSize.height );
}
else {
return [super titleRectForContentRect:contentRect];
}
}
@end
使用方法：
UILayoutButton *left = [UILayoutButton buttonWithType:UIButtonTypeCustom];
left.backgroundColor = [UIColor redColor];
left.titleLabel.backgroundColor = [UIColor grayColor];
left.imageView.backgroundColor = [UIColor purpleColor];
left.frame = CGRectMake(50, 160, 110, 30);
[left setTitle:@"标题在左" forState:UIControlStateNormal];
left.imageSize = CGSizeMake(20, 20);//设置图片大小
left.layoutStyle = ZBButtonLayoutTitleLeft;//布局风格
[left setImage:[UIImage imageNamed:@"check_icon"] forState:UIControlStateNormal];
[self.view addSubview:left];
总结：
以上方式都能实现重新布局UIButton的子控件的效果,各有优缺点:
各位，可以把您的看法留在下方评论区。如有不足，也请指教，我这里就抱砖引玉了。
