格而知之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不可以被放大。
格而知之1:UIButton中imageView和titleLabel的位置调整的更多相关文章
- ios开发之--UIButton中imageView和titleLabel的位置调整
在使用UIButton时,有时候需要调整按钮内部的imageView和titleLabel的位置和尺寸.在默认情况下,按钮内部的imageView和titleLabel的显示效果是图片在左文字在右,然 ...
- iOS学习-UIButton的imageView和titleLabel
UIButton的imageView和titleLabel的位置设置通过setImageEdgeInsets和setTitleEdgeInsets来设置 参考:http://blog.csdn.net ...
- iOS 对UIButton的imageView和titleLabel进行重新布局
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...
- 微信小程序开发日记——高仿知乎日报(中)
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...
- DS Tree 已知后序、中序 => 建树 => 求先序
注意点: 和上一篇的DS Tree 已知先序.中序 => 建树 => 求后序差不多,注意的地方是在aftorder中找根节点的时候,是从右往左找,因此递归的时候注意参数,最好是拿纸和笔模拟 ...
- iOS 中UIButton的 settitle 和 titlelabel的使用误区
UIButton中设置Titl方法包括以下几种: - (void)setTitle:(NSString *)title forState:(UIControlState)state; - (void) ...
- (一〇九)UIButton的使用技巧 -imageView、titleLabel、圆角等
UIButton是一个常用控件,使用方法十分基本,但是有很多技巧常常不被注意,本文主要介绍UIButton的一些较高级技巧,用于实现图片和标签显示的美观性等. 开发时常常碰到按钮的下侧或者右侧有标题的 ...
- android中ImageView的ScaleType属性
android中ImageView的ScaleType属性 ScaleType的值分别代表的意义: ImageView是Android中的基础图片显示控件,该控件有个重要的属性是ScaleType,该 ...
- UIButton中的**EdgeInsets是做什么用的?
UIButton中的**EdgeInsets是做什么用的? UIEdgeInsetsMake Creates an edge inset for a button or view.An inset i ...
随机推荐
- LeeCode-Same Tree
Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...
- express设置ejs并将后缀改为html
http://www.cnblogs.com/-nothing-/p/4943354.html http://blog.csdn.net/macyang/article/details/8841966 ...
- UVA - 10129 Play on Words(欧拉回路+并查集)
2.解题思路:本题利用欧拉回路存在条件解决.可以将所有的单词看做边,26个字母看做端点,那么本题其实就是问是否存在一条路径,可以到达所有出现过的字符端点.由于本题还要求了两个单词拼在一起的条件是前一个 ...
- SQL Server 数据库定时自动备份【转】
在SQL Server中出于数据安全的考虑,所以需要定期的备份数据库.而备份数据库一般又是在凌晨时间基本没有数据库操作的时候进行,所以我们不可能要求管理员每天守到晚上1点去备份数据库.要实现数据库的定 ...
- serialVersionUID作用
serialVersionUID适用于Java的序列化机制.简单来说,Java的序列化机制是通过判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的 ...
- Spring的MethodInvokingFactoryBean
通过MethodInvokingFactoryBean 可以向某静态方法注入参数. 如: <bean class="org.springframework.beans.factory. ...
- Longest Palindromic Substring-----最长回文子串
首先讲讲什么是回文, 看看Wiki是怎么说的:回文,亦称回环,是正读反读都能读通的句子.亦有将文字排列成圆圈者,是一种修辞方式和文字游戏.回环运用得当.能够表现两种事物或现象相互依靠或排斥的关系, 比 ...
- Android Studio虚拟机配置虚拟键盘
1. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY2pjMjExMzIy/font/5a6L5L2T/fontsize/400/fill/I0JBQkF ...
- 2014年百度之星资格赛第三题Xor Sum
Problem Description Zeus 和 Prometheus 做了一个游戏,Prometheus 给 Zeus 一个集合,集合中包括了N个正整数,随后 Prometheus 将向 Zeu ...
- <源代码>FTPclient追加方式上传自己定义信息
实现功能:向FTPserver以追加方式上传自己定义信息(例程中为:2014-10-08 13:47:15 test.) 源代码下载(免积分):http://download.csdn.net/det ...