时间:2021-05-20
前言
相信每位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
如上述例子若改为:
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.sizevar titleSize:CGSize = button.titleLabel!.frame.sizebutton.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。
总结
以上就是这篇文章的全部内容了,本文还有许多不足,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对的支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐。设置各对象的vertical-alig
在iOS的实际开发中,如果我们把一张有图片(有特别形状的,特别是类似有圆角的图片)放在UIButton中,当UIButton改变大小是,图片可能会被拉伸并且产生
iOS中UILabel设置居上对齐、居中对齐、居下对齐在iOS中默认的UILabel中的文字在竖直方向上只能居中对齐,博主参考国外网站,从UILabel继承了一
在使用UIButton的时候,需要实现UIButton左边图片,图片后面紧跟文字效果比较麻烦,简单实现方法具体代码如下:(void)viewDidLoad{[s
在HTML代码中,有时会需要在文字旁边加上一个图标。默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐解决办法:在css中设置图片