需求:修改按钮的布局文字在下,图片在上。
实现方式:只会使用添加分类的方式去实现:
以下内容仅针对title是单行的情况,以下内容仅针对title是单行的情况,以下内容仅针对title是单行的情况,多行我也不知道。
注意:默认的情况下,文字在右,图片在左,但是你知道吗,图片和文字其实是均分按钮布局的。即将按钮图片和文字看做是一个整体的话,它其实是居中的。
不信看图:
按钮frame
图片frame:
图片frame
文字frame:
文字frame
核心一:
水平方向:300(按钮宽度) = 图片X坐标(27)*2 + 176(图片宽度) + (文字宽度69.5近似取70)70;
水平方向:同理
说以,要实现需求,分两步走战略。
a.先将图片右移,移动距离其实就是文字宽度的一半(WTF?画图看看),但设置EdgeInsets的时候却需要设置整个宽度。然后上移,上移距离且听后文分解。
b.移动文字同理。
核心二:
上移距离:先将图片文字看成上下排列的整体,移动后居中显示。其实就是在图片原有高度上的基础上增加了文字的高度,所以图片上移距离为文字高度的一半,文字下移图片高度的一半。此时图片文字无间距。(需要间距的话自己加上间距吧)。
添加Button分类,作用是在分类里获取文字和图片的size。
方式一、
self.titleLabel.frame,self.imageView.frame获取,获取之前调用[self layoutIfNeeded]。否则可能获取不到。
方式二、
图片:
UIImage *btnImage = [self imageForState:UIControlStateNormal];
CGSize imageSize = btnImage.size;
文字:
NSString *title = [self titleForState:UIControlStateNormal];
CGFloat fontSize = self.titleLabel.font.pointSize;
CGSize titleSize = [title boundingRectWithSize:CGSizeMake(0, 0) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:fontSize]} context:nil].size;
设置EdgeInsets:
self.titleEdgeInsets = UIEdgeInsetsMake(imageSize.height + 8, -(imageSize.width), 0, 0);
self.imageEdgeInsets = UIEdgeInsetsMake(0,0,titleSize.height + 8,-(titleSize.width));
注:文字完全显示时两种方式无差异,但是但文字显示不全时(单行),标题会以 "你个...."显示,这个时候方式一就不能正确获取到文字的宽度。
网友评论