如何将UIButton的图片和文字设置到自己想要的位置->imageEdgeInsets和titleEdgeInsets的使用

这个拖延症真是害人,本来很早之前就该总结的,又拖到了今天。

最近在接手一个老项目的时候,原来的程序员是这样做的

Paste_Image.png

但是这里的手势点击过程是背景变色还是图片变灰都达不到UIButton的原生点击效果,所以我就改完UIButton来实现。
一般添加图片和文字的UIButton的按钮样式的这样的:

 [bidBtn setImage:[UIImage imageNamed:@"LPBid"] forState:UIControlStateNormal];
 [bidBtn setTitle:@"招标公告" forState:UIControlStateNormal];
Paste_Image.png

达不到右边的效果,于是在网上开始寻找方法,很容易就找到这两个属性imageEdgeInsets和titleEdgeInsets,作用就是调整图片和文字在按钮里面的位置。二话不说开始调整...好像可以了,换个手机测试一下。明明在5s上达到右边的效果了,在7p上:

Paste_Image.png

调整的时候明明按照的比列在移动,但是在不同的屏幕上就是不一样。
然后在找的过程中还发现了这个属性,contentHorizontalAlignment和contentVerticalAlignment,以前也看到过,以为是可以让内容垂直。但是用了一下,才发现,像原始的设置的图片和文字就是图2,默认的属性是这样的:

bidBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
bidBtn.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;

而且这个时候,图片和文字是一个整体,一个整体,即你只调整一个edge属性,另外一个也会换位置,要想破除这个魔咒,只有设置

bidBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
bidBtn.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;
Paste_Image.png

这个图片和文字的样式下,可以轻松的调整了,还有一点忘记说了,imageEdgeInsets和titleEdgeInsets使用的时候,是基于没有调整前的图片或者文字的位置,不是以UIButton的(0,0)位置为原点

Paste_Image.png

而是箭头的起点处为起点,这也导致了调整的难度。
又有一个小知识点:

    1.当button.width < image.width时,只显示被压缩后的图片,图片是按fillXY的方式压缩。

    2.当button.width > image.width,且 button.width < (image.width + text.width)时,图片正常显示,文本被压缩。

    3.当button.width > (image.width + text.width),两者并列默认居中显示,可通过button的属性contentHorizontalAlignment改变对齐方式。

我们就是第三种方式下的调整;
回到上面设置好图片和文字靠左和靠上对齐后,

bidBtn.imageEdgeInsets = UIEdgeInsetsMake(0.2 * bidBtn.frame.size.height, (bidBtn.frame.size.width - bidBtn.imageView.frame.size.width) / 2, 0, 0);

这四个值分别是距离上-左-下-右的各边距,(bidBtn.frame.size.width - bidBtn.imageView.frame.size.width) / 2,就是图片的距离左边的距离,0.2 * bidBtn.frame.size.height,是距离上边的距离这个,

Paste_Image.png

下面调整文字,

  bidBtn.titleEdgeInsets = UIEdgeInsetsMake(0.2 * bidBtn.frame.size.height + bidBtn.imageView.frame.size.height + 0.05 * bidBtn.frame.size.height,  (bidBtn.frame.size.width - bidBtn.titleLabel.frame.size.width) / 2 - bidBtn.imageView.frame.size.width, 0, 0);
Paste_Image.png

这里要注意文字距离左边的距离不能安按钮的左边来计算了,不能用黄色线条,而是黑色直线的距离,原始招标公告在红色处,这里才是起点。0.2 * bidBtn.frame.size.height + bidBtn.imageView.frame.size.height + 0.05 * bidBtn.frame.size.height,是图片的上边距加上图片本身的高度加上图片和文字的间隔, (bidBtn.frame.size.width - bidBtn.titleLabel.frame.size.width) / 2 - bidBtn.imageView.frame.size.width是黄色的距离减去图片的宽度得到的黑色长度,这个时候文字就来到中心处。
自此大功告成。
完整的代码:

UIButton * bidBtn = [UIButton buttonWithType:UIButtonTypeCustom];
bidBtn.frame = CGRectMake(0, 0, TTScreenWith / 2 - 1,  100*SCALE);
float heigh = bidBtn.frame.size.height;
bidBtn.backgroundColor = [UIColor whiteColor];
bidBtn.tag = 0;
[bidBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
[bidBtn.titleLabel setFont:[UIFont systemFontOfSize:14]];
[bidBtn setImage:[UIImage imageNamed:@"LPBid"] forState:UIControlStateNormal];
[bidBtn setTitle:@"招标公告" forState:UIControlStateNormal];
[bidBtn addTarget:self action:@selector(clickLeftBid:) forControlEvents:UIControlEventTouchUpInside];
bidBtn.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
bidBtn.contentVerticalAlignment = UIControlContentVerticalAlignmentTop;
bidBtn.imageEdgeInsets = UIEdgeInsetsMake(0.2 * bidBtn.frame.size.height, (bidBtn.frame.size.width - bidBtn.imageView.frame.size.width) / 2, 0, 0);
bidBtn.titleEdgeInsets = UIEdgeInsetsMake(0.2 * bidBtn.frame.size.height + bidBtn.imageView.frame.size.height + 0.05 * heigh,  (bidBtn.frame.size.width - bidBtn.titleLabel.frame.size.width) / 2 - bidBtn.imageView.frame.size.width, 0, 0);
[cell.contentView addSubview:bidBtn];

其实还应该计算一下完整的高度,即图片和文字的看成一个整体,让这个整体的中心和按钮的中心处重合。
由于UIButton是添加在Cell上的要看如何在UITableView和UIScrollView上UIbutton的正常点击效果实现,可以看我上一篇。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容