用UIButton的titleEdgeInsets属性和 imageEdgeInsets属性实现图片文字按要求排列

button可以设置 titleEdgeInsets属性和 imageEdgeInsets属性来调整其image和label相对位置,具体参考http://stackoverflow.com/questions/4564621/aligning-text-and-image-on-uibutton-with-imageedgeinsets-and-titleedgeinsets/5358259#5358259的第二个答案,关键是这个:

这里说说我自己的理解,理解有误的地方,大家可以讨论

前提:这是在button的frame足够显示image和label内容的情况下,如果frame不够,图片或者文字会被压缩(demo的button是xib上画的,所以大小刚刚好)

前置知识点:titleEdgeInsets是title相对于其上下左右的inset,跟tableView的contentInset是类似的,

如果只有title,那它上下左右都是相对于button的,image也是一样;

如果同时有image和label,那这时候image的上左下是相对于button,右边是相对于label的;title的上右下是相对于button,左边是相对于image的。

我写了个demo来说明怎么设置这两个属性以达到自己想要的效果:https://github.com/Phelthas/Demo_ButtonImageTitleEdgeInsets

看效果图来说明一下:

其中,右边的是给对应的左边的button及button.imageView, button.titleLabel加上边框的效果

默认情况下,button的image和label是紧贴着居中的,

那如果想要image在右边,label在左边应该怎么办呢?

答案就是:

self.oneButton.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0, -labelWidth);

self.oneButton.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWith, 0, imageWith);

来解释一下为什么:

其实就是这一句:This property is used only for positioning the image during layout

其实titleEdgeInsets属性和 imageEdgeInsets属性只是在画这个button出来的时候用来调整image和label位置的属性,并不影响button本身的大小(这个看第三排的图比较明显),

它们只是image和button相较于原来位置的偏移量,那什么是原来的位置呢?就是这个没有设置edgeInset时候的位置了。

如要要image在右边,label在左边,那image的左边相对于button的左边右移了labelWidth的距离,image的右边相对于label的左边右移了labelWidth的距离

所以,self.oneButton.imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth, 0, -labelWidth);为什么是负值呢?因为这是contentInset,是偏移量,不是距离

同样的,label的右边相对于button的右边左移了imageWith的距离,label的左边相对于image的右边左移了imageWith的距离

所以self.oneButton.titleEdgeInsets = UIEdgeInsetsMake(0, -imageWith, 0, imageWith);

这样就完成image在右边,label在左边的效果了。

第三排,image在上,label在下

同样的第三排调整前的还是第一排的样子,

跟第一排比起来,image的中心位置向右移动了 CGFloat imageOffsetX = (imageWith + labelWidth) / 2 - imageWith / 2;

上向上移动了 CGFloat imageOffsetY = imageHeight / 2;

所以self.twoButton.imageEdgeInsets = UIEdgeInsetsMake(-imageOffsetY, imageOffsetX, imageOffsetY, -imageOffsetX);

label的中心位置像左移动了CGFloat labelOffsetX = (imageWith + labelWidth / 2) - (imageWith + labelWidth) / 2;

向下移动了CGFloat labelOffsetY = labelHeight / 2;

所以self.twoButton.titleEdgeInsets = UIEdgeInsetsMake(labelOffsetY, -labelOffsetX, -labelOffsetY, labelOffsetX);

然后就大功告成了,现在已经完美实现一个button内image在上,label在下,切居中了

时间: 2024-08-05 11:08:48

用UIButton的titleEdgeInsets属性和 imageEdgeInsets属性实现图片文字按要求排列的相关文章

UIButton的titleEdgeInsets和imageEdgeInsets属性

转:http://www.cnblogs.com/huichun/p/3419596.html uiButton控件上自带了一个uiLabel类型的子控件和一个uiImageView类型的子控件,如果可以正确使用他们的edgeInsets属性,就能把button设置成我们想要的样子. 关于titleEdgeInsets,苹果文档的解释是:The inset or outset margins for the rectangle around the button’s title text,而且i

iOS UIButton同时设置title和image属性

在iOS开发中,使用UIButton设置title和image,达到tabBarItem的效果,即title在下,image在上: 目前,我发现有两种比较好的方法: 方法一,使用UIEdgeInsets UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; [button setFrame:CGRectMake(100, 100, 60, 60)]; [button setBackgroundColor:[UIColor

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

Hibernate inverse属性与cascade属性

理解: inverse属性为false的那一端,拥有管理关系维护的权利 cascade属性指级联,说的通俗点,在cascade那端指定的操作,会影响到所关联的对象 举个例子: 班级和学生的关系是一对多 班级class类包含id,名称和学生的Set集合 学生student类包含id,姓名和班级的id(外键) cascade属性:学生是依赖班级存在的,班级不存在,那么学生也不存在.也就是说,删除班级的同时,学生也就得删除,而不能反过来.一的那端删除时,多的那方已经没有意义了:而多的那端删除时,并不能

重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性

[源码下载] 重新想象 Windows 8.1 Store Apps (77) - 控件增强: 文本类控件的增强, 部分控件增加了 Header 属性和 HeaderTemplate 属性, 部分控件增加了 PlaceholderText 属性 作者:webabcd介绍重新想象 Windows 8.1 Store Apps 之控件增强 文本类控件的增强 为一些控件增加了 Header 属性和 HeaderTemplate 属性 为一些控件增加了 PlaceholderText 属性 示例1.演示

38属性的种种,只读只写属性、自动属性、静态属性、抽象属性、接口属性

□ 只读属性 public class Example {     string name;     public string Name     {         get {return name;}     } } □ 只写属性 public class Example {     string name;     public string Name     {         set {name = value;}     } } □ 可读可写属性 public class Examp

AngularJS的ng-repeat显示属性名和属性值

代码下载:https://files.cnblogs.com/files/xiandedanteng/AngularJSAuthorRepeat.rar 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="notesApp"> <

PHP.38-TP框架商城应用实例-后台15-商品属性与库存量1-不同商品(唯一属性、可选属性),属性类型

思路: 1.不同商品属于不同的类型,如:手机.服装.电脑等类型 2.不同的类型有不同的属性,其中分为唯一属性和可选属性,如服装:可选属性{尺寸:S,M,L--;颜色:白色,黑色--}唯一属性:材质 首先把类型与属性关联起来 1.建表 类型表{p39_type} drop table if exists p39_type; create table p39_type ( id mediumint unsigned not null auto_increment comment 'Id', type

python基础1-类属性和实例属性

类属性就是类对象所拥有的属性,它被所有类对象的实例对象所共有,在内存中只存在一个副本,这个和C++中类的静态成员变量有点类似.对于公有的类属性,在类外可以通过类对象和实例对象访问 类属性 class people: name = 'Tom' #公有的类属性 __age = 12 #私有的类属性 p = people() print p.name #正确 print people.name #正确 print p.__age #错误,不能在类外通过实例对象访问私有的类属性 print people