iOS UIButton 图片和文字布局调整

作者: kingsic | 来源:发表于2017-09-17 16:30 被阅读914次
    image_icon.png

    描述:

    • a. 项目中经常会遇到图片在上,文字在下的这种布局样式(整体的布局你可以采用 UICollectionView,也可采用 for 循环创建 UIButton,但 UIButton 你需要自行处理)
    • b. 之前我的做法是通过自定义 UIButton,在 -layoutSubviews 方法中,调整 imageView 与 titleLabel 的 frame

    解决这种问题的方法大致有 3 种:

    • a. 自定义一个视图,使用 UIImageView 和 UILabel 进行布局调整
    • b. 自定义 UIButton,就像我之前一样,在 UIButton 的 - (void)layoutSubviews,方法中调整 imageView 与 titleLabel 的 frame 即可
    • c. 调整 UIButton 的 imageEdgeInsets 与 titleEdgeInsets 属性即可

    方法分析

    • a. 第一种方案:我是压根不会采取的,很麻烦,完全没有必要这样做;苹果既然提供了 UIButton 且属性中有解决方案,为何还要麻烦呢?
    • b. 第二种方案:我之前一直这样用的,但现在不想用了;很简单,还需要自定义 UIButton,在内部调整 imageView 与 titleLabel 的 frame;而我仅仅想调整一下 UIButton 的 imageView 与 titleLabel 布局而已,何必兴师动众的再去自定义一个 UIButton 呢?给 UIButton 添加一个分类,拓展一个方法,岂不是更好?
    • c. 第三种方案:在开始解决问题之前,还是需要查阅一下资料,毕竟网友的力量是强大的且是我最好的老师。但经过一番查阅之后,所得到的资料都不是我想要的,我想要什么?满足三要素即可:最简单的思路、最简洁的代码、最高效的方法;而我搜索的博客以及 GitHub 上面的代码都不满足我的三要素,都不是我想要的那个梗。难道就没有了吗?这是不可能的,最后看到了这篇文章;我知道,我因为这个小问题查阅资料所花费的时间是值得的;对,没错,就是她

    最后提供一下我的解决方案(前面都是废话,可以略去昂,😄😄)

    先看一下效果图
    屏幕快照 2017-09-18 下午10.19.58.png

    分类的 .h 文件介绍

    屏幕快照 2017-09-17 下午4.23.06.png

    分类的 .m 文件介绍

    屏幕快照 2017-09-17 下午4.23.39.png

    看完源码是不是觉得很简单?对,就是很简单

    END

    1、小问题,都是小问题;你大可不必在意,但我在意了,在意之后就自己写了一篇关于 UIButton 调整 imageView 与 titleLabel 文章
    2、GitHub下载地址 ,旨在为你编程的道路上提供更有效的解决方法

    参考文章:
    是我要的,帮我解决了问题
    intrinsicContentSize 介绍

    相关文章

      网友评论

      • 请叫我小白同学:大佬,要是通masonry布局,里面的图文,会偏移很大哦,你是怎么解决的?
      • 胡子来了:蛮不错的。
      • 洁简:问一下为何有的用self.titleLabel.frame.size.width 有的用self.titleLabel.intrinsicContentSize.height 还有我用第一个获取不到大小 为何? 还有demo返回有点问题
        春暖花已开:@洁简 我想你认错了,我不是作者
        洁简:@人民重重 那为何你right时用的self.titleLabel.frame.size.width
        春暖花已开:@洁简 因为在iOS8之后,就需要用intrisic了
      • 玉思盈蝶:有个问题..当你改变button的title的时候...比如文字变多,布局就乱了
        kingsic:@玉思盈蝶 如果你有这种需求,可以根据计算字符串长度,设置按钮的宽度;Demo 中只提供参考
        玉思盈蝶:@kingsic 我的意思是你button本来是这么宽写死的,点击按钮改变button的文字内容(文字变多)...
        kingsic:试过了,并没有发现你说的问题,文字过多,按钮尺寸固定,中间显示...

      本文标题:iOS UIButton 图片和文字布局调整

      本文链接:https://www.haomeiwen.com/subject/hwxqsxtx.html