博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iOS View自定义窍门——UIButton实现上显示图片,下显示文字
阅读量:5296 次
发布时间:2019-06-14

本文共 1403 字,大约阅读时间需要 4 分钟。

“UIButton实现上显示图片,下显示文字”这个需求相信大家在开发中都或多或少会遇见。比如自定义分享View的时候。当然,也可以封装一个item,上边imageView,下边一个label。但是既然有现成的,稍微改造下,设置下就可以,干嘛还要重复造轮子。有时候好多东西不是他们没有给设置,而是暂时没找到如何设置的方法而已。

示例

1. 一开始我的方案

自定义类继承UIButton,然后

-(void)layoutSubviews{    [super layoutSubviews];    CGFloat midX = self.frame.size.width / 2; CGFloat midY = self.frame.size.height/ 2 ; self.titleLabel.center = CGPointMake(midX, midY + 15); self.imageView.center = CGPointMake(midX, midY - 10); }

效果嘛,还不错,现在开发的项目中一直在用。但是心里总感觉这样有点旁门左道的样子,于是乎就有了下边的另外一种实现。

2. 之后试了好多次得到的结果

UIButton添加扩展

- (void)verticalImageAndTitle:(CGFloat)spacing{    self.titleLabel.backgroundColor = [UIColor greenColor]; CGSize imageSize = self.imageView.frame.size; CGSize titleSize = self.titleLabel.frame.size; CGSize textSize = [self.titleLabel.text sizeWithFont:self.titleLabel.font]; CGSize frameSize = CGSizeMake(ceilf(textSize.width), ceilf(textSize.height)); if (titleSize.width + 0.5 < frameSize.width) { titleSize.width = frameSize.width; } CGFloat totalHeight = (imageSize.height + titleSize.height + spacing); self.imageEdgeInsets = UIEdgeInsetsMake(- (totalHeight - imageSize.height), 0.0, 0.0, - titleSize.width); self.titleEdgeInsets = UIEdgeInsetsMake(0, - imageSize.width, - (totalHeight - titleSize.height), 0); }

效果如下。imageView和label的大小都是根据内容确定的,而且二者的整体始终在中央,上下的间距可以设置。使用的时候要保证Button的宽度一定要大于等于图片的宽

效果图
效果图2
效果图3

转载于:https://www.cnblogs.com/Free-Thinker/p/6217286.html

你可能感兴趣的文章
CSS3 - 如何给图片增加内阴影
查看>>
Redis sentinel & cluster 原理分析
查看>>
OD使用教程3(下) - 调试篇03|解密系列
查看>>
我的工作习惯小结
查看>>
Calendar类
查看>>
把word文档中的所有图片导出
查看>>
Spring 自动装配;方法注入
查看>>
浏览器的判断;
查看>>
ubuntu 18.04取消自动锁屏以及设置键盘快捷锁屏
查看>>
Oracle 初始化参数 二三事,随记
查看>>
三维凸包模板
查看>>
zoj 2432(最长递增上升子序列)
查看>>
uva 10791
查看>>
codeforces Round #440 A Search for Pretty Integers【hash/排序】
查看>>
python的字典(dict)的键值对存储规则
查看>>
more 分页显示文件内容
查看>>
ubuntu18 tensorflow cpu fast_rcnn
查看>>
PageHelper在Mybatis中的使用
查看>>
POJ 1742 Coins
查看>>
Easyui 搜索框的折叠与展开方法
查看>>