第一种方式
自定义属性文字来对UIButton的文字进行赋值得出效果
// MARK: -使用图像和文本生成上下排列的属性文本
extension NSAttributedString {
class func imageTextInit(image: UIImage, imageWH: CGFloat, labelTitle: String, fontSize: CGFloat, titleColor: UIColor, labelSpacing: CGFloat) -> NSAttributedString{
//图片文本
let attachment = NSTextAttachment()
attachment.image = image
attachment.bounds = CGRectMake(0, 0, imageWH, imageWH)
let imageText = NSAttributedString(attachment: attachment)
//标题文本
let titleDict = [NSFontAttributeName: UIFont.systemFontOfSize(fontSize), NSForegroundColorAttributeName: titleColor]
let text = NSAttributedString(string: labelTitle, attributes: titleDict)
//换行文本
let spaceDict = [NSFontAttributeName:UIFont.systemFontOfSize(labelSpacing)]
let lineText = NSAttributedString(string: "\n\n", attributes: spaceDict)
//合并文字
let mutableAttr = NSMutableAttributedString(attributedString: imageText)
mutableAttr.appendAttributedString(lineText)
mutableAttr.appendAttributedString(text)
return mutableAttr.copy() as! NSAttributedString
}
}
第二种方式
利用系统属性对UIButton进行修改得出效果
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)
}
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)
}
override func imageRectForContentRect(contentRect: CGRect) -> CGRect {
let imageW = CGRectGetWidth(contentRect)
let imageH = contentRect.size.height * 0.4
return CGRectMake(0, 5, imageW, imageH)
}
}
第三种方式
利用UIButton的文字与图片的相对位置计算得出效果
1、理论基础
1、titleEdgeInsets是titleLabel相对于其上下左右的inset,跟tableView的contentInset是类似的;
2、如果只有title,那titleLabel的 上下左右 都是 相对于Button 的;
3、如果只有image,那imageView的 上下左右 都是 相对于Button 的;
4、如果同时有image和label,那image的 上下左 是 相对于Button 的,右 是 相对于label 的;
5、label的 上下右 是 相对于Button的, 左 是 相对于label 的。
2、代码实现
//MARK: -定义button相对label的位置
enum YWButtonEdgeInsetsStyle {
case Top
case Left
case Right
case Bottom
}
extension UIButton {
func layoutButton(style: YWButtonEdgeInsetsStyle, 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
let version = NSBundle.mainBundle().infoDictionary!["CFBundleShortVersionString"] as! String
if Double(version) >= 8.0 {
labelWidth = self.titleLabel?.intrinsicContentSize().width
labelHeight = self.titleLabel?.intrinsicContentSize().height
}else{
labelWidth = self.titleLabel?.frame.size.width
labelHeight = self.titleLabel?.frame.size.height
}
//初始化imageEdgeInsets和labelEdgeInsets
var imageEdgeInsets = UIEdgeInsetsZero
var labelEdgeInsets = UIEdgeInsetsZero
//根据style和space得到imageEdgeInsets和labelEdgeInsets的值
switch style {
case .Top:
//上 左 下 右
imageEdgeInsets = UIEdgeInsetsMake(-labelHeight-imageTitleSpace/2, 0, 0, -labelWidth)
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWidth!, -imageHeight!-imageTitleSpace/2, 0)
break;
case .Left:
imageEdgeInsets = UIEdgeInsetsMake(0, -imageTitleSpace/2, 0, imageTitleSpace)
labelEdgeInsets = UIEdgeInsetsMake(0, imageTitleSpace/2, 0, -imageTitleSpace/2)
break;
case .Bottom:
imageEdgeInsets = UIEdgeInsetsMake(0, 0, -labelHeight!-imageTitleSpace/2, -labelWidth)
labelEdgeInsets = UIEdgeInsetsMake(-imageHeight!-imageTitleSpace/2, -imageWidth!, 0, 0)
break;
case .Right:
imageEdgeInsets = UIEdgeInsetsMake(0, labelWidth+imageTitleSpace/2, 0, -labelWidth-imageTitleSpace/2)
labelEdgeInsets = UIEdgeInsetsMake(0, -imageWidth!-imageTitleSpace/2, 0, imageWidth!+imageTitleSpace/2)
break;
}
self.titleEdgeInsets = labelEdgeInsets
self.imageEdgeInsets = imageEdgeInsets
}
网友评论