UIButton如何正确调整imageView及titleLabel的位置

   

一些开发者知道通过imageEdgeInsets及titleEdgeInsets 可以调整imageView及titleLabel的位置,但不知道如何正确计算,基本上都是通过多次调整相应的值达到期望的目标(次数过多可能会失去信 心),究其原因就是不能正确理解imageEdgeInsets及titleEdgeInsets.

下面步入主题.

如果button的bounds足够大(宽度至少是imageView宽度与titleLabel宽度之和,高度至少为imageView高度与titleLabel高度中的最大值),那么就可以同时显示imageView及titleLabel,如下图:

如果,想要得到imageView及titleLabel都居中显示,且要达到imageView在上,titleLabel在下的效果(通过设置imageView及titleLabel的frame是无法达到这样的效果的),如下图:

此时,button的bounds也要足够大(宽度至少是imageView宽度与titleLabel宽度之和,高度至少为imageView高度与titleLabel高度之和),并且,需要修改button的imageEdgeInsets及titleEdgeInsets.可参考下面的代码:

//
这里的图片,必须有Xcode.png及[email protected],便于得到正确的以设备点为单位的宽度及高度

 UIImage *buttonImage =
[UIImage imageNamed:@"Xcode"];

 CGFloat
buttonImageViewWidth =
CGImageGetWidth(buttonImage.CGImage);

 CGFloat
buttonImageViewHeight =
CGImageGetWidth(buttonImage.CGImage);

 if ([UIScreen
mainScreen].scale == 2.0f) {// iOS 4.0+

   
 buttonImageViewWidth *=
0.5f;

   
 buttonImageViewHeight *=
0.5f;

 }

 NSString *buttonTitle =
@"中华人民共和国";

 UIFont *buttonTitleFont =
[UIFont systemFontOfSize:17.0f];

 CGSize
buttonTitleLabelSize = [buttonTitle
sizeWithFont:buttonTitleFont];

 //
button宽度,至少为imageView宽度与titleLabel宽度之和

 CGFloat buttonWidth =
buttonImageViewWidth +
buttonTitleLabelSize.width;

 //
button高度,至少为imageView高度与titleLabel高度之和

 CGFloat buttonHeight =
buttonImageViewHeight +
buttonTitleLabelSize.height;

 

 UIButton *b = [[UIButton
alloc] init];

 [b
setCenter:CGPointMake(160, 160)];

 [b
setBounds:CGRectMake(0, 0, buttonWidth,
buttonHeight)];

 [b.titleLabel
setFont:buttonTitleFont];

 [b
setBackgroundColor:[UIColor redColor]];

 

 [b setImage:buttonImage
forState:UIControlStateNormal];

 [b.imageView
setBackgroundColor:[UIColor greenColor]];

 

 [b setTitle:buttonTitle
forState:UIControlStateNormal];

 [b setTitleColor:[UIColor
blackColor] forState:UIControlStateNormal];

 [b setTitleColor:[UIColor
scrollViewTexturedBackgroundColor]
forState:UIControlStateHighlighted];

 [b.titleLabel
setBackgroundColor:[UIColor whiteColor]];

 

 [self.view
addSubview:b];

 

 CGPoint
buttonBoundsCenter = CGPointMake(CGRectGetMidX(b.bounds),
CGRectGetMidY(b.bounds));

 //
找出imageView最终的center

 CGPoint
endImageViewCenter = CGPointMake(buttonBoundsCenter.x,
CGRectGetMidY(b.imageView.bounds));

 //
找出titleLabel最终的center

 CGPoint
endTitleLabelCenter = CGPointMake(buttonBoundsCenter.x,
CGRectGetHeight(b.bounds)-CGRectGetMidY(b.titleLabel.bounds));

 //
取得imageView最初的center

 CGPoint
startImageViewCenter = b.imageView.center;

 //
取得titleLabel最初的center

 CGPoint
startTitleLabelCenter = b.titleLabel.center;

 //
设置imageEdgeInsets

 CGFloat
imageEdgeInsetsTop = endImageViewCenter.y -
startImageViewCenter.y;

 CGFloat
