Button的上下图文混排

来源：互联网发布：淘宝网运动鞋女款秋冬编辑：程序博客网时间：2024/05/16 09:28

先看效果

如何设置的公式是：

上面公式的测试demo:

代码如下：

* * * * * * *** * * * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * * * * * *

* * * ***** * * * * * * * * * * * * * * * * * * * *

* ** * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * * * * * * * * *

本demo的图片使用 Assets.xcassets进行管理。

// ViewController.m

// 按钮的图文混排

// Created by MAC on 16/9/26.

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {

[superviewDidLoad];

我们正常使用button显示一个图片

[self showButtonImage];

我们正常使用button显示一个文字

[self showButtonText];

我们进行正常的图文组合

[self showButton_Image_Text];

我想图片在右边的组合

[self showButton_Text_Image];

/* 我们进行测试*/

[selftestButtonS];

// Do any additional setup after loading the view, typically from a nib.

}

#pragma mark 只显示图片

-(void)showButtonImage{

/* 初始化对象*/

UIButton * ImageBtn = [UIButtonbuttonWithType:UIButtonTypeCustom];

/* 设置大小*/

ImageBtn.frame =CGRectMake(0,0, 50,50);

ImageBtn.center =CGPointMake(self.view.center.x,self.view.center.y);

/* 设置图片*/

[ImageBtn setImage:[UIImageimageNamed:@"btn_0"]forState:UIControlStateNormal];

/* 为按钮设置颜色*/

ImageBtn.backgroundColor = [UIColorblueColor];

/* 进行渲染*/

[self.viewaddSubview:ImageBtn];

}

#pragma mark 只显示图片

-(void)showButtonText{

/* 初始化对象*/

UIButton * TextBtn = [UIButtonbuttonWithType:UIButtonTypeCustom];

/* 设置大小*/

TextBtn.frame =CGRectMake(0,0, 60,50);

TextBtn.center =CGPointMake(self.view.center.x,self.view.center.y);

/* 设置文字*/

[TextBtn setTitle:@"成功QQ吧"forState:UIControlStateNormal];

/*设置文字的颜色*/

[TextBtn setTitleColor:[UIColorredColor] forState:UIControlStateNormal];

/* 为按钮设置颜色*/

TextBtn.backgroundColor = [UIColorblueColor];

/* 进行文字的大小适配*/

TextBtn.titleLabel.adjustsFontForContentSizeCategory =YES;

/* 让文字适合指定大小范围*/

TextBtn.titleLabel.adjustsFontSizeToFitWidth =YES;

/* 进行渲染*/

[self.viewaddSubview:TextBtn];

}

#pragma mark 按钮的图文混合

-(void)showButton_Image_Text{

UIButton * Button_Image_Text = [UIButtonbuttonWithType:UIButtonTypeCustom];

/* 设置大小*/

Button_Image_Text.frame =CGRectMake(0,0, 120,50);

Button_Image_Text.center =CGPointMake(self.view.center.x,self.view.center.y);

/* 设置图片*/

[Button_Image_Text setImage:[UIImageimageNamed:@"btn_1"]forState:UIControlStateNormal];

/* 设置文字*/

[Button_Image_Text setTitle:@"成功QQ吧"forState:UIControlStateNormal];

/*设置文字的颜色*/

[Button_Image_Text setTitleColor:[UIColorredColor] forState:UIControlStateNormal];

/* 为按钮设置颜色*/

Button_Image_Text.backgroundColor = [UIColorblueColor];

/* 进行文字的大小适配*/

Button_Image_Text.titleLabel.adjustsFontForContentSizeCategory =YES;

/* 让文字适合指定大小范围*/

Button_Image_Text.titleLabel.adjustsFontSizeToFitWidth =YES;

/* 进行渲染*/

[self.viewaddSubview:Button_Image_Text];

}

#pragma mark 图片在右边的组合

-(void)showButton_Text_Image{

UIButton * Button_Image_Text = [UIButtonbuttonWithType:UIButtonTypeCustom];

/* 设置大小*/

Button_Image_Text.frame =CGRectMake(0,0, 120,50);

Button_Image_Text.center =CGPointMake(self.view.center.x,self.view.center.y);

/* 设置图片*/

[Button_Image_Text setImage:[UIImageimageNamed:@"btn_1"]forState:UIControlStateNormal];

/* 设置文字*/

[Button_Image_Text setTitle:@"成功QQ吧"forState:UIControlStateNormal];

/*设置文字的颜色*/

[Button_Image_Text setTitleColor:[UIColorredColor] forState:UIControlStateNormal];

/* 为按钮设置颜色*/

Button_Image_Text.backgroundColor = [UIColorblueColor];

/* 进行文字的大小适配*/

Button_Image_Text.titleLabel.adjustsFontForContentSizeCategory =YES;

/* 让文字适合指定大小范围*/

Button_Image_Text.titleLabel.adjustsFontSizeToFitWidth =YES;

/* 进行按钮的调整*/

/***********************************************************************************/

/* 文右图左的组合*/

[selfsetButtonContent:Button_Image_Text];

/* 图上文下*/

// [self setButtonContentType:Button_Image_Text];

/* 进行渲染*/

[self.viewaddSubview:Button_Image_Text];

}

