文档章节

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

小春0618
 小春0618
发布于 2014/02/10 20:52
字数 353
阅读 22139
收藏 1

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

@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解决上述问题。

© 著作权归作者所有

共有 人打赏支持
小春0618
粉丝 8
博文 40
码字总数 10552
作品 0
海淀
程序员
私信 提问
加载中

评论(1)

moliyadi
moliyadi
以后有机会试试,感觉应该挺实用;
[iOS Animation]-CALayer 专用图层 富文本

富文本 iOS 6中,Apple给UILabel和其他UIKit文本视图添加了直接的属性化字符串的支持,应该说这是一个很方便的特性。不过事实上从iOS3.2开始CATextLayer就已经支持属性化字符串了。这样的话,...

浩浩老师
2015/09/23
0
0
用视图上移解决UITextField/UITextView被键盘遮盖问题

先看看UILabel/UITextField/UITextView的区别: UILabel 显示的文本只读,无法编辑,可以根据文字个数自动换行; UITextField 可编辑本文,但是无法换行,只能在一行显示;当点击键盘上的ret...

yoyoso
2015/03/18
0
0
(转)iOS学习——UIlabel设置行间距和字间距

  在iOS开发中经常会用到UIlabel来展示一些文字性的内容,但是默认的文字排版会觉得有些挤,为了更美观也更易于阅读我们可以通过某些方法将UIlabel的行间距和字间距按照需要调节。   比如...

mukekeheart
01/03
0
0
UILabel和UITextView文字换行差异

多行文本换行时,一般要求结尾如果是标点符号,标点符号不能单独占一行,需要将上一行的最后一个文字将和标点符号一起放在下一行。 设置 lineBreakMode = .byWordWrapping,按单词分割换行。...

十八郎
2018/07/17
0
0
ios开发日志-button+UIAlertView

去年学习过一段时间的ios开发 后来不知道为什么就没学了 最近准备重新开始学习ios开发 准备每天发一篇日志记录学习过程,也锻炼下自己的语言组织能力,代码写久了话不会说了 CGRect frame =...

平凡简单
2013/05/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

table边框样式

table{ border:0.5px solid #000; border-collapse:collapse; //去除边框间空隙}th,td{ border:0.5px solid #000;}...

学霸猫
6分钟前
0
0
分布式消息通讯Kafka原理分析(二)

本章重点: 1.消息的存储原理2.Partition的副本机制原理3.副本数据同步原理 消息的文件存储机制 通过如 下命令找到对应partition下的日志内容 [root@localhost ~]# ls /tmp/kafka-logs/f...

须臾之余
11分钟前
0
0
Vue Element表单绑定(四)常用操作整理

一、启用回车提交报单操作 在登录页面,使用回车提交表单操作一般是必要的一个操作。在 Element中如何使用呢,示例如下: 来个注意点: 1.button按钮的native-type设置为submit,而不是绑定c...

tianma3798
15分钟前
0
0
《大话数据结构》读后总结(七)

常见的时间复杂度 执行次数 函数阶 非正式术语 12 O(1) 常数阶 2n+3 O(n) 线性阶 3n^2+2n+1 O(n2) 平方阶 5log2n+20 O(logn) 对数阶 2n+3nlog2n+19 O(nlogn) nlogn阶 6n^3+2n^2+3n+4 O(n3) 立...

徐曙辉
17分钟前
0
0
three.js 事件交互

点击查看交互效果 在three.js中,展示的一切内容都是在canvas中绘制的,所以点击事件点击到物体上是无法获取点击对象的,要获取点击的对象要使用RayCaster,用于在三维空间中进行鼠标拾取,原...

tianyawhl
18分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部