imageEdgeInsetsLeft = endImageViewCenter.x -
startImageViewCenter.x;

 CGFloat
imageEdgeInsetsBottom = -imageEdgeInsetsTop;

 CGFloat
imageEdgeInsetsRight = -imageEdgeInsetsLeft;

 b.imageEdgeInsets =
UIEdgeInsetsMake(imageEdgeInsetsTop, imageEdgeInsetsLeft,
imageEdgeInsetsBottom, imageEdgeInsetsRight);

 //
设置titleEdgeInsets

 CGFloat
titleEdgeInsetsTop =
endTitleLabelCenter.y-startTitleLabelCenter.y;

 CGFloat
titleEdgeInsetsLeft = endTitleLabelCenter.x -
startTitleLabelCenter.x;

 CGFloat
titleEdgeInsetsBottom = -titleEdgeInsetsTop;

 CGFloat
titleEdgeInsetsRight = -titleEdgeInsetsLeft;

 b.titleEdgeInsets =
UIEdgeInsetsMake(titleEdgeInsetsTop, titleEdgeInsetsLeft,
titleEdgeInsetsBottom, titleEdgeInsetsRight);

 [b
release];

时间: 2024-12-24 19:57:45

UIButton如何正确调整imageView及titleLabel的位置的相关文章

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

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

格而知之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

iOS UITableViewCell 中 调整imageView 的图片大小

在我的项目中,很多地方都希望将UITableViewCell 中的imageView 能根据自己图片的大小来进行展示,而就为了解决这个问题又觉得重写UITableViewCell 很不值得. 如下: : 其实我就只有 图片变形的问题.所以我第一时间想到的是调整imageView 内容布局模式以及外框大小 cell.imageView.contentMode=UIViewContentModeCenter; cell.imageView.frame=.... 另外如: cell.imageView

“未能加载文件或程序集file:///E:/MoneySet.dll或它的某一个依赖项,试图加载格式不正确的程序,行203,位置5. 文件:MReportSet.resx”,

http://bbs.csdn.net/topics/390334265 "未能加载文件或程序集file:///E:/MoneySet.dll或它的某一个依赖项,试图加载格式不正确的程序,行203,位置5. 文件:MReportSet.resx",

VB6之调整任务栏按钮的位置

好无聊,睡前一更~ XP的任务栏没办法像win7那样随意拖动交换顺序,偶觉不爽,遂写程序搞之.这个不算什么新东西,参考了很多别人写的东东. 程序启动后,会在右下角托盘区显示钢铁侠的图标.右键击之,可选择退出程序全局范围内,使用快捷键Ctrl+方向键左(或者右)即可调整任务栏的按钮(即程序)的位置. 由于我在调试的时候使用了很多debug.print,觉得有碍观瞻的童鞋可以删除之.点我下载源文件! 有图才有真相: 这里仅贴出主要实现的模块: 1 '主要实现模块 2 'code by [email 

关于添加图片到svg中,rails下使用js, 用parseFloat来调整force.on时的位置

注意在代码中用/表示路径...windows中file才是\ 1.<image xlink:href=<%= asset_path 'vnet/virtual_switch.png' %> x="0" y="0" height="30px" width="30px"/> (1)在html中科院直接用嵌入式的方式获得rails中的图片.比如这里的图片放在\app\assets\images\vnet\vi

/调整button的title的位置

[bottomButton setTitleEdgeInsets:UIEdgeInsetsMake(10, -190, 10, 44)];  //上左下右            ||button.contentVerticalAlignment = UIControlContentVerticalAlignmentBottom;button. contentHorizontalAlignment =UIControlContentHorizontalAlignmentLeft;

如何让 UITableViewCell 中的 imageView 大小固定

UITableView可以算是使用频率最高的组件之一的,在开发过程中经常需要展示一些简单的信息列表常见列表布局 如图,很多页面其实就是这种展示结果,通常需要imageView,textLabel,detailTextlabel,而UITableViewCell本身提供了方便的自动布局(当有图片和没图片时,textLabel和detailLabel的位置会左右自动调整). 但是图片的大小却是没有办法固定的(直接设置imageView.frame是无法固定imageView的大小的),那么一般来说解