UIButton图片文字排版

在平时的开发中,我们会碰到不同排版按钮的需求,按钮默认的排版为图片居左,文字居右。不同于此的就需要我们进行重写。目前我已知的有两种方式:
1.通过改变titleLabel和imageView的rect进行重新布局
2.通过改变titleLabel和imageView的偏移量重新布局

两种方式都能实现需求,以前我也经常使用第一种方式去实现,这种方式好理解,但是每遇到一种排版就得写一个button子类或者写一段不是很优雅的代码。第二种方式(本文讲解)比较难以理解,但是兼容性比较好,只需要写一个子类,且比较优雅。最近通过查找资料和实践得到以下结论:
偏移量的值 = 现位置的值 - 原位置的值 (其中这个现位置你需要去想象你需要的排版的位置是怎样的);
偏移方向:向内侧偏移为正,向外侧偏移为负
其中top和bottom,left和right,我们只需要得到其中一个方向的偏移量,如果在宽高不需要改变的情况下,相对方向的偏移量则为其相反数

我们需要写一个子类,为其添加方法来进行布局
以图片在上,文字在下为例子:

/**
需要的数据
**/
//间距
CGFloat padding = 10;
//按钮尺寸
CGFloat selfWidth = self.frame.size.width;
CGFloat selfHeight = self.frame.size.height;
//图片高度 + 间距 + 文字高度(竖直方向上)
CGFloat contentHeight = imageHeight + padding + titleHeight;
//原图片位置:
CGFloat imageOriginX = self.imageView.frame.origin.x;
CGFloat imageOriginY = self.imageView.frame.origin.y;
//原文字label位置
CGFloat titleOriginX = self.titleLabel.frame.origin.x;
CGFloat titleOriginY = self.titleLabel.frame.origin.y;
//图片文字尺寸
CGFloat titleHeight = self.titleLabel.frame.size.height;
CGFloat titleWidth = self.titleLabel.frame.size.width;
CGFloat imageHeight = self.imageView.frame.size.height;
CGFloat imageWidth = self.imageView.frame.size.width;
//现图片位置
CGFloat imageNowY =  (selfHeight - contentHeight) / 2;
CGFloat imageNowX =  (selfWidth - imageWidth) / 2;
//现文字位置
CGFloat titleNowY =  (selfHeight - contentHeight) / 2 + imageHeight + padding;
CGFloat titleNowX = (selfWidth - titleWidth) / 2;

则图片在top方向的偏移量为:imageNowY - imageOriginY
left方向的偏移量为:imageNowX - imageOriginX
文字在top方向的偏移量为:titleNowY - titleOriginY
left方向的偏移量为: titleNowX - titleOriginX
则最后的结果为:

titleEdgeInsets = UIEdgeInsetsMake(titleNowY - titleOriginY, titleNowX - titleOriginX, titleOriginY - titleNowY, titleOriginX - titleNowX)

imageEdgeInsets =  UIEdgeInsetsMake(imageNowY - imageOriginY, imageNowX - imageOriginX, imageOriginY - imageNowY, imageOriginX - imageNowX)

如图:


屏幕快照 2019-09-03 下午4.35.02.png

因为有时候title的内容可能会比较多,所以我们要将titleLabel的left和right拉伸至button边缘,拉伸的距离为(selfWidth - titleWidth) / 2,也就是titleNowX,因为是向外扩展,所以是减去。则title的偏移量最终的结果

titleEdgeInsets = UIEdgeInsetsMake(titleNowY - titleOriginY, titleNowX - titleOriginX - titleNowX, titleOriginY - titleNowY, titleOriginX - titleNowX - titleNowX)

对比一下


屏幕快照 2019-09-03 下午4.43.40.png
屏幕快照 2019-09-03 下午4.44.10.png

其他情况类比,本文结束。

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

推荐阅读更多精彩内容