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,而且imageEdgeInsets也是类似,都没有讲怎么设。事实上,这两个东西是有联系的,常常会造成困惑:我只设了其中一个的edgeInsets,为什么button上的图片和文字布局都变了?

  这里是一个同事花一个下午的时间,专门写一段button的代码,分析数据,总结出来的小规律,并不权威,但是挺好用的,总结出来分享一下。

默认情况下,imageEdgeInsets和titleEdgeInsets都是0。先不考虑height,

  if (button.width小于imageView上image的width){图像会被压缩,文字不显示}

if (button.width < imageView.width + label.width){图像正常显示,文字显示不全}

if (button.width >= imageView.width + label.width){图像和文字都居中显示,imageView在左,label在右,中间没有空隙}

  实际app应用中,通常会已知如下参数,布局button

  button的width:BUTTON_WIDTH

  button上控件imageView的的图片为image

  label上的文字为:@“这是一个测试”

  为了不看着头疼,不写那么多的常量了,以具体的数字来举例吧,我们想让imageView在前,label在后,居中显示,imageView在button上离左边界至少为距离10,label离button右边界为距离为至少为10,imageView和label之间的距离为5,代码可以如下写:

  NSString *title = @"这是一个测试";

    [button setTitle:title forState:UIControlStateNormal];

    [button setImage:image forState:UIControlStateNormal];

  CGSize strSize = [title sizeWithFont:button.titleLabel.font];

   CGFloat totalLen = strSize.width + 5 + image.size.width;

  CGFloat edgeLen = (TAGS_BUTTON_WIDTH - totalLen) / 2;

   if (edgeLen < 10) {

  edgeLen = 10;

  }

    [button setImageEdgeInsets:UIEdgeInsetsMake(0, edgeLen, 0, edgeLen + 5)];

   [button setTitleEdgeInsets:UIEdgeInsetsMake(0, edgeLen + 5, 0, edgeLen)];

设置edgeInsets要始终记住的一个原则是:将label和imageView看成一个整体,imageView在前,label在后,中间没有空隙。。这段代码中,设置imageEdgeInsets时,imageView与左边距离为计算好的edgeLen,右边距是按照button的默认布局,label的右边与button右边的距离,就是label实际的右边应当与button右边的距离再向左移动5(实际中imageView与label有间距5,默认布局下可没有这个5,得把这个5让出来),就是edgeLen + 5。设置titleEdgeInset时,label与右边为计算好的edgeLen,想象imageView还在label的左边,与label没有空隙的话,那这个整体与左边的距离应该是多少呢?就是edgeLen+5,把间隙的5让出来嘛。

   我们再想一个稍复杂的情况:如果label在左,imageView在右,imageView在button上离右边界为固定值10,label离button左边界也为固定值10,应该怎么设呢?可以如下写代码:

  NSString *title = @"这是一个测试";

    [button setTitle:title forState:UIControlStateNormal];

    [button setImage:image forState:UIControlStateNormal];

  CGSize strSize = [title sizeWithFont:button.titleLabel.font];

   [button setImageEdgeInsets:UIEdgeInsetsMake(0, BUTTON_WIDTH - 10 - image.size.width, 0, (10 - strSize.width))];

  CGFloat titleRightInset = BUTTON_WIDTH - 10 - strSize.width;

  if (titleRightInset < 10 + image.size.width) {

  titleRightInset = 10 + image.size.width;

  }

  [button setTitleEdgeInsets:UIEdgeInsetsMake(0, (10 - image.size.width), 0, titleRightInset)];

      解释这段代码之前再强调一下UIButton控件的默认布局:imageView在左,label在右,中间没有空隙。imageView的左侧与button的左边界距离为button的width,去掉右侧留出的10,再去掉imageView的width,想像imageView后面还接着有一个label,那么label的右侧与button的右边界距离为10 - strSize.width,所以button的imageEdgeInsets属性就如上面代码的设置值了。再看label,它的右侧与button右边界的距离为button的width,去掉左侧留出的10,再去掉label的width,为保证label后面能放下一个图片,图片后面还有10的空白,故对titleRightInset做了如上的一些调整。想象label的左侧还有一个imageView,那么这个整体离button左边界的距离为10 - image.size.width。

    以上只考虑了width方向,height方向与width是独立的,比width更容易一些。

    设button的height:BUTTON_HEIGHT,如果imageView在上,与button上边界距离为10,label在下,与button下边界距离为10,可写如下代码。

  NSString *title = @"这是一个测试";

    [button setTitle:title forState:UIControlStateNormal];

    [button setImage:image forState:UIControlStateNormal];

   [button setImageEdgeInsets:UIEdgeInsetsMake(10, 0, BUTTON_HEIGHT - 10 - image.size.height , 0)];

  [button setTitleEdgeInsets:UIEdgeInsetsMake(BUTTON_HEIGHT - 10 - button.titleLabel.frame.size.height, 0, 10, 0)];

   可以看到height方向上,imageView与label独立变化,不用考虑彼此。

