文档章节

UIButton 的setImageEdgeInsets以及setTitleEdgeInsets

小春0618
 小春0618
发布于 2015/11/02 18:22
字数 756
阅读 3K
收藏 2

UIButton内有两个控件titleLabel和imageView,可以用来显示一个文本和图片,这里的图片区别于背景图片。给UIButton设置了title和image后,它们会图片在左边,文本在图片右边显示。它们两个做为一个整体依赖于button的contentHorizontalAlignment居左居右或居中显示。

    1.当button.width < image.width时,只显示被压缩后的图片,图片是按fillXY的方式压缩。

    2.当button.width > image.width,且 button.width < (image.width + text.width)时,图片正常显示,文本被压缩。

    3.当button.width > (image.width + text.width),两者并列默认居中显示,可通过button的属性contentHorizontalAlignment改变对齐方式。

    4.想两改变两个子控件的显示位置,可以分别通过setTitleEdgeInsets和setImageEdgeInsets来实现。需要注意的是,对titleLabel和imageView设置偏移,是针对它当前的位置起作用的,并不是针对它距离button边框的距离的。

下面是测试结果,效果为图片靠右,文字在图片的左边,紧挨着图片

        UIButton *btAccount = [[UIButton alloc]initWithFrame:CGRectMake(0, 0, 104/2, 64/2)];
        UIImage *image = [UIImage TSimageNamed:@"commen_button_personalcernter.png"];
        [btAccount setImage:image forState:UIControlStateNormal];
        [btAccount setTitle:NSLocalizedString(@"菜单", @"'") forState:UIControlStateNormal];
        [btAccount setTitleColor:[UIColor colorWithHexString:@"c0c0c0"] forState:UIControlStateNormal];
        CGSize strSize = [NSLocalizedString(@"菜单", @"") sizeWithFont:btAccount.titleLabel.font];
        [btAccount setImageEdgeInsets:UIEdgeInsetsMake(0, btAccount.frame.size.width - 0 - image.size.width, 0, (0 - strSize.width))];
        
        CGFloat titleRightInset = btAccount.frame.size.width - 10 - strSize.width;
        if (titleRightInset < 10 + image.size.width) {
            titleRightInset = 10 + image.size.width;
        }
        
        [btAccount setTitleEdgeInsets:UIEdgeInsetsMake(0, (btAccount.frame.size.width-image.size.width-strSize.width)-image.size.width, 0, image.size.width)];
        [btAccount addTarget:self action:@selector(onHitAccount:) forControlEvents:UIControlEventTouchUpInside];
        UIBarButtonItem *btItemAccount = [[UIBarButtonItem alloc]initWithCustomView:btAccount];
        
        self.navigationItem.leftBarButtonItem = btItemAccount;

下面说一下个人的理解

image的左侧距离btAccount的左侧的距离为按钮的宽度减去图片的宽度 ,就是btAccount.frame.size.width - 0 - image.size.width,这里的0可以修改为图片距离右侧的距离。

图片的右侧距离btAcount的右侧的距离的计算方式就不是只考虑图片了,而是需要考虑如下原则:

设置edgeInsets要始终记住的一个原则是:将label和imageView看成一个整体,imageView在前,label在后,中间没有空隙。

那么需要假想图片的右侧还有label,则(image+label)整体的右侧距离btAccount右侧的距离计算方式就是0-strSize.width,因为image的右侧与btAccount的右侧对齐。

所以:

        [btAccount setImageEdgeInsets:UIEdgeInsetsMake(0, btAccount.frame.size.width - 0 - image.size.width, 0, (0 - strSize.width))];


label的右侧距离btAccount的右侧的距离为image.size.width,因为label的右侧需要保留位置给image进行显示。


label的左侧距离btAccount的左侧的距离的计算方式与image的右侧距离计算方式同理,具体如下:

label左侧距离btAccount的左侧的距离为

