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

本文转载至http://my.oschina.net/sayonala/blog/198376

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

 

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@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函数实现，特将成果记录一下，以便后续查阅

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
-(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解决上述问题。

posted @ 2015-05-07 15:38  天牛  阅读(616)  评论(0)  编辑  收藏  举报