swift新手进阶30天一 自定义上图片下文字的UIButton的几种方式
2024-04-12 15:25:21
目前很多app首页功能区都类似工具栏上图标加下文字的方式来自定义按钮。当然，我们也可以用两个控件实现，但是，提升不了我们的逼格。接下来就介绍几种自定义这种上图标下文字的按钮的几种方式。先上图。
一、利用属性文本NSAttributedString来生成图片文本上下排列的按钮
1.复写NSAttributedString方法
// MARK: -使用图像和文本生成上下排列的属性文本
extension NSAttributedString {//将图片属性以及文字属性用方法名传入class func imageTextInit(image: UIImage, imageW: CGFloat, imageH: CGFloat, labelTitle: String, fontSize: CGFloat, titleColor: UIColor, labelSpacing: CGFloat) -> NSAttributedString{//1.将图片转换成属性文本let attachment = NSTextAttachment()attachment.image = imageattachment.bounds = CGRectMake(0, 0, imageW, imageH)let imageText = NSAttributedString(attachment: attachment)//2.将标题转化为属性文本let titleDict = [NSFontAttributeName: UIFont.systemFontOfSize(fontSize), NSForegroundColorAttributeName: titleColor]let text = NSAttributedString(string: labelTitle, attributes: titleDict)//3.换行文本可以让label长度不够时自动换行let spaceDict = [NSFontAttributeName:UIFont.systemFontOfSize(labelSpacing)]let lineText = NSAttributedString(string: "\n\n", attributes: spaceDict)//4.合并属性文字let mutableAttr = NSMutableAttributedString(attributedString: imageText)mutableAttr.appendAttributedString(lineText)mutableAttr.appendAttributedString(text)//5.将属性文本返回return mutableAttr.copy() as! NSAttributedString}}2.写好了属性文本，接下来就把添加进UIButton中去
class func YWHomeListButton(imageName: String, titleName: String!) -> UIButton {//创建按钮类型为Customlet btn = UIButton(type: .Custom)//获取我们刚得到的属性文本，直接是NSAttributedString的子方法了let attrStr = NSAttributedString.imageTextInit(UIImage(named: imageName)!, imageW: SCREEN_WIDTH/8*3/2, imageH: SCREEN_WIDTH/8, labelTitle: titleName, fontSize: 12, titleColor: UIColor.lightGrayColor(), labelSpacing: 4)//设置按钮基本属性btn.titleLabel?.textAlignment = .Centerbtn.titleLabel?.numberOfLines = 0btn.setAttributedTitle(attrStr, forState: .Normal)return btn}3.接下来就可以用我们刚自己定义的按钮了
let btn1 = UIButton.YWHomeListButton("homeList1", titleName: "抽奖")
let btn2 = UIButton.YWHomeListButton("homeList2", titleName: "领红包")
let btn3 = UIButton.YWHomeListButton("homeList3", titleName: "蜂抱团")
let btn4 = UIButton.YWHomeListButton("homeList4", titleName: "一元购")二、修改UIButton系统的titleRectForContentRect和imageRectForContentRect方法来改变文字和图片的相对位置
1.通过计算得出我们需要的上下排列的效果
import UIKitclass YWButton: UIButton {override init(frame: CGRect) {super.init(frame: frame)commonInit()}required init?(coder aDecoder: NSCoder) {fatalError("init(coder:) has not been implemented")}//设置按钮的基本属性func commonInit() {self.titleLabel?.textAlignment = .Centerself.imageView?.contentMode = .ScaleAspectFitself.titleLabel?.font = UIFont.systemFontOfSize(12)}//调整系统UIButton的文字的位置override func titleRectForContentRect(contentRect: CGRect) -> CGRect {let titleX = 0let titleY = contentRect.size.height * 0.35let titleW = contentRect.size.widthlet titleH = contentRect.size.height - titleYreturn CGRectMake(CGFloat(titleX), titleY, titleW, titleH)}//调整系统UIButton的图片的位置override func imageRectForContentRect(contentRect: CGRect) -> CGRect {let imageW = CGRectGetWidth(contentRect)let imageH = contentRect.size.height * 0.4return CGRectMake(0, 5, imageW, imageH)}
}2.接下来就可以直接应用我们自己的控件了
let basketBtn = YWButton(type: .Custom)basketBtn.setTitleColor(themeColor, forState: .Normal)basketBtn.setTitle("购物车", forState: .Normal)basketBtn.setImage(UIImage(named: "YS_car_sel"), forState: .Normal)toolBarView.addSubview(basketBtn)let storeBtn = YWButton(type: .Custom)storeBtn.setTitleColor(themeColor, forState: .Normal)storeBtn.setTitle("店铺", forState: .Normal)storeBtn.setImage(UIImage(named: "ysstoreIcon"), forState: .Normal)toolBarView.addSubview(storeBtn)三、修改UIButton的EdgeInset属性来改变文字与图片的相对位置
extension UIButton {func layoutButton(imageTitleSpace: CGFloat) {//得到imageView和titleLabel的宽高let imageWidth = self.imageView?.frame.size.widthlet imageHeight = self.imageView?.frame.size.heightvar labelWidth: CGFloat! = 0.0var labelHeight: CGFloat! = 0.0labelWidth = self.titleLabel?.intrinsicContentSize().widthlabelHeight = self.titleLabel?.intrinsicContentSize().height//初始化imageEdgeInsets和labelEdgeInsetsvar imageEdgeInsets = UIEdgeInsetsZerovar labelEdgeInsets = UIEdgeInsetsZero//重点： 修改imageEdgeInsets和labelEdgeInsets的相对位置的计算imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-imageTitleSpace/2, 0, 0, -labelWidth)labelEdgeInsets = UIEdgeInsetsMake(0, -imageWidth!, -imageHeight!-imageTitleSpace/2, 0)break;self.titleEdgeInsets = labelEdgeInsetsself.imageEdgeInsets = imageEdgeInsets}swift新手进阶30天一 自定义上图片下文字的UIButton的几种方式相关推荐
- Qt5.9自定义按钮实例（上图片下文字，图片文字间距任意可调）
本博客主要总结一个自定义的按钮实例.该实例实现的效果是上面是图片.下面是文字,其中图片位置和文字位置任意可调. 该自定义控件的实现思路如下: a1.新建一个类,该类继承QPushbutton,由于QP ...
- Markdown——图片、文字显示居中的一种方法
Markdown--图片.文字显示居中的一种方法 一.方法 1.1 图片居中 1.2 文字居中 二.图片居中举例 2.1 编辑界面 2.2 显示界面 一.方法 1.1 图片居中 在图片下面的链接的最后 ...
- 图片提取文字怎么做？两种途径可以一试
在日常办公学习中,我们经常会碰到需要处理图片上文字的问题,逐字逐句敲键盘费时费力,现在市面上已经有不少支持图片提取文字的软件,使用起来方便快捷.接下来介绍以下两种,一键缩减你的时间成本. 1.我们可以 ...
- 怎么图片转文字提取？推荐四种图片转文字的方法
我有一个习惯就是遇到重点内容.重要的资料就会拍照保存起来,一方面是怕自己转过头就忘了内容,另一方面也是为了能够更好的整理资料. 因为通常一份资料或者课堂内容我都会拍摄7到8张左右的照片,所以如果有时间 ...
- 图片转文字怎么弄？图文转换方式说明
图片转文字技术是一种将图片中的文字内容自动转换为文字形式的技术,也被称为OCR技术(Optical Character Recognition). 目前市面上有很多图片转文字的软件,其中一些比较知名的 ...
- ajax上传多文件和数据,Ajax上传数据和上传文件（三种方式）
Ajax向后端发送数据可以有三种方式:原生Ajax方式,jQuery Ajax方式,iframe+form 方式(伪造Ajax方式) Title .btn { background-color: co ...
- 图片懒加载(lazyload)的几种方式
背景 当页面中有很多图片时,全部加载需要很多时间,而且会消耗很多渲染资源,为了解决这个问题,加强用户体验,我们先将看得到的区域中的图片加载,也就是 可视化区域 加载,剩余部分等之后再加载. 原理 ...
- python 图片和base64互转的三种方式
通过cv2进行转换 import cv2 import base64 import numpy as npdef img_to_base64(img_array):# 传入图片为RGB格式numpy矩 ...
- 安卓进阶系列-04自定义原型图片显示(CircleImageView)的使用
CircleImageView的使用 背景 在APP的使用过程,很多情况下默认的ImageView是不能满足需求的,由于图片大小.形状等等影响,圆形的图片显示未免有些过于难看,这种情况下圆形图片展示更 ...
最新文章
- 字节流的 创建 写入文字 复制文件
- python抓取数据库数据封装成json_用Python将mysql数据导出成json的方法
- 【caffe解读】 caffe从数学公式到代码实现2-基础函数类
- 20211005 Hermite矩阵及几个性质
- There are NAN in the matrix, however, you did not set missing=NAN
- 首次落地中国大陆的OpenInfra：中国对于开源做出的贡献力量已不可忽视
- 查询oracle 数据库中回滚段中一个时间点被修改的表数据并还原表中原来数据
- S5PV210 芯片降价
- python 中的 [-1::1] 啥意思
- php函数end,PHP end()函数
- SCP,两台机器互相使用拷贝
- 天翼网关如何开启虚拟服务器,天翼网关怎么设置wifi密码？天翼网关如何开启或关闭WIFI...
- vmstat命令参数及其介绍
- python django跨域解决csrf_exempt
- 解决页面怎么模拟手机端屏幕
- java学习之集合Set
- 解决 Ubuntu 安装显卡驱动后，屏幕变黄的原因
- 40、卤代烷灭火系统模拟喷气试验
- cmd查看端口占用,结束进程
- Cellular Pro简介