ios uibutton的titlelabel set title的方法文字怎么渲染成蓝色的了
点击联系发帖人
时间：2016-06-13 06:28
iOS UIButton 显示不同的字体颜色 - 简书
iOS UIButton 显示不同的字体颜色
- (void)viewDidLoad {
[super viewDidLoad];
NSString * aStr = @"交流群";
NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@",aStr]];
[str addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"Arial-BoldItalicMT" size:16.0] range:NSMakeRange(0,3)];
[str addAttribute:NSForegroundColorAttributeName value:[UIColor greenColor]range:NSMakeRange(0,3)];
UIButton * butn = [UIButton buttonWithType:UIButtonTypeCustom];
butn.backgroundColor = [UIColor orangeColor];
butn.frame = CGRectMake(100, 200, 200, 30);
[butn setAttributedTitle:str forState:UIControlStateNormal];
[butn addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:butn];
Others laugh at me too crazy, I know what I want帐号:密码:下次自动登录{url:/nForum/slist.json?uid=guest&root=list-section}{url:/nForum/nlist.json?uid=guest&root=list-section}
贴数:3&分页:酸菜面 健康品发信人: tgfbeta (有心为善虽善不爽 无心作恶虽恶不乏), 信区: MobileDev
标&&题: Re: [iOS 2] 怎么修改 UIButton 的文字？setTitle 不好使。。。
发信站: 水木社区 (Tue Nov 20 20:16:34 2012), 站内 && 调试一下，确定设置的时候你的button变量已经绑定到相应IBOutlet
【 在 easyweb (我的电脑) 的大作中提到: 】
: 看文档，貌似是：
: [self.xxxButton setTitle:@"XXX" forState:0]; //NOT WORK
: 但实际不好使。
: ...................
&& -- && ※ 来源:·水木社区 newsmth.net·[FROM: 221.218.165.*]
一只单眼皮一只双眼皮发信人: liuzhi (一只单眼皮一只双眼皮), 信区: MobileDev
标&&题: Re: [iOS 2] 怎么修改 UIButton 的文字？setTitle 不好使。。。
发信站: 水木社区 (Tue Nov 20 22:42:29 2012), 站内 && state应该是填个normal啥的
【 在 easyweb (我的电脑) 的大作中提到: 】
: 看文档，貌似是：
: [self.xxxButton setTitle:@"XXX" forState:0]; //NOT WORK
: 但实际不好使。
: ...................
My mother has killed me,
My father is eating me,
My brothers and sisters sit under the table,
Picking up bury them under the cold marble stones. &&&&&&&&&&&&&&&&&&&&&&&&&&&&-- Grimm's Fairy Tales &&&& ※ 来源:·水木社区 newsmth.net·[FROM: 211.99.222.*]
barry.z发信人: barrycug (barry.z), 信区: MobileDev
标&&题: Re: [iOS 2] 怎么修改 UIButton 的文字？setTitle 不好使。。。
发信站: 水木社区 (Wed Nov 21 08:55:39 2012), 站内 && 2楼说的有道理。。。
-- && ※ 来源:·水木社区 ·[FROM: 124.205.245.*]
文章数:3&分页:在开发的过程中经常会遇到需要在button中放置图片和文字，比如将图片放置在button左边，文字放置在右边。因为UIButton也是继承自UIView，因此可以像其它的view一样添加subView，
//创建button
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
// 创建imageview
UIImage *image = [UIImage imageNamed:@"yourImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(/*frame*/)];
[imageView setImage:image];
// 创建label
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(/*frame*/)];
[label setText:@"Your title"];
// 添加到button中
[button addSubview:label];
[button addSubview:imageView];
这种方法的好处是简单明了，但是其实在UIButton中已经包含了UIImageView，我们不需要在自己添加该imageView的。也可以采用如下的方法，但是该方法的在调整UI时比较不方便：
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = buttonR
[button setTitle:@"title" forState:UIControlStateNormal];
[button setImage:buttonImage forState:UIControlStateNormal];
button.imageEdgeInsets = UIEdgeInsetsMake(0.0, WIDTH(button.titleLabel) + 10.0, 0.0, 0.0);
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentL
对于这个问题，建议采用如下方方：
继承UIButton并重写两个函数：
-(CGRect) imageRectForContentRect:(CGRect)contentRect ；
&-(CGRect) titleRectForContentRect:(CGRect)contentRect；
这两个函数可以设置图片和文字的大小和位置.
#import &UIKit/UIKit.h&
@interface BottomButton: UIButton
- (CGRect)imageRectForContentRect:(CGRect)contentR- (CGRect)titleRectForContentRect:(CGRect)contentR
#import "BottomButton.h"
@implementation BottomButton
- (CGRect)imageRectForContentRect:(CGRect)contentRect
return CGRectMake(30, 9, kbuttonIconImageW, kbuttonIconImageH);//图片的位置大小
-(CGRect)titleRectForContentRect:(CGRect)contentRect
return CGRectMake(60, 9, kbuttonLabelW, kbuttonLabelH);//文本的位置大小
self.forwardBtn = [[BottomButton alloc] initWithFrame:CGRectMake(5,5 ,BottomButtonWidth ,BottomButtonHeight)];
[self.forwardBtn addTarget:self action:@selector(forwardButtonUpInsideAction) forControlEvents:UIControlEventTouchUpInside];
[self.forwardBtn setImage:[UIImage imageNamed:@"Forward.png"] forState:UIControlStateNormal];[self.forwardBtn setImage:[UIImage imageNamed:@"Forward_select.png"] forState:UIControlStateHighlighted];
[self.forwardBtn setTitleColor:labelFontColor forState:UIControlStateNormal];
[self.forwardBtn setTitleColor:RGBCOLOR(255, 160, 31) forState:UIControlStateHighlighted];
[self.forwardBtn setTitle:@"转发" forState:UIControlStateNormal ];
[self.forwardBtn.titleLabel setFont: [UIFont systemFontOfSize: BottomFontSize]];
[self addSubview:self.forwardBtn];
阅读(...) 评论()iOS的UIButton是一个非常常见而且常用的控件，我们一般用他来实现某个功能的提交以及选择操作。我们可以建立只有文字的Button，也可以建立只有图片的Button，具体的需求要看界面设计的具体情况。有时候我们希望应用的界面元素是丰富多彩的，有时候希望建立一个图文结合的控件来响应用户的手势操作，因此建立一个即有图片也有文字的按钮来实现功能，这个只需要分别调用UIButton的setTitle:forState:和setImage:forSate:两个方法就可以实现具有图片和文字功能的按钮。但是系统默认的图文结合的按钮布局是：图片在左边而文字在右边，而且整体水平和垂直居中。比如下面这个图文按钮：但是有的时候我们又希望图片在右边而文字在左边；或者图片在上边而文字在下面；或者图片在按钮的中间而文字在图片的下面等等，但我们又不想放弃使用按钮这个控件，这时候怎么办？ 事件总是能找到解决方法的， 有的人会先建立一个按钮控件铺在下面，而在上面分别覆盖一个UIImageView和UILabel来实现；而有的人则干脆在UIButton上建立一个UIImageView和UILabel两个子视图；而有的人则不会用UIButton来实现图文结合的功能。 前面说的几个方法看起来有效，也确实会解决问题，但缺点是代码量会增加，而且必须同时管理UIButton, UIImageView, UILabel这三个整体，如果哪天产品还希望有一个按钮按下高亮或者按下阴影效果时,你可能又要重新编写代码实现需求了。那么我们是否要放弃UIButton呢？答案是否定的，其实UIButton本身是可以支持各种图文结合的，既然UIButton上能同时显示图片和文字，那就可以肯定的说UIButton里面本身一定有一个UIImageView和UILabel8子视图。UIButton*本身就是一个复合控件，他分别提供了两个属性：
@property(nonatomic,readonly,retain)UILabel
*titleLabel NS_AVAILABLE_IOS(3_0);
@property(nonatomic,readonly,retain)UIImageView *imageView
NS_AVAILABLE_IOS(3_0);
需要注意的是这两个属性必须要调用完setTitle:forSate:和setImage:forSate:后才能获取到，否则有可能会返回nil。 其中的 titleLabel是用来保存文字的而imageView是用来保存图片的。那既然UIButton本身就带有一个图片控件和文本控件，那是不是我们只要分别通过调整子控件的frame值就能实现我们想要的图片文字的任何布局呢？ 答案是否定的。实验证明通过设置titleLabel、imageView的frame值根本不会改变按钮里面图片在左而文字在右的格局。 要想实现功能就必须使用另外两个属性：
@property(nonatomic)
UIEdgeInsets titleEdgeI
// default is UIEdgeInsetsZero
@property(nonatomic)
UIEdgeInsets imageEdgeI
// default is UIEdgeInsetsZero
这两个属性是分别用来调整按钮中文本的偏移缩进以及图片的偏移缩进的，他们都是一个UIEdgeInsets对象，默认的值都是0，也就是默认的值都是0的情况下按钮的图片和文字垂直居中，而且图片在左边文字在右边，而且图片文本整体水平居中。而我们则可以通过调整titleEdgeInsets和imageEdgeInsets的值来实现我们想要的任何图文布局的情况，甚至我们希望图片和文字之间还要保留一些间隔的情况。怎么调整？ 调整多少为最合适？
在调整之前我们先定义几个特定的变量值：
CGRect titleRect = titleLabel.
//文本控件在按钮中的frame值。
CGRect imageRect = imageView.
//图片控件在按钮中的frame值。
//用于指定文本和图片的间隔值。
CGFloat selfW
//按钮控件的宽度
CGFloat selfH
//按钮控件的高度
CGFloat totalHeight=titleRect.size.height+padding+imageRect.size.
//图文上下布局时所占用的总高度，注意这里也算上他们之间的间隔值padding
我们可以通过更改按钮的titleEdgeInsets和imageEdgeInsets的值调整文本和图片的位置。如果我们想往右移动20的话，那么就应该同时设置UIEdgeInsets的left=20, right=-20，而如果我们想往上移动20的话，那么就应该应该同时设置UIEdgeInsets的top=-20,bottom=20。下面我们就分别通过调整按钮的titleEdgeInsets和imageEdgeInsets的值来实现各种图文结合的效果：
一、图片在左，文字在右，整体居中，调整间距
这种方式是按钮默认的图文布局方式，因为要调整图片和文本的间距，所以只需要文本右移padding/2而图片左移padding/2值就可以了。设置的代码为：
titleEdgeInsets =UIEdgeInsetsMake(0,
padding/2,
-padding/2);
imageEdgeInsets = UIEdgeInsetsMake(0,
-padding/2,
padding/2);
二、图片在右，文字在左，整体居中
要实现这种布局只需要将文字往左偏移图片的宽度并且再往左偏移padding/2就可以了，而图片则只需要往右偏移文本的宽度并再往右偏移padding/2就可以了。设置的代码为：
titleEdgeInsets =UIEdgeInsetsMake(0,
-(imageRect.size.width + padding/2),
(imageRect.size.width + padding/2));
imageEdgeInsets =UIEdgeInsetsMake(0,
(titleRect.size.width+ padding/2),
-(titleRect.size.width+ padding/2));
三、图片在上，文字在下，整体居中
这种布局下当图片和文字要求垂直居中后，新的图片的顶部位置应该等于(selfHeight -
totalHeight)/2， 因此垂直需要偏移的值就是新的位置减去原来的位置imageRect.origin.y；而新的图片的水平中心点要等于selfWidth/2，而原来的图片的水平中心点等于imageRect.origin.x + imageRect.size.width/2，两者相减就是水平需要偏移的值。而新的文本的顶部位置应该等于新的图片的顶部位置(selfHeight - totalHeight)/2 + 图片的高度imageRect.size.height +
间隔padding ,因此垂直需要偏移的值就是新的顶部值减去原来的顶部位置titleRect.origin.y; 而新的文本的水平中心点也是selfWidth/2，而原来的文本的水平中心点是titleRect.origin.x + titleRect.size.width/2， 两者相减就是水平需要偏移的值，又因为默认的情况下当按钮比较小时会自动保留图片的尺寸和将文字部分缩小，因为当我们实现文字和图片上下布局时，需要将文字的区域扩展到整个按钮部分，否则将会缩小按钮的文字的宽度，因为按钮的宽度为selfWidth,而文字的默认宽度是titleRect.size.width,所以上面的实现将文本移到中间后还需要分别向两边进行拉伸(selfWith - titleRect.size.width)/2来保证文本填充满所有的按钮区域，在下面的各种样式中凡是文字和图片垂直居中的情况下都要考虑这种情况
设置的代码为：
titleEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-((selfHeight - totalHeight)/2 - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
四、图片在下，文字在上，整体居中
这种布局就是上面的文字和图片位置调换，因此设置代码为：
titleEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-((selfHeight - totalHeight)/2 - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
五、图片保持居中，而文字左右居中且顶部距离按钮顶部
这种方式要求图片在按钮中居中，而文字则要求左右居中而垂直方向位置则是距离按钮顶部的间隔值。 上面因为描述了水平居中的调整，因此这里就不介绍了，只介绍垂直方向的调整。 因为要求图片要垂直居中，因此不需要调整垂直偏移。而文本则要调整为距离顶部的间隔值，也就是新的文本的顶部值等于padding, 而原来顶部值是titleRect.origin.y，因此只需要偏移titleRect.origin.y - padding就可以了。设置代码为：
titleEdgeInsets =UIEdgeInsetsMake(-(titleRect.origin.y - padding),
(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
(titleRect.origin.y - padding),
-(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
六、图片保持居中，而文字水平居中且底部距离按钮底部
这种方式要求图片在按钮居中，而文字则要求左右居中而垂直方向的底部位置则是距离按钮底部的间隔值。图片的调整上面有介绍，而文字的水平调整上面也有说到，这里面只说文字的垂直调整。文字新的底部位置等于selfHeight - padding,
而旧的底部位置是titleRect.size.height + titleRect.origin.y， 因此要偏移的位置就是两者相减的值。代码的设置为：
titleEdgeInsets =UIEdgeInsetsMake((selfHeight - padding - titleRect.origin.y - titleRect.size.height),
(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-(selfHeight - padding - titleRect.origin.y - titleRect.size.height),
-(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
七、图片保持居中，而文字水平居中并且在图片的上面
这种方式要求图片在按钮居中，而文字则要求左右居中并且在垂直在图片的上面并保留出padding的间隔。 图片的偏移上面有说到，而文字的水平偏移上面也有说到，这里只说垂直偏移，文字新的底部位置等于图片的顶部位置 - padding
而文字老的底部位置等于titleRect.size.height + titleRect.origin.y, 因此两者的差值就是文字需要垂直偏移的值。代码设置为：
titleEdgeInsets =UIEdgeInsetsMake(-(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
-(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
八、图片保持居中，而文字水平居中并且在图片的下面
这种方式要求图片在按钮居中，而文字则要求左右居中并且垂直在图片的下面并保留出padding的间隔。图片的偏移上面有说到，而文字的水平偏移上面也有说到，这里只说垂直偏移，文字新的顶部位置等于imageRect.origin.y + imageRect.size.height + padding,
而文字老的顶部位置等于titleRect.origin.y，因此两者的差值就是文字需要垂直偏移的值。代码设置为：
titleEdgeInsets =UIEdgeInsetsMake((imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-(imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
-(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
九、图片在右，文字在左，距离按钮两边边距
在这种方式中，图片和文本都是垂直居中对齐，这部分是不需要调整的，而文本的左边则需要由原来的titleRect.origin.x移动到左边padding的位置，而图片的左边则需要由原来的imageRect.origin.x移动到selfWidth - padding - imageRect.size.width位置。因此代码设置为：
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(titleRect.origin.x - padding),
(titleRect.origin.x - padding));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - imageRect.origin.x - imageRect.size.width),
-(selfWidth - padding - imageRect.origin.x - imageRect.size.width));
十、图片在左，文字在右，距离按钮两边边距
这种方式中，图片和文字的垂直位置不需要调整，而只需要将图文的水平位置调整即可，而调整的方法和上面的相似，只是图片移到左边儿文字移到右边而已。代码设置为：
self.titleEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - titleRect.origin.x - titleRect.size.width),
-(selfWidth - padding - titleRect.origin.x - titleRect.size.width));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
-(imageRect.origin.x - padding),
(imageRect.origin.x - padding));
前面说的的十种图文结合样式，我想应该可以满足您的需求了，如果这些图文结合的样式还是无法满足您的需求时则您还是别用UIButton了。为了方便大家的使用，我把上面的图文结合样式整理成了一个UIButton的分类方法，大家可以直接拷贝使用：
UIButton+ImageTitleStyle.h
Created by 欧阳大哥 on 14-7-13.
/youngsoft
#import &UIKit/UIKit.h&
针对同时设置了Image和Title的场景时UIButton中的图片和文字的关系
typedef NS_ENUM(NSInteger, ButtonImageTitleStyle ) {
ButtonImageTitleStyleDefault = 0,
//图片在左，文字在右，整体居中。
ButtonImageTitleStyleLeft
//图片在左，文字在右，整体居中。
ButtonImageTitleStyleRight
//图片在右，文字在左，整体居中。
ButtonImageTitleStyleTop
//图片在上，文字在下，整体居中。
ButtonImageTitleStyleBottom
//图片在下，文字在上，整体居中。
ButtonImageTitleStyleCenterTop = 5,
//图片居中，文字在上距离按钮顶部。
ButtonImageTitleStyleCenterBottom = 6,
//图片居中，文字在下距离按钮底部。
ButtonImageTitleStyleCenterUp = 7,
//图片居中，文字在图片上面。
ButtonImageTitleStyleCenterDown = 8,
//图片居中，文字在图片下面。
ButtonImageTitleStyleRightLeft = 9,
//图片在右，文字在左，距离按钮两边边距
ButtonImageTitleStyleLeftRight = 10,
//图片在左，文字在右，距离按钮两边边距
@interface UIButton (ImageTitleStyle)
调整按钮的文本和image的布局，前提是title和image同时存在才会调整。
padding是调整布局时整个按钮和图文的间隔。
-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)
实现文件：
UIButton+ImageTitleStyle.m
Created by 欧阳大哥 on 14-7-13.
#import "UIButton+ImageTitleStyle.h"
@implementation UIButton (ImageTitleStyle)
-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding
if (self.imageView.image != nil && self.titleLabel.text != nil)
self.titleEdgeInsets = UIEdgeInsetsZ
self.imageEdgeInsets = UIEdgeInsetsZ
CGRect imageRect = self.imageView.
CGRect titleRect = self.titleLabel.
CGFloat totalHeight = imageRect.size.height + padding + titleRect.size.
CGFloat selfHeight = self.frame.size.
CGFloat selfWidth = self.frame.size.
switch (style) {
case ButtonImageTitleStyleLeft:
if (padding != 0)
self.titleEdgeInsets = UIEdgeInsetsMake(0,
padding/2,
-padding/2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
-padding/2,
padding/2);
case ButtonImageTitleStyleRight:
//图片在右，文字在左
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(imageRect.size.width + padding/2),
(imageRect.size.width + padding/2));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(titleRect.size.width+ padding/2),
-(titleRect.size.width+ padding/2));
case ButtonImageTitleStyleTop:
//图片在上，文字在下
self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2,
-((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
-((selfHeight - totalHeight)/2 - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleBottom:
//图片在下，文字在上。
self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
-((selfHeight - totalHeight)/2 - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
-((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleCenterTop:
self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y - padding),
(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
(titleRect.origin.y - padding),
-(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleCenterBottom:
self.titleEdgeInsets = UIEdgeInsetsMake((selfHeight - padding - titleRect.origin.y - titleRect.size.height),
(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
-(selfHeight - padding - titleRect.origin.y - titleRect.size.height),
-(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleCenterUp:
self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
-(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleCenterDown:
self.titleEdgeInsets = UIEdgeInsetsMake((imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
-(imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
-(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleRightLeft:
//图片在右，文字在左，距离按钮两边边距
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(titleRect.origin.x - padding),
(titleRect.origin.x - padding));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - imageRect.origin.x - imageRect.size.width),
-(selfWidth - padding - imageRect.origin.x - imageRect.size.width));
case ButtonImageTitleStyleLeftRight:
//图片在左，文字在右，距离按钮两边边距
self.titleEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - titleRect.origin.x - titleRect.size.width),
-(selfWidth - padding - titleRect.origin.x - titleRect.size.width));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
-(imageRect.origin.x - padding),
(imageRect.origin.x - padding));
self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
上面的方法setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding请在建立完UIButton对象并且指定一个具体的frame值或者自动布局的约束尺寸后，并且调用setTitle:forState:和setImage:forSate:后再调用：
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0,0,100,100)];
[button setTitle:@"测试文本" forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"test"] forState:UIControlStateNormal];
[button setButtonImageTitleStyle:ButtonImageTitleStyleTop padding:10];
另外如果你想要你的按钮中的图片和文字整体的水平居左，或者水平居右，或者垂直居上或者垂直居下则可以用UIButton的原生(UIControl)属性：
@property(nonatomic) UIControlContentVerticalAlignment contentVerticalA
// how to position content vertically inside control. default is center
@property(nonatomic) UIControlContentHorizontalAlignment contentHorizontalA // how to position content hozontally inside control. default is center
这两个属性来设置按钮的垂直和水平的整体位置的调整，具体设置则读者自行去实践吧。
你可能感兴趣的文章
4 收藏，2.1k
12 收藏，1.4k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
为什么这么难看。。。。哈哈
呵呵，只是为了介绍效果而已。没有找到好看的图
分享到微博？
技术专栏，帮你记录编程中的点滴，提升你对技术的理解收藏感兴趣的文章，丰富自己的知识库
明天提醒我
我要该，理由是：
扫扫下载 App}
iOS UIButton 显示不同的字体颜色
- (void)viewDidLoad {
[super viewDidLoad];
NSString * aStr = @"交流群";
NSMutableAttributedString *str = [[NSMutableAttributedString alloc] initWithString:[NSString stringWithFormat:@"%@",aStr]];
[str addAttribute:NSFontAttributeName value:[UIFont fontWithName:@"Arial-BoldItalicMT" size:16.0] range:NSMakeRange(0,3)];
[str addAttribute:NSForegroundColorAttributeName value:[UIColor greenColor]range:NSMakeRange(0,3)];
UIButton * butn = [UIButton buttonWithType:UIButtonTypeCustom];
butn.backgroundColor = [UIColor orangeColor];
butn.frame = CGRectMake(100, 200, 200, 30);
[butn setAttributedTitle:str forState:UIControlStateNormal];
[butn addTarget:self action:@selector(click) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:butn];
Others laugh at me too crazy, I know what I want帐号:密码:下次自动登录{url:/nForum/slist.json?uid=guest&root=list-section}{url:/nForum/nlist.json?uid=guest&root=list-section}
贴数:3&分页:酸菜面 健康品发信人: tgfbeta (有心为善虽善不爽 无心作恶虽恶不乏), 信区: MobileDev
标&&题: Re: [iOS 2] 怎么修改 UIButton 的文字？setTitle 不好使。。。
发信站: 水木社区 (Tue Nov 20 20:16:34 2012), 站内 && 调试一下，确定设置的时候你的button变量已经绑定到相应IBOutlet
【 在 easyweb (我的电脑) 的大作中提到: 】
: 看文档，貌似是：
: [self.xxxButton setTitle:@"XXX" forState:0]; //NOT WORK
: 但实际不好使。
: ...................
&& -- && ※ 来源:·水木社区 newsmth.net·[FROM: 221.218.165.*]
一只单眼皮一只双眼皮发信人: liuzhi (一只单眼皮一只双眼皮), 信区: MobileDev
标&&题: Re: [iOS 2] 怎么修改 UIButton 的文字？setTitle 不好使。。。
发信站: 水木社区 (Tue Nov 20 22:42:29 2012), 站内 && state应该是填个normal啥的
【 在 easyweb (我的电脑) 的大作中提到: 】
: 看文档，貌似是：
: [self.xxxButton setTitle:@"XXX" forState:0]; //NOT WORK
: 但实际不好使。
: ...................
My mother has killed me,
My father is eating me,
My brothers and sisters sit under the table,
Picking up bury them under the cold marble stones. &&&&&&&&&&&&&&&&&&&&&&&&&&&&-- Grimm's Fairy Tales &&&& ※ 来源:·水木社区 newsmth.net·[FROM: 211.99.222.*]
barry.z发信人: barrycug (barry.z), 信区: MobileDev
标&&题: Re: [iOS 2] 怎么修改 UIButton 的文字？setTitle 不好使。。。
发信站: 水木社区 (Wed Nov 21 08:55:39 2012), 站内 && 2楼说的有道理。。。
-- && ※ 来源:·水木社区 ·[FROM: 124.205.245.*]
文章数:3&分页:在开发的过程中经常会遇到需要在button中放置图片和文字，比如将图片放置在button左边，文字放置在右边。因为UIButton也是继承自UIView，因此可以像其它的view一样添加subView，
//创建button
UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
// 创建imageview
UIImage *image = [UIImage imageNamed:@"yourImage.png"];
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(/*frame*/)];
[imageView setImage:image];
// 创建label
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(/*frame*/)];
[label setText:@"Your title"];
// 添加到button中
[button addSubview:label];
[button addSubview:imageView];
这种方法的好处是简单明了，但是其实在UIButton中已经包含了UIImageView，我们不需要在自己添加该imageView的。也可以采用如下的方法，但是该方法的在调整UI时比较不方便：
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.frame = buttonR
[button setTitle:@"title" forState:UIControlStateNormal];
[button setImage:buttonImage forState:UIControlStateNormal];
button.imageEdgeInsets = UIEdgeInsetsMake(0.0, WIDTH(button.titleLabel) + 10.0, 0.0, 0.0);
button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentL
对于这个问题，建议采用如下方方：
继承UIButton并重写两个函数：
-(CGRect) imageRectForContentRect:(CGRect)contentRect ；
&-(CGRect) titleRectForContentRect:(CGRect)contentRect；
这两个函数可以设置图片和文字的大小和位置.
#import &UIKit/UIKit.h&
@interface BottomButton: UIButton
- (CGRect)imageRectForContentRect:(CGRect)contentR- (CGRect)titleRectForContentRect:(CGRect)contentR
#import "BottomButton.h"
@implementation BottomButton
- (CGRect)imageRectForContentRect:(CGRect)contentRect
return CGRectMake(30, 9, kbuttonIconImageW, kbuttonIconImageH);//图片的位置大小
-(CGRect)titleRectForContentRect:(CGRect)contentRect
return CGRectMake(60, 9, kbuttonLabelW, kbuttonLabelH);//文本的位置大小
self.forwardBtn = [[BottomButton alloc] initWithFrame:CGRectMake(5,5 ,BottomButtonWidth ,BottomButtonHeight)];
[self.forwardBtn addTarget:self action:@selector(forwardButtonUpInsideAction) forControlEvents:UIControlEventTouchUpInside];
[self.forwardBtn setImage:[UIImage imageNamed:@"Forward.png"] forState:UIControlStateNormal];[self.forwardBtn setImage:[UIImage imageNamed:@"Forward_select.png"] forState:UIControlStateHighlighted];
[self.forwardBtn setTitleColor:labelFontColor forState:UIControlStateNormal];
[self.forwardBtn setTitleColor:RGBCOLOR(255, 160, 31) forState:UIControlStateHighlighted];
[self.forwardBtn setTitle:@"转发" forState:UIControlStateNormal ];
[self.forwardBtn.titleLabel setFont: [UIFont systemFontOfSize: BottomFontSize]];
[self addSubview:self.forwardBtn];
阅读(...) 评论()iOS的UIButton是一个非常常见而且常用的控件，我们一般用他来实现某个功能的提交以及选择操作。我们可以建立只有文字的Button，也可以建立只有图片的Button，具体的需求要看界面设计的具体情况。有时候我们希望应用的界面元素是丰富多彩的，有时候希望建立一个图文结合的控件来响应用户的手势操作，因此建立一个即有图片也有文字的按钮来实现功能，这个只需要分别调用UIButton的setTitle:forState:和setImage:forSate:两个方法就可以实现具有图片和文字功能的按钮。但是系统默认的图文结合的按钮布局是：图片在左边而文字在右边，而且整体水平和垂直居中。比如下面这个图文按钮：但是有的时候我们又希望图片在右边而文字在左边；或者图片在上边而文字在下面；或者图片在按钮的中间而文字在图片的下面等等，但我们又不想放弃使用按钮这个控件，这时候怎么办？ 事件总是能找到解决方法的， 有的人会先建立一个按钮控件铺在下面，而在上面分别覆盖一个UIImageView和UILabel来实现；而有的人则干脆在UIButton上建立一个UIImageView和UILabel两个子视图；而有的人则不会用UIButton来实现图文结合的功能。 前面说的几个方法看起来有效，也确实会解决问题，但缺点是代码量会增加，而且必须同时管理UIButton, UIImageView, UILabel这三个整体，如果哪天产品还希望有一个按钮按下高亮或者按下阴影效果时,你可能又要重新编写代码实现需求了。那么我们是否要放弃UIButton呢？答案是否定的，其实UIButton本身是可以支持各种图文结合的，既然UIButton上能同时显示图片和文字，那就可以肯定的说UIButton里面本身一定有一个UIImageView和UILabel8子视图。UIButton*本身就是一个复合控件，他分别提供了两个属性：
@property(nonatomic,readonly,retain)UILabel
*titleLabel NS_AVAILABLE_IOS(3_0);
@property(nonatomic,readonly,retain)UIImageView *imageView
NS_AVAILABLE_IOS(3_0);
需要注意的是这两个属性必须要调用完setTitle:forSate:和setImage:forSate:后才能获取到，否则有可能会返回nil。 其中的 titleLabel是用来保存文字的而imageView是用来保存图片的。那既然UIButton本身就带有一个图片控件和文本控件，那是不是我们只要分别通过调整子控件的frame值就能实现我们想要的图片文字的任何布局呢？ 答案是否定的。实验证明通过设置titleLabel、imageView的frame值根本不会改变按钮里面图片在左而文字在右的格局。 要想实现功能就必须使用另外两个属性：
@property(nonatomic)
UIEdgeInsets titleEdgeI
// default is UIEdgeInsetsZero
@property(nonatomic)
UIEdgeInsets imageEdgeI
// default is UIEdgeInsetsZero
这两个属性是分别用来调整按钮中文本的偏移缩进以及图片的偏移缩进的，他们都是一个UIEdgeInsets对象，默认的值都是0，也就是默认的值都是0的情况下按钮的图片和文字垂直居中，而且图片在左边文字在右边，而且图片文本整体水平居中。而我们则可以通过调整titleEdgeInsets和imageEdgeInsets的值来实现我们想要的任何图文布局的情况，甚至我们希望图片和文字之间还要保留一些间隔的情况。怎么调整？ 调整多少为最合适？
在调整之前我们先定义几个特定的变量值：
CGRect titleRect = titleLabel.
//文本控件在按钮中的frame值。
CGRect imageRect = imageView.
//图片控件在按钮中的frame值。
//用于指定文本和图片的间隔值。
CGFloat selfW
//按钮控件的宽度
CGFloat selfH
//按钮控件的高度
CGFloat totalHeight=titleRect.size.height+padding+imageRect.size.
//图文上下布局时所占用的总高度，注意这里也算上他们之间的间隔值padding
我们可以通过更改按钮的titleEdgeInsets和imageEdgeInsets的值调整文本和图片的位置。如果我们想往右移动20的话，那么就应该同时设置UIEdgeInsets的left=20, right=-20，而如果我们想往上移动20的话，那么就应该应该同时设置UIEdgeInsets的top=-20,bottom=20。下面我们就分别通过调整按钮的titleEdgeInsets和imageEdgeInsets的值来实现各种图文结合的效果：
一、图片在左，文字在右，整体居中，调整间距
这种方式是按钮默认的图文布局方式，因为要调整图片和文本的间距，所以只需要文本右移padding/2而图片左移padding/2值就可以了。设置的代码为：
titleEdgeInsets =UIEdgeInsetsMake(0,
padding/2,
-padding/2);
imageEdgeInsets = UIEdgeInsetsMake(0,
-padding/2,
padding/2);
二、图片在右，文字在左，整体居中
要实现这种布局只需要将文字往左偏移图片的宽度并且再往左偏移padding/2就可以了，而图片则只需要往右偏移文本的宽度并再往右偏移padding/2就可以了。设置的代码为：
titleEdgeInsets =UIEdgeInsetsMake(0,
-(imageRect.size.width + padding/2),
(imageRect.size.width + padding/2));
imageEdgeInsets =UIEdgeInsetsMake(0,
(titleRect.size.width+ padding/2),
-(titleRect.size.width+ padding/2));
三、图片在上，文字在下，整体居中
这种布局下当图片和文字要求垂直居中后，新的图片的顶部位置应该等于(selfHeight -
totalHeight)/2， 因此垂直需要偏移的值就是新的位置减去原来的位置imageRect.origin.y；而新的图片的水平中心点要等于selfWidth/2，而原来的图片的水平中心点等于imageRect.origin.x + imageRect.size.width/2，两者相减就是水平需要偏移的值。而新的文本的顶部位置应该等于新的图片的顶部位置(selfHeight - totalHeight)/2 + 图片的高度imageRect.size.height +
间隔padding ,因此垂直需要偏移的值就是新的顶部值减去原来的顶部位置titleRect.origin.y; 而新的文本的水平中心点也是selfWidth/2，而原来的文本的水平中心点是titleRect.origin.x + titleRect.size.width/2， 两者相减就是水平需要偏移的值，又因为默认的情况下当按钮比较小时会自动保留图片的尺寸和将文字部分缩小，因为当我们实现文字和图片上下布局时，需要将文字的区域扩展到整个按钮部分，否则将会缩小按钮的文字的宽度，因为按钮的宽度为selfWidth,而文字的默认宽度是titleRect.size.width,所以上面的实现将文本移到中间后还需要分别向两边进行拉伸(selfWith - titleRect.size.width)/2来保证文本填充满所有的按钮区域，在下面的各种样式中凡是文字和图片垂直居中的情况下都要考虑这种情况
设置的代码为：
titleEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-((selfHeight - totalHeight)/2 - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
四、图片在下，文字在上，整体居中
这种布局就是上面的文字和图片位置调换，因此设置代码为：
titleEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-((selfHeight - totalHeight)/2 - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
五、图片保持居中，而文字左右居中且顶部距离按钮顶部
这种方式要求图片在按钮中居中，而文字则要求左右居中而垂直方向位置则是距离按钮顶部的间隔值。 上面因为描述了水平居中的调整，因此这里就不介绍了，只介绍垂直方向的调整。 因为要求图片要垂直居中，因此不需要调整垂直偏移。而文本则要调整为距离顶部的间隔值，也就是新的文本的顶部值等于padding, 而原来顶部值是titleRect.origin.y，因此只需要偏移titleRect.origin.y - padding就可以了。设置代码为：
titleEdgeInsets =UIEdgeInsetsMake(-(titleRect.origin.y - padding),
(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
(titleRect.origin.y - padding),
-(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
六、图片保持居中，而文字水平居中且底部距离按钮底部
这种方式要求图片在按钮居中，而文字则要求左右居中而垂直方向的底部位置则是距离按钮底部的间隔值。图片的调整上面有介绍，而文字的水平调整上面也有说到，这里面只说文字的垂直调整。文字新的底部位置等于selfHeight - padding,
而旧的底部位置是titleRect.size.height + titleRect.origin.y， 因此要偏移的位置就是两者相减的值。代码的设置为：
titleEdgeInsets =UIEdgeInsetsMake((selfHeight - padding - titleRect.origin.y - titleRect.size.height),
(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-(selfHeight - padding - titleRect.origin.y - titleRect.size.height),
-(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
七、图片保持居中，而文字水平居中并且在图片的上面
这种方式要求图片在按钮居中，而文字则要求左右居中并且在垂直在图片的上面并保留出padding的间隔。 图片的偏移上面有说到，而文字的水平偏移上面也有说到，这里只说垂直偏移，文字新的底部位置等于图片的顶部位置 - padding
而文字老的底部位置等于titleRect.size.height + titleRect.origin.y, 因此两者的差值就是文字需要垂直偏移的值。代码设置为：
titleEdgeInsets =UIEdgeInsetsMake(-(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
-(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
八、图片保持居中，而文字水平居中并且在图片的下面
这种方式要求图片在按钮居中，而文字则要求左右居中并且垂直在图片的下面并保留出padding的间隔。图片的偏移上面有说到，而文字的水平偏移上面也有说到，这里只说垂直偏移，文字新的顶部位置等于imageRect.origin.y + imageRect.size.height + padding,
而文字老的顶部位置等于titleRect.origin.y，因此两者的差值就是文字需要垂直偏移的值。代码设置为：
titleEdgeInsets =UIEdgeInsetsMake((imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2,
-(imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
-(selfWidth /2 -
titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) /2);
imageEdgeInsets =UIEdgeInsetsMake(0,
(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width /2));
九、图片在右，文字在左，距离按钮两边边距
在这种方式中，图片和文本都是垂直居中对齐，这部分是不需要调整的，而文本的左边则需要由原来的titleRect.origin.x移动到左边padding的位置，而图片的左边则需要由原来的imageRect.origin.x移动到selfWidth - padding - imageRect.size.width位置。因此代码设置为：
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(titleRect.origin.x - padding),
(titleRect.origin.x - padding));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - imageRect.origin.x - imageRect.size.width),
-(selfWidth - padding - imageRect.origin.x - imageRect.size.width));
十、图片在左，文字在右，距离按钮两边边距
这种方式中，图片和文字的垂直位置不需要调整，而只需要将图文的水平位置调整即可，而调整的方法和上面的相似，只是图片移到左边儿文字移到右边而已。代码设置为：
self.titleEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - titleRect.origin.x - titleRect.size.width),
-(selfWidth - padding - titleRect.origin.x - titleRect.size.width));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
-(imageRect.origin.x - padding),
(imageRect.origin.x - padding));
前面说的的十种图文结合样式，我想应该可以满足您的需求了，如果这些图文结合的样式还是无法满足您的需求时则您还是别用UIButton了。为了方便大家的使用，我把上面的图文结合样式整理成了一个UIButton的分类方法，大家可以直接拷贝使用：
UIButton+ImageTitleStyle.h
Created by 欧阳大哥 on 14-7-13.
/youngsoft
#import &UIKit/UIKit.h&
针对同时设置了Image和Title的场景时UIButton中的图片和文字的关系
typedef NS_ENUM(NSInteger, ButtonImageTitleStyle ) {
ButtonImageTitleStyleDefault = 0,
//图片在左，文字在右，整体居中。
ButtonImageTitleStyleLeft
//图片在左，文字在右，整体居中。
ButtonImageTitleStyleRight
//图片在右，文字在左，整体居中。
ButtonImageTitleStyleTop
//图片在上，文字在下，整体居中。
ButtonImageTitleStyleBottom
//图片在下，文字在上，整体居中。
ButtonImageTitleStyleCenterTop = 5,
//图片居中，文字在上距离按钮顶部。
ButtonImageTitleStyleCenterBottom = 6,
//图片居中，文字在下距离按钮底部。
ButtonImageTitleStyleCenterUp = 7,
//图片居中，文字在图片上面。
ButtonImageTitleStyleCenterDown = 8,
//图片居中，文字在图片下面。
ButtonImageTitleStyleRightLeft = 9,
//图片在右，文字在左，距离按钮两边边距
ButtonImageTitleStyleLeftRight = 10,
//图片在左，文字在右，距离按钮两边边距
@interface UIButton (ImageTitleStyle)
调整按钮的文本和image的布局，前提是title和image同时存在才会调整。
padding是调整布局时整个按钮和图文的间隔。
-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)
实现文件：
UIButton+ImageTitleStyle.m
Created by 欧阳大哥 on 14-7-13.
#import "UIButton+ImageTitleStyle.h"
@implementation UIButton (ImageTitleStyle)
-(void)setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding
if (self.imageView.image != nil && self.titleLabel.text != nil)
self.titleEdgeInsets = UIEdgeInsetsZ
self.imageEdgeInsets = UIEdgeInsetsZ
CGRect imageRect = self.imageView.
CGRect titleRect = self.titleLabel.
CGFloat totalHeight = imageRect.size.height + padding + titleRect.size.
CGFloat selfHeight = self.frame.size.
CGFloat selfWidth = self.frame.size.
switch (style) {
case ButtonImageTitleStyleLeft:
if (padding != 0)
self.titleEdgeInsets = UIEdgeInsetsMake(0,
padding/2,
-padding/2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
-padding/2,
padding/2);
case ButtonImageTitleStyleRight:
//图片在右，文字在左
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(imageRect.size.width + padding/2),
(imageRect.size.width + padding/2));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(titleRect.size.width+ padding/2),
-(titleRect.size.width+ padding/2));
case ButtonImageTitleStyleTop:
//图片在上，文字在下
self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2,
-((selfHeight - totalHeight)/2 + imageRect.size.height + padding - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width /2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
-((selfHeight - totalHeight)/2 - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleBottom:
//图片在下，文字在上。
self.titleEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 - titleRect.origin.y),
(selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
-((selfHeight - totalHeight)/2 - titleRect.origin.y),
-(selfWidth/2 - titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2),
-((selfHeight - totalHeight)/2 + titleRect.size.height + padding - imageRect.origin.y),
-(selfWidth /2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleCenterTop:
self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y - padding),
(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
(titleRect.origin.y - padding),
-(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleCenterBottom:
self.titleEdgeInsets = UIEdgeInsetsMake((selfHeight - padding - titleRect.origin.y - titleRect.size.height),
(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
-(selfHeight - padding - titleRect.origin.y - titleRect.size.height),
-(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleCenterUp:
self.titleEdgeInsets = UIEdgeInsetsMake(-(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
(titleRect.origin.y + titleRect.size.height - imageRect.origin.y + padding),
-(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleCenterDown:
self.titleEdgeInsets = UIEdgeInsetsMake((imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2,
-(imageRect.origin.y + imageRect.size.height - titleRect.origin.y + padding),
-(selfWidth / 2 -
titleRect.origin.x - titleRect.size.width / 2) - (selfWidth - titleRect.size.width) / 2);
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2),
-(selfWidth / 2 - imageRect.origin.x - imageRect.size.width / 2));
case ButtonImageTitleStyleRightLeft:
//图片在右，文字在左，距离按钮两边边距
self.titleEdgeInsets = UIEdgeInsetsMake(0,
-(titleRect.origin.x - padding),
(titleRect.origin.x - padding));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - imageRect.origin.x - imageRect.size.width),
-(selfWidth - padding - imageRect.origin.x - imageRect.size.width));
case ButtonImageTitleStyleLeftRight:
//图片在左，文字在右，距离按钮两边边距
self.titleEdgeInsets = UIEdgeInsetsMake(0,
(selfWidth - padding - titleRect.origin.x - titleRect.size.width),
-(selfWidth - padding - titleRect.origin.x - titleRect.size.width));
self.imageEdgeInsets = UIEdgeInsetsMake(0,
-(imageRect.origin.x - padding),
(imageRect.origin.x - padding));
self.titleEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
self.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 0);
上面的方法setButtonImageTitleStyle:(ButtonImageTitleStyle)style padding:(CGFloat)padding请在建立完UIButton对象并且指定一个具体的frame值或者自动布局的约束尺寸后，并且调用setTitle:forState:和setImage:forSate:后再调用：
UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(0,0,100,100)];
[button setTitle:@"测试文本" forState:UIControlStateNormal];
[button setImage:[UIImage imageNamed:@"test"] forState:UIControlStateNormal];
[button setButtonImageTitleStyle:ButtonImageTitleStyleTop padding:10];
另外如果你想要你的按钮中的图片和文字整体的水平居左，或者水平居右，或者垂直居上或者垂直居下则可以用UIButton的原生(UIControl)属性：
@property(nonatomic) UIControlContentVerticalAlignment contentVerticalA
// how to position content vertically inside control. default is center
@property(nonatomic) UIControlContentHorizontalAlignment contentHorizontalA // how to position content hozontally inside control. default is center
这两个属性来设置按钮的垂直和水平的整体位置的调整，具体设置则读者自行去实践吧。
你可能感兴趣的文章
4 收藏，2.1k
12 收藏，1.4k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
为什么这么难看。。。。哈哈
呵呵，只是为了介绍效果而已。没有找到好看的图
分享到微博？
技术专栏，帮你记录编程中的点滴，提升你对技术的理解收藏感兴趣的文章，丰富自己的知识库
明天提醒我
我要该，理由是：
扫扫下载 App}
我要回帖
更多推荐
- ·社群电商销售做成人用品微商好做吗的盈利情况如何？如何拿货？
- ·爽课如何提升工业品降低营销成本最有效的方法的效果？
- ·如何把qq和撤回1小时以上微信妙招的闪电启动去除？
- ·怎样才能怎么知道对方默默关注你手机抖音里和她互相关注的人是那些人？
- ·华融兴业泛华金融是正规的吗（深圳）服务有限公司是骗子吗？
- ·手机qq浏览器历史记录恢复记录怎么恢复
- ·我要一张微信图片详细解说表有吗微信表情月亮含义解说的意思
- ·mac版制作apng 制作图片的软件有什么
- ·苹果六微信android 按住说话话发送给对方时按键音好小怎么调
- ·好先生全集谁有的给个种子啥的！！！高分啊 122058487@qq.com
- ·好像科技哦偶尔姐姐诶基督教任不符合思而后肆意湖吸血鬼骑士恍如隔世而后度日接哦黑
- ·电阻炉rt-12-800-12是什么意思
- ·怎么coloros解锁bootloaderr
- ·中兴青漾3 中兴g719c romecovery模式 能使用usb吗
- ·昂达滚珠王600省电版v355ic503是什么器件
- ·戴尔7537 戴尔原装win8系统下载 问题如：c盘无缘无故的自己满了已经尝试过系统恢复可是等1到2天C盘又无缘无故的满了，
- ·QQ刷单被骗了怎么办。。怎么办。求助
- ·我因一次事件去报警了,有一警察他既然记下我的电话号码,还跟我聊微信,慢慢的他就有言语是的爱眛，现在
- ·为什么现在天翼飞young wifi的wifi连不上？
- ·vr眼镜视角多大多大视野角没黑边？
- ·ios uibutton的titlelabel set title的方法文字怎么渲染成蓝色的了
- ·理想rv维修手册3660c怎么全清
- ·Dogeared 做我老婆好不好好
- ·杭州大厦收发处，每天都没上班吗？一个挂号信跑了5天都没见一个人去杭州工作
- ·北京闪服科技有限公司够网络公司是骗子吗
- ·这个网站翻墙干什么是干什么的
- ·ds 160 表格ds160填完后 调出表格了可以查看吗
- ·2016法国2016欧洲杯哪里投注投注预选赛的规则介绍？
- ·2002年2014世界杯季军赛是哪个国家
- ·刚看英超新闻，水晶宫vs西布朗维奇奇胸前的广告是什么？
- ·练瑜伽的最佳年龄能使慢性病好转
- ·三个女人打高尔夫球费用讨论喜欢什么样的男人的笑话
- ·十年科比60分以上比赛的宁迷，还记得这个比赛吗
- ·csgo swagway为什么被禁赛
- ·去广州水上乐园的时候脚上被蚊子咬了起水泡三个包，之后去了游泳池里泡水。
- ·什么样的健身教练是全能私人教练教练?
