iOS UIButton 设置图片文字垂直排列

最新推荐文章于 2020-04-14 15:01:09 发布

shuixin536

最新推荐文章于 2020-04-14 15:01:09 发布

阅读量1.9k

点赞数

分类专栏： iOS Dev

iOS Dev 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

http://my.oschina.net/sayonala/blog/198376

摘要经过一下午的查阅资料及尝试，最终解决了在图片和文字垂直排列的情况下，如果文字长度变化会导致图片位置变动的问题。

经过一下午的查阅资料及尝试，最终解决了在图片和文字垂直排列的情况下，如果文字长度变化会导致图片位置变动的问题，最开始采用了网上比较多的做法，做法如下：

 
         @interface UIButton (UIButtonExt)   
        
         - ( 
         void 
         )centerImageAndTitle:( 
         float 
         )space;   
        
         - ( 
         void 
         )centerImageAndTitle;   
        
         @end   
        
         @implementation UIButton (UIButtonExt)   
        
         - ( 
         void 
         )centerImageAndTitle:( 
         float 
         )spacing   
        
         {       
        
         // get the size of the elements here for readability   
        
         CGSize imageSize = self.imageView.frame.size;   
        
         CGSize titleSize = self.titleLabel.frame.size;   
        
         // get the height they will take up as a unit   
        
         CGFloat totalHeight = (imageSize.height + titleSize.height + spacing);   
        
         // raise the image and push it right to center it   
        
         self.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight - imageSize.height), 0.0, 0.0, - titleSize.width);   
        
         // lower the text and push it left to center it   
        
         self.titleEdgeInsets = UIEdgeInsetsMake(0.0, - imageSize.width, - (totalHeight - titleSize.height),0.0);       
        
         }   
        
         - ( 
         void 
         )centerImageAndTitle   
        
         {   
        
         const  
         int  
         DEFAULT_SPACING = 6.0f;   
        
         [self centerImageAndTitle:DEFAULT_SPACING];   
        
         }   
        
         @end

后面经过测试，如果button的文字长度变更，会导致图片位置变化，经过多次修改UIEdgeInsets的值也没有达到期望效果，最终采用集成UIButton类，重写layoutSubviews函数实现，特将成果记录一下，以便后续查阅

 
         -( 
         void 
         )layoutSubviews { 
        
         [super layoutSubviews]; 
        
         // Center image 
        
         CGPoint center = self.imageView.center; 
        
         center.x = self.frame.size.width/2; 
        
         center.y = self.imageView.frame.size.height/2; 
        
         self.imageView.center = center; 
        
         //Center text 
        
         CGRect newFrame = [self titleLabel].frame; 
        
         newFrame.origin.x = 0; 
        
         newFrame.origin.y = self.imageView.frame.size.height + 5; 
        
         newFrame.size.width = self.frame.size.width; 
        
         self.titleLabel.frame = newFrame; 
        
         self.titleLabel.textAlignment = UITextAlignmentCenter; 
        
         }

通过重写，重新设置imageView的Center和titleLabel的Frame解决上述问题。

========================我是分割线，自己写得====

==========================自适应大小的按钮==========================

// DHUIImageButton.m

// IosAppTest

// Created by zyx on 15/4/17.

#import "DHUIImageButton.h"

@implementation DHUIImageButton

//+ (UIButton*) createImageButton:(NSString*) title imgNormal:(NSString*)imgNormal imgHover:(NSString*)imgHover

//{

// if (imgNormal == nil) {

// return nil;

// }

// NSString* txtLabel = title;

// UIFont* labelFont = [UIFont systemFontOfSize:[UIFont systemFontSize]];

// CGSize textLabelSize = [txtLabel sizeWithFont:labelFont];

// // CGSize textLabelSize = [txtLabel sizeWithFont:[UIFont systemFontOfSize:17]];

// UIImage* img = [UIImage imageNamed: imgNormal];

// CGSize imgSize = [img size];

imgSize.width = imgSize.width/2;

imgSize.height = imgSize.height/2;

// UIButton* liveButton = [UIButton buttonWithType:UIButtonTypeCustom] ;

// int btnImageWidth = imgSize.width;

// int btnImageHeight = imgSize.height;

// int btnLabelWidth = textLabelSize.width;

// int btnLabelHeight = textLabelSize.height;

// int btnPaddingLeft = 0;

// int btnPaddingRight = 0;

// int btnPaddingTop = 0;

// int btnPaddingBottom = 0;

// int btnSpacing = 0;

// int btnWidth = MAX(btnImageWidth, btnLabelWidth) + btnPaddingLeft + btnPaddingRight;

// int btnHeight = btnImageHeight + btnSpacing + btnLabelHeight + btnPaddingTop + btnPaddingBottom;

// liveButton.frame = CGRectMake(0, 0, btnWidth, btnHeight);

// liveButton.backgroundColor = [UIColor greenColor];

