iOS UIButton图片与文字位置

iOS中UIButton可设置图片和文字,当两者同时存在时,默认为图片在左,文字在右.有时候,我们需要改变两者之间的位置,因为需求虐我千百遍嘛!

• 话不多说,直接上代码,我们新建一个UIButton的分类,设置titleEdgeInsets与imageEdgeInsets的值即可满足需求.

• UIButton+ImageAlignmentStyle.h 文件

    // 定义一个枚举（包含了四种类型的button）
    typedef NS_ENUM(NSUInteger, WMButtonAlignmentStyle) {
    	WMButtonAlignmentStyleTop, // 图片在上，文字在下
    	WMButtonAlignmentStyleLeft, // 图片在左，文字在右
    	WMButtonAlignmentStyleBottom, // 图片在下，文字在上
    	WMButtonAlignmentStyleRight // 图片在右，文字在左
    };
    
    @interface UIButton (ImageAlignmentStyle)
  
    /**
    *  设置按钮的文字和图片的布局样式和间距
    *
    *  @param style 布局样式
    *  @param space 文字与图片的间距
    */
    - (void)setButtonImageAlignmentStyle:(WMButtonAlignmentStyle)style
                    imageAndLabelSpace:(CGFloat)space;
    @end
  

• UIButton+ImageAlignmentStyle.m 文件

    #import "UIButton+ImageAlignmentStyle.h"
    @implementation UIButton (ImageAlignmentStyle)
  
    - (void)setButtonImageAlignmentStyle:(WMButtonAlignmentStyle)style
                    imageAndLabelSpace:(CGFloat)space {
    	/**
    	UIButton中titleLabel和imageView的位置依赖:
    	如果只有文字(或者图片)时,titleEdgeInsets(或imageEdgeInsets)是button中titleLabel(或imageView)相对于button的上下左右的内边距;
    	如果同时有titleLabel和imageView，那么imageView的上下左是相对于button，右边是相对于titleLabel的;
    	titleLabel的上下右是相对于button，左边是相对于imageView的。
    	*/
  
    	// 获取imageView的宽、高
    	CGFloat imageWith = self.currentImage.size.width;
    	CGFloat imageHeight = self.currentImage.size.height;
  
    	// 获取titleLabel的宽、高
    	//intrinsicContentSize:也就是控件的内置大小,比如UILabel,UIButton等控件,
    	//他们都有自己的内置大小,控件的内置大小往往是由控件本身的内容所决定的
    	CGFloat labelWidth = self.titleLabel.intrinsicContentSize.width;
    	CGFloat labelHeight = self.titleLabel.intrinsicContentSize.height;
  
    	// 初始化imageEdgeInsets和labelEdgeInsets
    	UIEdgeInsets imageEdgeInsets = UIEdgeInsetsZero;
    	UIEdgeInsets labelEdgeInsets = UIEdgeInsetsZero;
  
    	// 根据参数style和space设置imageEdgeInsets和labelEdgeInsets的值
    	switch (style) {
    		case WMButtonAlignmentStyleTop:
    		{            
        		imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-space/2.0, 0, 0, -labelWidth);
        		labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith, -imageHeight-space/2.0, 0);
    		}
        		break;
    		case WMButtonAlignmentStyleLeft:
    		{
        		imageEdgeInsets = UIEdgeInsetsMake(0, -space/2.0, 0, space/2.0);
        		labelEdgeInsets = UIEdgeInsetsMake(0, space/2.0, 0, -space/2.0);
    		}
        		break;
    		case WMButtonAlignmentStyleBottom:
    		{
        		imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight-space/2.0, -labelWidth);
        		labelEdgeInsets = UIEdgeInsetsMake(-imageHeight-space/2.0, -imageWith, 0, 0);
    		}
        		break;
    		case WMButtonAlignmentStyleRight:
    		{
        		imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+space/2.0, 0, -labelWidth-space/2.0);
        		labelEdgeInsets = UIEdgeInsetsMake(0, -imageWith-space/2.0, 0, imageWith+space/2.0);
    		}
        		break;
    		default:
        		break;
    	}
    	// 重新设置titleEdgeInsets和imageEdgeInsets
    	self.titleEdgeInsets = labelEdgeInsets;
    	self.imageEdgeInsets = imageEdgeInsets;
    }
    @end