labelLeftMargin = btAccount.frame.size.width-image.size.width-strSize.width, 

假想label的左侧还有image,则(image+label)的整体的左侧距离btAccount的左侧的距离计算方式就是:

labelLeftMargin-image.size.width,则就是

        [btAccount setTitleEdgeInsets:UIEdgeInsetsMake(0, (btAccount.frame.size.width-image.size.width-strSize.width)-image.size.width, 0, image.size.width)];

总结一下:设置图片的imageEdgeInsets的距离右侧的距离的时候,需要考虑(image+label)整体距离右侧的距离,设置label的labelEdgeInset的距离左侧的距离的事后,需要考虑(image+label)整体距离左侧的距离。


最后加一个上述代码的运行效果


© 著作权归作者所有

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

评论(0)

设置UIButton的title和image

请问大家:设置button的title和image的时候,不论title字体的多少,如何始终保持title和image同样的间距?谢谢!!!想要实现的效果:无论title是几个字,始终和image保持同等的间距。 示例代...

yuankai66
2014/09/30
586
0
UIButton中setTitleEdgeInsets和setImageEdgeInsets的使用

UIButton内有两个控件titleLabel和imageView,可以用来显示一个文本和图片,这里的图片区别于背景图片。给UIButton设置了title和image后,它们会图片在左边,文本在图片右边显示。它们两个做...

smail歇歇
2015/04/27
1.4K
0
UIButton的titleEdgeInsets和imageEdgeInsets属性

转:http://www.cnblogs.com/huichun/p/3419596.html uiButton控件上自带了一个uiLabel类型的子控件和一个uiImageView类型的子控件,如果可以正确使用他们的edgeInsets属性,就能把button设...

ygm900
2015/06/24
0
0
UIImageView与UIButton

应用场合 UIImageView主要用在只显示图片,没有点击事件的情况并且处理图片更加专业,动画例子: NSMutableArray *images = [NSMutableArray array]; for (int i=0; i<sum; i++) { NSBundle ...

天边那束阳光
2014/10/01
2.3K
0
【转载】NGUI UILabel 文字破碎

项目使用NGUI,最近碰到 Loading界面的提示文字破碎的Bug。 参考了以下文章 转自http://blog.csdn.net/huutu http://www.liveslives.com 下面先来了解一下为什么会出现这种问题。 需要了解的...

linda012518
2018/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 如何以 Web 应用的方式启动

在 Spring Boot 启动的时候,在进程完成后会自动退出。 如何让 Spring Boot 以 Web 方式启动,并且进程不退出呢? 需要确定下 Web 的这个依赖是否在你的依赖中。 <dependency> ...

honeymoose
10分钟前
4
0
leetcode892(三维形体的表面积)--C语言实现

求: 在 N * N 的网格上,我们放置一些 1 * 1 * 1 的立方体。 每个值 v = grid[i][j] 表示 v 个正方体叠放在对应单元格 (i, j) 上。 请你返回最终形体的表面积。 示例 1: 输入:[[2]] 输出:...

拓拔北海
15分钟前
38
0
使用* args和** kwargs [重复] - Use of *args and **kwargs [duplicate]

问题: This question already has answers here : 这个问题已经在这里有了答案 : What does ** (double star/asterisk) and * (star/asterisk) do for parameters? **(双星号/星号)和*(......

技术盛宴
20分钟前
18
0
spring-boot之@ConfigurationProperties的使用

@ConfigurationProperties是什么? Using the @Value("${property}") annotation to inject configuration properties can sometimes be cumbersome, especially if you are working with mu......

书中迷梦
21分钟前
33
0
让你快速掌握_正则表达式_的技巧(二)

经过上篇的快速入门了正则表达式,今天就带你快速掌握正则表达式的技巧, 话不多说,直接上干货! 正则表达式-附录【重点】 一. 规则 规则:. 含义:代表的是某一位,可以是任何字符 例如:匹配规...

煌sir
24分钟前
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部