UIButton设置图片和文字

在开发的过程中经常会遇到需要在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 = buttonRect;
[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 = UIControlContentHorizontalAlignmentLeft;

对于这个问题,建议采用如下方方:

继承UIButton并重写两个函数:

-(CGRect) imageRectForContentRect:(CGRect)contentRect ;

-(CGRect) titleRectForContentRect:(CGRect)contentRect;

这两个函数可以设置图片和文字的大小和位置.

#import <UIKit/UIKit.h>
@interface BottomButton: UIButton
- (CGRect)imageRectForContentRect:(CGRect)contentRect;- (CGRect)titleRectForContentRect:(CGRect)contentRect;
@end

#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);//文本的位置大小
}

@end
//use
...
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];
时间: 2024-10-27 13:52:32

UIButton设置图片和文字的相关文章

UIButton同时设置图片和文字 及 相关的title设置

1>同时设置图片和文字 UIButton *_backButton = [UIButton buttonWithType:UIButtonTypeCustom]; [_backButton setFrame:CGRectMake(12, 8, 64, 28)]; [_backButton setTitle:@"返回" forState:UIControlStateNormal];        //设置button在没有选中的时候显示的字体 _backButton.titleLa

UIButton的图片和文字相对位置调整

通常,如果直接设置UIButton的图片和文字,默认的两者相对位置可能不是我们想要的,那么需要进行调整. 需要用到的函数如下: UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right) top,left,bottom,right分别表示向各个方向的移动量 实例说明: UIButton *button = [[UIButton alloc] initWithFrame:CGRectMake(50, 100,

UIButton左边图片右边文字的做法

UIImage *yuyinImage = [UIImage imageNamed:@"yuyin.png"]; [soundButton setImage:yuyinImage forState:UIControlStateNormal]; [soundButton setImage:yuyinImage forState:UIControlStateSelected]; [soundButton setImage:yuyinImage forState:UIControlState

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

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

UIButton 设置图片文字垂直居中排列

#pragma mark 按钮图片文字垂直居中排列 -(void)setButtonContentCenter:(UIButton *)button { CGSize imgViewSize,titleSize,btnSize; UIEdgeInsets imageViewEdge,titleEdge; CGFloat heightSpace = 10.0f; //设置按钮内边距 imgViewSize = button.imageView.bounds.size; titleSize = bu

IOS UIButton(UIEdgeInsets)/设置图片和文字上下垂直居中对齐

UIEdgeInsets typedef struct UIEdgeInsets { CGFloat top, left, bottom, right; // specify amount to inset (positive) for each of the edges. values can be negative to 'outset' } UIEdgeInsets; 在UIButton中有三个对EdgeInsets的设置:ContentEdgeInsets.titleEdgeInsets

iOS UIButton设置图片动画

1.问题描述:实现点击按钮播放MP3音频并开启动画,再点击按钮关闭动画以及音频 效果类似以下(图片来自网络,侵删),动画效果其实就是几张连续的图片组成: 2.实现思路 2.1 自定义view,设置imageview的动画以及添加view的点击手势控制动画播放.结束: 2.2 直接自定义一个button,设置button的imageview属性实现,这样更加简单: 3.实现代码(采用第二种方法) 自定义一个UIbutton,如AnimateImgButton,实现方法 .m //自定义button

自定义UIButton 实现图片和文字 之间距离和不同样式

1.UIButton+ImageTitleSpace.h #import <UIKit/UIKit.h> // 定义一个枚举(包含了四种类型的button) typedef NS_ENUM(NSUInteger, MKButtonEdgeInsetsStyle) { MKButtonEdgeInsetsStyleTop, // image在上,label在下 MKButtonEdgeInsetsStyleLeft, // image在左,label在右 MKButtonEdgeInsetsSt

iOS UIButton 设置图片不变型 setImage:

[btn.imageView setContentMode:UIViewContentModeScaleAspectFill]; 下面方法自己可以试下, 你就知效果了... typedef NS_ENUM(NSInteger, UIViewContentMode) { UIViewContentModeScaleToFill, UIViewContentModeScaleAspectFit,      // contents scaled to fit with fixed aspect. re