#pragma mark 进行设置按钮

-(void)setButtonContent:(UIButton*)setButton{

/* 有人说进行数据的匹配进行设置就行了，不错设置多少？那就慢慢试试啊！。上面的想法不错，但是没有考虑到，如果我换一个手机，可不知，按钮的文字和图片进行混乱了*/

/* 我们先获取按钮里面的两个对象，进行输出*/

/* 文字对象 titleLable */

NSLog(@"按钮的文字对象：%@",setButton.titleLabel);

/* 文字输出：

按钮的文字对象：<UIButtonLabel: 0x7fb560d09d00; frame = (72.5 25; 0 0); text = '成功QQ吧'; opaque = NO; userInteractionEnabled = NO; layer = <_UILabelLayer: 0x6000000972a0>>

解说：

我们从 frame = (72.5 25; 0 0)看到，我们只获取到了 origin。而 size我们并没有获取到。所以，我们根据文字对象的大小设置偏移是行不通的。

/* 图片对象 imageView*/

NSLog(@"按钮的图片对象：%@",setButton.imageView);

/* 图片输出：

按钮的图片对象：<UIImageView: 0x7fb562809df0; frame = (6.5 12.5; 25 25); clipsToBounds = YES; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x618000028d20>>

解说：

我们从 frame = (6.5 12.5; 25 25)看到，我们只获取到了 origin和 size。

按钮有一个量 titleEdgeInsets 和 imageEdgeInsets这两个是可以控制图片或者文字的在按钮里面的位置函数

[setButton setTitleEdgeInsets:UIEdgeInsetsMake(0, -setButton.titleLabel.frame.origin.x+setButton.imageView.frame.origin.x,0, setButton.titleLabel.frame.origin.x)];

[setButton setImageEdgeInsets:UIEdgeInsetsMake(0, setButton.frame.size.width - setButton.imageView.frame.origin.x - setButton.imageView.frame.size.width,0,setButton.imageView.frame.origin.x)];

}

#pragma mark 图上，文下的组合

-(void)setButtonContentType:(UIButton*)setButton{

[setButton setTitleEdgeInsets:UIEdgeInsetsMake(setButton.imageView.frame.origin.y + setButton.imageView.frame.size.height, -setButton.imageView.frame.origin.x-setButton.imageView.frame.size.width,10,-setButton.imageView.frame.origin.x)];

[setButton setImageEdgeInsets:UIEdgeInsetsMake(0, (setButton.frame.size.width - setButton.imageView.frame.size.width)*0.5,0,(setButton.frame.size.width - setButton.imageView.frame.size.width)*0.5)];

}

#pragma mark 图文混排的测试

-(void)testButtonS{

/* 图片的源*/

NSArray * ImageSource =@[[UIImageimageNamed:@"btn_0"],[UIImageimageNamed:@"btn_1"],[UIImageimageNamed:@"btn_2"],[UIImageimageNamed:@"btn_3"]];

/* 文字的源*/

NSArray * TitleSource =@[@"用户电话",@"用户密码",@"用户等级",@"用户成长"];

/* 按钮的宽度*/

float F = (self.view.frame.size.width - TitleSource.count +1)/ TitleSource.count;

/* 进行创建按钮*/

for (unsignedint i =0 ; i<TitleSource.count; i++) {

UIButton * ButtonF = [UIButtonbuttonWithType:UIButtonTypeCustom];

ButtonF.frame =CGRectMake(i*(F+1),64, F, 60);

ButtonF.layer.masksToBounds =YES;

ButtonF.layer.borderColor = [UIColorredColor].CGColor;

ButtonF.layer.borderWidth =0.5;

[ButtonF setImage:ImageSource[i]forState:UIControlStateNormal];

[ButtonF setTitle:TitleSource[i]forState:UIControlStateNormal];

ButtonF.titleLabel.font = [UIFontsystemFontOfSize:15];

[ButtonF setTitleColor:[UIColorredColor] forState:UIControlStateNormal];

/* 如果Button的文字显示不全，请使用下面的方法*/

ButtonF.titleLabel.adjustsFontSizeToFitWidth =YES;

/***********************************************************************/

float A = ButtonF.imageView.frame.origin.x;

float C = ButtonF.imageView.frame.size.width;

float D = ButtonF.imageView.frame.origin.y;

float G = ButtonF.imageView.frame.size.height;

[ButtonF setImageEdgeInsets:UIEdgeInsetsMake(0,0.5*(F-C), 0,0.5*(F-C))];

[ButtonF setTitleEdgeInsets:UIEdgeInsetsMake(D+G, -(A+C),0, -A)];

/***********************************************************************/

[self.viewaddSubview:ButtonF];

}

- (void)didReceiveMemoryWarning {

[superdidReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

成功截图：

1 0