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

在使用UIButton时,有时候需要调整按钮内部的imageView和titleLabel的位置和尺寸。在默认情况下,按钮内部的imageView和titleLabel的显示效果是图片在左文字在右,然后两者紧挨在一起构成组合居中显示。如下图:

我们可以使用setImageEdgeInsets:和setTitleEdgeInsets:方法来调整两者的位置。在使用这两个方法之前,我们首先要将imageView和titleLabel定位在UIButton的左上角位置,方便参照坐标调节位置。使用以下语句来定位(UIButton实例名为btn):

[btn setContentHorizontalAlignment: UIControlContentHorizontalAlignmentLeft];
[btn setContentVerticalAlignment: UIControlContentVerticalAlignmentTop];

另外需要说明,btn的高度为200、宽度为屏幕宽度,imageView的图片的原本尺寸为150x150,titleLabel使用了sizeToFit:方法。在定义好,我们分多种情况来讨论imageView和titleLabel的位置:

1、正常情况:

使用了上述的语句后,不进行任何操作,此时按钮的显示情况和坐标情况如下:

imageView.x=0.000000, imageView.y=0.000000, imageView.width=150.000000, imageView.height=150.000000
titleLabel.x=150.000000, titleLabel.y=0.000000, titleLabel.width=180.500000, titleLabel.height=21.500000

可以看到:titleLabel的x值是150,说明普通状态下,titleLabel的原点是(150 ,0)。

2、将imageView居中,将titleLabel左移至贴边:

使用以下语句来实现这种情况:

    [btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-btn.imageView.bounds.size.width)*0.5, 0, 0)];
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(0, -btn.imageView.bounds.size.width, 0, 0)];

此时按钮的显示情况和坐标情况如下:

imageView.x=112.500000, imageView.y=0.000000, imageView.width=150.000000, imageView.height=150.000000
titleLabel.x=0.000000, titleLabel.y=0.000000, titleLabel.width=180.500000, titleLabel.height=21.500000

可以看到,imageView和titleLabel两者是有可能重叠的,并且titleLabel的x值确实是imageView的宽度。

3、使imageView和titleLabel都居中:

使用以下语句来实现这种情况:

    [btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-btn.imageView.bounds.size.width)*0.5, 0, 0)];
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(btn.imageView.bounds.size.height, (btn.bounds.size.width-btn.titleLabel.bounds.size.width)*0.5-btn.imageView.bounds.size.width, 0, 0)];

此时按钮的显示情况和坐标情况如下:

imageView.x=112.500000, imageView.y=0.000000, imageView.width=150.000000, imageView.height=150.000000
titleLabel.x=97.250000, titleLabel.y=150.000000, titleLabel.width=180.500000, titleLabel.height=21.500000

此时一切正常,符合猜想。

4、这时如果imageView的尺寸被压缩:

使用以下语句来将imageView压缩成100x100:

#define kImageWidth 100.
    [btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-kImageWidth)*0.5, btn.bounds.size.height-kImageWidth, (btn.bounds.size.width-kImageWidth)*0.5)];
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(btn.imageView.bounds.size.height, (btn.bounds.size.width-btn.titleLabel.bounds.size.width)*0.5-btn.imageView.bounds.size.width, 0, 0)];

此时按钮的显示情况和坐标情况如下:

imageView.x=137.500000, imageView.y=0.000000, imageView.width=100.000000, imageView.height=100.000000
titleLabel.x=147.250000, titleLabel.y=100.000000, titleLabel.width=180.500000, titleLabel.height=21.500000

可以发现,问题出现了,此时titleLabel在水平方向上不再居中了。但是我们同时可以发现,titleLabel在垂直方向上的位置仍然是正确的,并且可以看到titleLabel.y=100。这说明在使用了setImageEdgeInsets:方法后,imageView的尺寸会被改变。

那么为何titleLabel在水平方向上还会偏移呢?原因是这样的,我们一直把titleLabel的初始x值和imageView的宽度等同看待了。而在这里imageView的宽度变小了,但是titleLabel的初始x值仍然是等于缩小前的imageView的宽度的,我们却使用一个缩小后的imageView的宽度来代替titleLabel的初始x值,于是导致了偏移的出现。

要处理这种情况,有两种方法:

5、处理方法1,先定义titleLabel再定义imageView:

使用以下语句来实现这种情况:

#define kImageWidth 100.
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(kImageWidth, (btn.bounds.size.width-btn.titleLabel.bounds.size.width)*0.5-btn.imageView.bounds.size.width, 0, 0)];
    [btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-kImageWidth)*0.5, btn.bounds.size.height-kImageWidth, (btn.bounds.size.width-kImageWidth)*0.5)];

此时按钮的显示情况和坐标情况如下:

imageView.x=137.500000, imageView.y=0.000000, imageView.width=100.000000, imageView.height=100.000000
titleLabel.x=97.250000, titleLabel.y=100.000000, titleLabel.width=180.500000, titleLabel.height=21.500000

由于titleLabel在imageView被压缩前就使用了它的宽度来定位,所以能准确定位,也不会被之后的imageView压缩所影响。

6、处理方法2,先将imageView形变前的宽度记录下来:

使用以下语句来实现这种情况:

