UIButton 的setImageEdgeInsets以及setTitleEdgeInsets

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)整体距离左侧的距离。

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

时间: 2024-10-13 11:40:05

UIButton 的setImageEdgeInsets以及setTitleEdgeInsets的相关文章

UIButton上的image与label的布局

项目中遇到这样一个问题,button的创建是根据服务器返回的数据来创建,比如label信息和image信息都是服务器返回,比较难搞,因为图片返回来都是URL,这是肯定没有错误的,不可能服务器给你返回一个图片. 涉及到一个问题,白之前没使用过类似方式设计按钮,多数情况下都是使用本地图片来创建,button上是有个set方法,但是这个方法就是我说的直接付本地图片名的. 后经旁牛教诲,第三方管理网络图片的插件有相应功能,我便导入<UIButton+WebCache>,使用sd_setImageWit

格而知之1:UIButton中imageView和titleLabel的位置调整

在使用UIButton时,有时候需要调整按钮内部的imageView和titleLabel的位置和尺寸.在默认情况下,按钮内部的imageView和titleLabel的显示效果是图片在左文字在右,然后两者紧挨在一起构成组合居中显示.如下图: 我们可以使用setImageEdgeInsets:和setTitleEdgeInsets:方法来调整两者的位置.在使用这两个方法之前,我们首先要将imageView和titleLabel定位在UIButton的左上角位置,方便参照坐标调节位置.使用以下语句

iOS学习-UIButton的imageView和titleLabel

UIButton的imageView和titleLabel的位置设置通过setImageEdgeInsets和setTitleEdgeInsets来设置 参考:http://blog.csdn.net/dfqin/article/details/37813591及http://blog.sina.com.cn/s/blog_5df876f301016h8h.html 实现如上图的效果其实有多种方法,像在button上嵌套label,imageView即可,下面是通过调节button自带的titl

UIButton中setTitleEdgeInsets和setImageEdgeInsets的使用

UIButton内有两个控件titleLabel和imageView,可以用来显示一个文本和图片,这里的图片区别于背景图片.给UIButton设置了title和image后,它们会图片在左边,文本在图片右边显示.它们两个做为一个整体依赖于button的contentHorizontalAlignment居左居右或居中显示. 1.当button.width < image.width时,只显示被压缩后的图片,图片是按fillXY的方式压缩. 2.当button.width > image.wid

UIButton的imageEdgeInsets 和 titleEdgeInsets

我们知道,在UIButton中有一个UILabel和一个UIImageView,同时还有属性: titleEdgeInsets,imageEdgeInsets.介绍下 imageEdgeInsets 和 titleEdgeInsets 的用法. UIEdgeInsets 首先,titleEdgeInsets 和 imageEdgeInsets 都是 UIEdgeInsets类型.UIEdgeInsets 是一个结构体,定义如下: typedef struct UIEdgeInsets { CGF

iOS UIButton的基本使用

UIButton的基本用法,平时用的也就是这么多,其他遇到在加 //实例化2种方法 UIButton *btn1 = [[UIButton alloc] init]; UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom]; //坐标和大小 btn.frame = CGRectMake(100, 100, 100, 100); //背景颜色 btn.backgroundColor = [UIColor redColor]; //设

UIButton的竖排图片和文本

UIButton的竖排图片和文本html, body {overflow-x: initial !important;}.CodeMirror { height: auto; } .CodeMirror-scroll { overflow-y: hidden; overflow-x: auto; } .CodeMirror-lines { padding: 4px 0px; } .CodeMirror pre { padding: 0px 4px; } .CodeMirror-scrollbar

iPhone开发-UIButton setImage的同时也显示title

想要做一个按钮,按钮上半部分显示图片(Image),下半部分显示文字(Title)(文字位置不固定),显示效果如下图: UIButton有两个设置Image的方法,一个是setImage,一个是setBackgroundImage.到底用哪个方法呢,既然不确定,那就测试下,看看哪个符合自己的要求. 1.先测试setImage方法,在IB(xib或storyboard)中拖拽一个UIbutton控件,之后设置Image属性,如下图: 之后看刚才拖拽的UIButton控件的样式,如下图: 无论你怎么

UIButton上同时显示图片和文字的方法

参考:http://blog.csdn.net/qijianli/article/details/8152726 不过有个问题,就是我使用时不能改变文字的颜色,后来修改了一下方法,如下: 定义一个UIButton+Manager文件,在.h #import <UIKit/UIKit.h> @interface UIButton (UIButtonImageWithLable) - (void) setImage:(UIImage *)image withTitle:(NSString *)ti