swift新手进阶30天一 自定义上图片下文字的UIButton的几种方式
2017-06-29 21:28
477 查看
目前很多app首页功能区都类似工具栏上图标加下文字的方式来自定义按钮。当然,我们也可以用两个控件实现,但是,提升不了我们的逼格。接下来就介绍几种自定义这种上图标下文字的按钮的几种方式。先上图。 ![首页自定义按钮.png](https://img-blog.csdn.net/20170629213116116?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTExMzc2MTE4MjQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
一、利用属性文本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 = image attachment.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 { //创建按钮类型为Custom let 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 = .Center btn.titleLabel?.numberOfLines = 0 btn.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 UIKit
class 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 = .Center
self.imageView?.contentMode = .ScaleAspectFit
self.titleLabel?.font = UIFont.systemFontOfSize(12)
}
//调整系统UIButton的文字的位置
override func titleRectForContentRect(contentRect: CGRect) -> CGRect {
let titleX = 0
let titleY = contentRect.size.height * 0.35
let titleW = contentRect.size.width
let titleH = contentRect.size.height - titleY
return CGRectMake(CGFloat(titleX), titleY, titleW, titleH)
}
//调整系统UIButton的图片的位置
override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
let imageW = CGRectGetWidth(contentRect)
let imageH = contentRect.size.height * 0.4
return 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.width let imageHeight = self.imageView?.frame.size.height var labelWidth: CGFloat! = 0.0 var labelHeight: CGFloat! = 0.0 labelWidth = self.titleLabel?.intrinsicContentSize().width labelHeight = self.titleLabel?.intrinsicContentSize().height //初始化imageEdgeInsets和labelEdgeInsets var imageEdgeInsets = UIEdgeInsetsZero var labelEdgeInsets = UIEdgeInsetsZero //重点: 修改imageEdgeInsets和labelEdgeInsets的相对位置的计算 imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-imageTitleSpace/2, 0, 0, -labelWidth) labelEdgeInsets = UIEdgeInsetsMake(0, -imageWidth!, -imageHeight!-imageTitleSpace/2, 0) break; self.titleEdgeInsets = labelEdgeInsets self.imageEdgeInsets = imageEdgeInsets }
相关文章推荐
- swift 自定义UIButton 图片在上 文字在下
- Swift里自定义一个文字在左、图片在右的,标题按钮
- 安卓自定义View进阶-Canvas之图片文字
- 自定义UIButton图片和文字的frame
- 自定义UIButton上的文字和图片位置
- 安卓自定义View进阶-Canvas(3)图片与文字
- UIButton图片文字控件位置自定义(图片居右文字居左、图片居中文字居中、图片居左文字消失等)
- 安卓自定义 View 进阶: 图片文字
- 自定义 UIButton(图片+文字)
- 安卓自定义 View 进阶: 图片文字
- iOS View自定义窍门——UIButton实现上显示图片,下显示文字
- 自定义View进阶-Canvas之图片文字
- EasySwift/YXJCycleView 任意视图的无限循环轮播图,可以是本地图片,可以是任意的view,可以是远程图片,再加文字描述岂不更好,pageController也支持高度自定义。
- 安卓自定义View进阶-Canvas之图片文字
- iOS UIButton 自定义图片和文字位置详解
- 自定义UIButton,文字图片位置设置 例:图片在上文字在下
- iOS View自定义窍门——UIButton实现上显示图片,下显示文字
- iOS 自定义UIButton(图片和文字混合)
- 【自定义Android带图片和文字的ImageButton】
- Ipad开发加载图片的几种方式