时间: 2024-11-06 07:40:41

UIButton的titleEdgeInsets和imageEdgeInsets属性的相关文章

iOS中UIButton的titleEdgeInsets和imageEdgeInsets

默认状态下,UIButton的imageView和titleLabel之间没有间距,而且两个作为整体,居中显示. 设置button的titleEdgeInsets和imageEdgeInsets不是根据按钮的上下左右边距,而是根据titleLabel和imageView的当前位置决定的, 但是在测试的过程中又发现问题,比如 CGFloat topMargin = 50;self.btnTest.imageEdgeInsets = UIEdgeInsetsMake(topMargin, 0, 0,

用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的第二个答案,关键是这个: 这里说说我自己的理解,理解有误的地方,大家可以讨论 前提:这

UIButton的几个常见属性

#import "AppDelegate.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // 创建window self.window = [[UIWindow alloc] initWit

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

UIButton的imageEdgeInsets 和 titleEdgeInsets

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

UIButton 解析

IOS之按钮控件--Button全解析及使用 转载自:forget IOS开发中伴随我们始终的 最常用的几个空间之一 -- UIButton 按钮,对于button今天在此做一些浅析,并介绍下主流用法以及常见问题解决办法. 首先是继承问题,UIButton继承于UIControl,而UIControl继承于UIView. 那么UIButton自然继承了UIView的属性.比如frame,layer等 至于UIButton的创建 UIButton *button = [UIButton butto

iOS UIButton 设置图片文字垂直排列

在实际的iOS项目开发中,我们经常需要改变系统的控件的样式,自己定义一个,同样的当我们发现系统自带的某些方法不好使时,我们也会想到重写这个方法. 本文主要记录笔者设置UIButton图片文字垂直排列的方法,最终解决了在图片和文字垂直排列的情况下,如果文字长度变化会导致图片位置变动的问题,对 于此问题网上有比较多的做法,我就不多说了,在此记录这点细节仅为加深印象并方便以后查阅.如有纰漏还请见谅 方案一:通过调整按钮图片和文字的内边距 UIEdgeInsets typedef struct UIEd

IOS-button属性edge

IOS中UIButton 的内容,标题,背景在button容器的相对位子的设置 UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];//button的类型    button.frame = CGRectMake(100, 100,90, 90);//button的frame    button.backgroundColor = [UIColor cyanColor];//button的背景颜色    //    [b

UIkit框架之UIbutton的使用

1.UIbutton的继承关系:UIcontroller:UIview:UIresponder:NSObject: 2.添加按钮的步骤: (1)创建按钮的时候首先设置类型 (2)添加标题或者图片,设置大小来适合按钮内的内容 (3)为这个按钮链接一个或者多个动作方法 (4)在界面设置按钮的布局来控制它的大小,位置 (5)提供有用的信息和局部字符串 3.按钮的类型有: (1)UIButtonTypeCustom(没有按钮类型), (2) UIButtonTypeSystem(圆角矩形), (3)UI