#define kImageWidth 100.
    CGFloat imageWidth = btn.imageView.bounds.size.width;
    [btn setImageEdgeInsets: UIEdgeInsetsMake(0, (btn.bounds.size.width-kImageWidth)*0.5, btn.bounds.size.height-kImageWidth, (btn.bounds.size.width-kImageWidth)*0.5)];
    [btn setTitleEdgeInsets: UIEdgeInsetsMake(btn.imageView.bounds.size.height, (btn.bounds.size.width-btn.titleLabel.bounds.size.width)*0.5-imageWidth, 0, 0)];

此时按钮的显示情况和坐标情况如下:

imageView.x=137.500000, imageView.y=0.000000, imageView.width=100.000000, imageView.height=100.000000
titleLabel.x=97.250000, titleLabel.y=100.000000, titleLabel.width=180.500000, titleLabel.height=21.500000

先将imageView的宽度记录下来,用作titleLabel的初始x值,那么之后imageView的压缩就不会再影响到这个值了。

7、另外,如果想将imageView放大,比如将imageView的宽度定为180,那么会有以下情况:

imageView.x=97.500000, imageView.y=0.000000, imageView.width=150.000000, imageView.height=150.000000
titleLabel.x=97.250000, titleLabel.y=150.000000, titleLabel.width=180.500000, titleLabel.height=21.500000

可以发现,imageView的尺寸还是150x150,并没有没放大,反而imageView的居中受到了影响,产生偏移了。

8、经过上面的测试,可以得到以下结论:

(1)、在UIButton中,titleLabel的初始x值是imageView的宽度;

(2)、imageView可以被压缩;

(3)、当imageView被压缩后,imageView的宽度会变小,此时就不可以再用imageView的宽度来代替titleLabel的初始x值来调整位置了;

(4)、imageView不可以被放大。

时间: 2024-12-29 12:38:41

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

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如何正确调整imageView及titleLabel的位置

    一些开发者知道通过imageEdgeInsets及titleEdgeInsets 可以调整imageView及titleLabel的位置,但不知道如何正确计算,基本上都是通过多次调整相应的值达到期望的目标(次数过多可能会失去信 心),究其原因就是不能正确理解imageEdgeInsets及titleEdgeInsets. 下面步入主题. 如果button的bounds足够大(宽度至少是imageView宽度与titleLabel宽度之和,高度至少为imageView高度与titleLab

iOS 中UIButton的 settitle 和 titlelabel的使用误区

UIButton中设置Titl方法包括以下几种: - (void)setTitle:(NSString *)title forState:(UIControlState)state; - (void)setAttributedTitle:(NSAttributedString *)title forState:(UIControlState)state @property(nonatomic,readonly,retain) NSString *currentTitle; @property(n

(一〇九)UIButton的使用技巧 -imageView、titleLabel、圆角等

UIButton是一个常用控件,使用方法十分基本,但是有很多技巧常常不被注意,本文主要介绍UIButton的一些较高级技巧,用于实现图片和标签显示的美观性等. 开发时常常碰到按钮的下侧或者右侧有标题的情况,如下图所示:   左侧的是上下结构,右侧的是左右结构,要实现这两种显示,有两种方法. [按钮的内部控件] 首先我们要了解按钮内部有imageView和titleLabel两个控件,按钮的内边距分为content(整体).title(标题).image(图片)三个,因此对于水平排布,可以通过内边

UIButton中的**EdgeInsets是做什么用的?

UIButton中的**EdgeInsets是做什么用的? UIEdgeInsetsMake Creates an edge inset for a button or view.An inset is a margin around the drawing rectangle where each side (left, right, top, and bottom) can have a different value. 给一个button或者view创建一个嵌入的边缘. inset是一个矩

UIButton中的三个UIEdgeInsets属性

接着昨天的 UIButton中的三个UIEdgeInsets属性 ,今天我们具体谈谈UIButton的contentEdgeInsets.titleEdgeInsets.imageEdgeInsets属性. 创建UIButton UIButton *button = [[UIButton alloc] init];button.frame = CGRectMake(50, 200, 200, 50);[button setTitle:@"我是UIButton" forState:UIC

DataGridView控件选中单元格、直接在控件中修改信息

                                                           原文取自个人博客:www.jycoder.com欢迎访问 一,获取DataGridView控件中的当前单元格 若要与DataGridView进行交互,通常要求用编程的方式发现哪个单元格出于活动状态.如果需要更改单元格,可通过DataGridView控件的CurrentCell属性来获取当前单元格的信息: 语法如下: Public DataGridViewCell CurrentC

《MySQL必知必会》中创建触发器代码的“错误”

<MySQL必知必会>中使用触发器一章中的创建触发器的代码在MySQL5.7.20中报错:ERROR 1415 (0A000): Not allowed to return a result set from a trigger. 因为我不知道这是不是版本问题,所以给错误打上了双引号. 这是书中的原话: 报错:触发器不能返回结果集 网上查资料看到,可以将字符串赋给变量 原文地址:https://www.cnblogs.com/yxqxx/p/8963382.html

如何过滤出已知当前目录下oldboy中的所有一级目录

第1章 linux启动过程 1.1 linux启动过程(1) 开机自检(BIOS)内存cup是否有问题(硬件检查)(2) MBR引导(3) GRUB菜单(选择不同的内核)(4) 加载内核(kernel)(5) 运行init进程(linux里面的第一个进程,初始化过程)(6) 读取/etc/inittab配置文件(运行级别配置文件)(7) 执行/etc/rc.d/rc.sysinit脚本(系统初始化脚本,设置主机名,设置IP地址)(8) 执行/etc/rc.d/rc脚本(根据系统的云心级别,再开机