// [liveButton setImage:[UIImage imageNamed:imgNormal] forState:UIControlStateNormal];

// [liveButton setImage:[UIImage imageNamed:imgHover] forState:UIControlStateHighlighted];

// [liveButton setTitle:txtLabel forState:UIControlStateNormal];

// // [liveButton setImageEdgeInsets:UIEdgeInsetsMake(0, 50, 30, 50)];

// // [liveButton setTitleEdgeInsets:UIEdgeInsetsMake(30, -30, 0, 0)];

// liveButton.imageView.backgroundColor = [UIColor redColor];

// // liveButton.titleLabel.frame = CGRectMake(liveButton.titleLabel.frame.origin.x, liveButton.titleLabel.frame.origin.y, btnLabelWidth, btnLabelHeight);

// liveButton.titleLabel.backgroundColor = [UIColor blueColor];

// [liveButton setTitleColor:[UIColor blackColor] forState: UIControlStateNormal];

// [liveButton setTitleColor:[UIColor grayColor] forState: UIControlStateDisabled];

// liveButton.titleLabel.font = labelFont;

// liveButton.titleLabel.textAlignment = NSTextAlignmentCenter;

// int btnCenterX = btnWidth/2;

// int btnImageCenterX = btnImageWidth/2;

// int offsetY = btnHeight - btnImageHeight;

// liveButton.imageEdgeInsets = UIEdgeInsetsMake(0,(btnCenterX - btnImageCenterX),offsetY,0);//设置image在button上的位置（上top，左left，下bottom，右right）这里可以写负值，对上写－5，那么image就象上移动5个像素

// int btnLabelCenterX = btnImageWidth + btnLabelWidth/2;

// liveButton.titleEdgeInsets = UIEdgeInsetsMake(btnImageHeight/2 + btnLabelHeight + btnSpacing, -(btnLabelCenterX - btnCenterX), 0, 0);//设置title在button上的位置（上top，左left，下bottom，右right）

// return liveButton;

//}

+ (DHUIImageButton*) createImageButton:(NSString*) title imgNormal:(NSString*)imgNormal imgHover:(NSString*)imgHover

{

if (imgNormal == nil) {

return nil;

}

NSString* txtLabel = title;

UIFont* labelFont = [UIFont systemFontOfSize:[UIFont systemFontSize]];

CGSize textLabelSize = [txtLabel sizeWithFont:labelFont];

// CGSize textLabelSize = [txtLabel sizeWithFont:[UIFont systemFontOfSize:17]];

UIImage* img = [UIImage imageNamed: imgNormal];

CGSize imgSize = [img size];

// imgSize.width = imgSize.width/2;

// imgSize.height = imgSize.height/2;

DHUIImageButton* liveButton = [DHUIImageButton buttonWithType:UIButtonTypeCustom] ;

int btnImageWidth = imgSize.width;

int btnImageHeight = imgSize.height;

int btnLabelWidth = textLabelSize.width;

int btnLabelHeight = textLabelSize.height;

int btnPaddingLeft = 0;

int btnPaddingRight = 0;

int btnPaddingTop = 0;

int btnPaddingBottom = 0;

int btnSpacing = 0;

int btnWidth = MAX(btnImageWidth, btnLabelWidth) + btnPaddingLeft + btnPaddingRight;

int btnHeight = btnImageHeight + btnSpacing + btnLabelHeight + btnPaddingTop + btnPaddingBottom;

liveButton.frame = CGRectMake(0, 0, btnWidth, btnHeight);

liveButton.backgroundColor = [UIColor greenColor];

[liveButton setImage:[UIImage imageNamed:imgNormal] forState:UIControlStateNormal];

[liveButton setImage:[UIImage imageNamed:imgHover] forState:UIControlStateHighlighted];

[liveButton setTitle:txtLabel forState:UIControlStateNormal];

// [liveButton setImageEdgeInsets:UIEdgeInsetsMake(0, 50, 30, 50)];

// [liveButton setTitleEdgeInsets:UIEdgeInsetsMake(30, -30, 0, 0)];

liveButton.imageView.backgroundColor = [UIColor redColor];

// liveButton.titleLabel.frame = CGRectMake(liveButton.titleLabel.frame.origin.x, liveButton.titleLabel.frame.origin.y, btnLabelWidth, btnLabelHeight);

liveButton.titleLabel.backgroundColor = [UIColor blueColor];

[liveButton setTitleColor:[UIColor blackColor] forState: UIControlStateNormal];

[liveButton setTitleColor:[UIColor grayColor] forState: UIControlStateDisabled];

liveButton.titleLabel.font = labelFont;

liveButton.titleLabel.textAlignment = NSTextAlignmentCenter;

int btnCenterX = btnWidth/2;

int btnImageCenterX = btnImageWidth/2;

int offsetY = btnHeight - btnImageHeight;