脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → IOS → iOS将UIButton中图片与文字上下对齐

iOS如何将UIButton中的图片与文字上下对齐详解

 更新时间：2017年10月19日 10:28:25   作者：iOS_ziank  
对于UIButton实现上显示图片,下显示文字这个需求估计各位iOS开发者们都不陌生，所以下面这篇文章主要给大家介绍了关于iOS如何将UIButton中图片与文字上下对齐的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。

前言

相信每位iOS开发者都知道在UIButton中可以设置图片和文字，也经常见到同时设置有图片和下方提示文字的按钮，但是当我自己去对图片按钮添加提示文字的时候，却发现这并不是想象中的那么简单。怎么不简单呢？下面来一起看看详细的介绍吧。

设置图片和文字

如示例代码：

func initView() -> Void {
var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100))

button.setImage(UIImage(named: "button.png"), forState: UIControlState.Normal)
button.setTitle("按钮", forState: UIControlState.Normal)
button.backgroundColor = UIColor.blueColor()

self.view.addSubview(button)
}

我们可以通过UIButton的setTitle和setImage方法分别为按钮设置图片和文字信息，但是会发现设置完成以后我们的图片和文字并没有重合排列，也没有上下排列，而是一个左右排列的样子。


设置图片和文字

说到这里，肯定会有人想到设置图片和文字的frame来进行处理，而且我们也确实可以通过UIButton的对象获取到对应的imageView和titleLabel，但是如果经过测试的话，你就会发现这是一个trike的方法，而且是不生效的。

func initView() -> Void {
var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100))

button.setImage(UIImage(named: "button.png"), forState: UIControlState.Normal)
button.setTitle("按钮", forState: UIControlState.Normal)
button.backgroundColor = UIColor.blueColor()
button.titleLabel?.frame = CGRectMake(20, 0, 30, 30)
button.imageView?.frame = CGRectMake(0, 0, 20, 20)

self.view.addSubview(button)
}

修改为这样以后，运行程序，会发现对应的视图没有任何变化。


添加frame设置

UIEdgeInsets

查看UIButton的属性，我们会找到titleEdgeInsets和imageEdgeInsets两个属性。修改这两个属性，可以实现我们想要的效果。

titleEdgeInsets和imageEdgeInsets都是UIEdgeInsets的对象，我们先说一下UIEdgeInsets的几个属性的具体效果。

我们知道，UIEdgeInsets有top，left，bottom，right几个属性，但是通过测试，就会发现设置了top以后自己的y坐标并没有增加响应的距离，而是增加了1/2，那么它们到底应该如何计算呢？

当设置了top以后，其实就是相当于view的上边缘向下移动了相应的距离。用在title中，如果titleLabel的frame(50, 50, 24, 24);那么Button的上下边缘应该分别是0和124，因为正常情况下titleLabel必然处于Button的中间位置。当设置了titleEdgeInsets的top为10以后，相当于button的上下坐标为10，124，则titleLabel的坐标就变成了(50, 55, 24, 24)，也就是上下边缘变为了55和79， 向下移动了5个点。

经过计算可以得出，如果要将文字移动到图片的下方，需要设置titleEdgeInsets和imageEdgeInsets，且分别设置为
若titleLabel为 w1,h1, imageView为w2,h2, 上下间距为space

titleEdgeInsets = (h2 + space, - w2, 0, 0)
imageEdgeInsets = (-h1 - space, w1)

如上述例子若改为：

func initView() -> Void {
var button:UIButton = UIButton(frame: CGRectMake(100, 200, 100, 100))

button.setImage(UIImage(named: "button.png"), forState: UIControlState.Normal)
button.setTitle("按钮", forState: UIControlState.Normal)
button.backgroundColor = UIColor.blueColor()

var imageSize:CGSize = button.imageView!.frame.size
var titleSize:CGSize = button.titleLabel!.frame.size
button.titleEdgeInsets = UIEdgeInsets(top: 0, left:-imageSize.width, bottom: -imageSize.height - 5, right: 0)
button.imageEdgeInsets = UIEdgeInsets(top: -titleSize.height - 5, left: 0, bottom: 0, right: -titleSize.width)
self.view.addSubview(button)
}

则可实现我们要求的效果：


设置insets

注意：如果设置了button的frame，而且button的宽度不足以同时显示图片和文字的大小的话，titleLabel的size将会获取错误。所以如果需要设置frame，建议先将button的宽度设置为frame.size.width * 2, 等titleEdgeInsets和imageEdgeInsets全部设置完成以后再重新设置frame。

总结

以上就是这篇文章的全部内容了，本文还有许多不足，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

相关文章

  • iOS利用UIScrollView实现图片的缩放实例代码

    iOS利用UIScrollView实现图片的缩放实例代码

    本篇文章主要介绍了iOS利用UIScrollView实现图片的缩放实例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-07-07
  • iOS Xcode自定义代码块及迁移的实现方法

    iOS Xcode自定义代码块及迁移的实现方法

    这篇文章主要给大家介绍了关于iOS Xcode自定义代码块及迁移的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用iOS Xcode具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-04-04
  • iOS之Cocoapods安装教程(全面解析)

    iOS之Cocoapods安装教程(全面解析)

    下面小编就为大家带来一篇iOS之Cocoapods安装教程(全面解析)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • iOS开发中Date Picker和UITool Bar控件的使用简介

    iOS开发中Date Picker和UITool Bar控件的使用简介

    这篇文章主要介绍了iOS开发中Date Picker和UITool Bar控件的使用简介,代码基于传统的Objective-C,需要的朋友可以参考下
    2016-01-01
  • iOS NSNotificationCenter通知中心使用小结

    iOS NSNotificationCenter通知中心使用小结

    IOS中经常会使用到NSNotification和delegate来进行一些类之间的消息传递，这篇文章主要介绍了iOS NSNotificationCenter使用小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Flutter列表滚动定位超强辅助库使用示例详解

    Flutter列表滚动定位超强辅助库使用示例详解

    这篇文章主要为大家介绍了Flutter列表滚动定位超强辅助库使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • 百度云推送图文教程IOS

    百度云推送图文教程IOS

    这篇文章主要介绍了百度云推送图文教程IOS 的相关资料,需要的朋友可以参考下
    2016-01-01
  • iOS 正则表达式判断手机号码、固话

    iOS 正则表达式判断手机号码、固话

    本文主要介绍了iOS 正则表达式判断手机号码、固话，以及匹配是否是移动/联通/电信手机号的方法。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-03-03
  • 解决ios模拟器不能弹出键盘问题的方法

    解决ios模拟器不能弹出键盘问题的方法

    这篇文章主要为大家详细介绍了解决ios模拟器不能弹出键盘问题的方法，大多数原因是误用了快捷键，如何解决？感兴趣的小伙伴们可以参考一下
    2016-03-03
  • iOS中WKWebView的一些特殊使用总结

    iOS中WKWebView的一些特殊使用总结

    这篇文章主要给大家介绍了关于iOS中WKWebView的一些特殊使用，文中通过示例代码介绍的非常详细，对大家学习或者使用iOS具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12

最新评论