朋友项目中有个需求控件是文字和图片共存的，一般情况下同时显示图片文字，用UIButton就能够实现，但是他的需求比较奇特，两头是文字，中间是图片，用普通的UIButton就不能满足要求了(当然用多个控件可以实现，但控件太多，难免代码多)。于是我就封装了这样的一个控件，同时做了一些适配，可以满足只有文字，只有图片，或者只有单边(左边或者右边)文字和图片，同时也给出了布局方向，从左往右，从右往左，或者从中间往两边，由于是继承与UIControl的控件，所以也拥有了addTarget的点击事件功能。不过没有适配到能够根据内容去自动适配控件宽高，需要提前给出空间的宽高尺寸(这一点暂时没方法，想搞的可以试试哦)
更新：经测试，从中间向两边布局，若图片为空，布局会出问题，这里调整下，就算图片为空，从中间往两边也能实现文字居中布局
外界引用只需要设置一下几个属性：
leftLabel.center = CGPoint(x: view.frame.width * 0.5, y: view.frame.midY)
leftLabel.bounds = CGRect(x: 0, y: 0, width: 300, height: 40)
leftLabel.layoutDirection = .center
leftLabel.backgroundColor = UIColor.orange
leftLabel.beforeHalfText = "测试: "
leftLabel.behindHalfText = "后面的 "
leftLabel.imageName = "timeLine_icon"
至于内部的一些实现逻辑，下面值粘贴处三种布局的方式，详细的代码在最后会附带上gitHub源码以及实例，感兴趣的童鞋可以下载下来看一下
1.从左往右布局
private func layoutFromLeft() {
let maxSize = frame.size
var maxX = padding
if let beforeText = beforeHalfText {
let beforeSize = stringSize(string: beforeText, maxSize: maxSize, font: beforeHalfFont!, color: beforeHalfColor)
beforeHalfLabel.center = CGPoint(x: maxX + beforeSize.width * 0.5, y: frame.height * 0.5)
beforeHalfLabel.bounds = CGRect(x: 0, y: 0, width: beforeSize.width, height: beforeSize.height)
maxX = beforeHalfLabel.frame.maxX + padding
}
if imageName != nil {
let imageW = imageHeight == 0 ? frame.height - 2 * 10 : imageHeight
contentImageView.center = CGPoint(x: maxX + imageW * 0.5, y: frame.height * 0.5)
contentImageView.bounds = CGRect(x: 0, y: 0, width: imageW, height: imageW)
maxX = contentImageView.frame.maxX + padding
}
if let behindText = behindHalfText {
let beforeSize = stringSize(string: behindText, maxSize: maxSize, font: behindHalfFont!, color: behindHalfColor)
behindHalfLabel.center = CGPoint(x: maxX + beforeSize.width * 0.5, y: frame.height * 0.5)
behindHalfLabel.bounds = CGRect(x: 0, y: 0, width: beforeSize.width, height: beforeSize.height)
}
}
2.从右往左布局
private func layoutFromRight() {
let maxSize = frame.size
var minX = padding
if let behindText = behindHalfText {
let beforeSize = stringSize(string: behindText, maxSize: maxSize, font: behindHalfFont!, color: behindHalfColor)
behindHalfLabel.center = CGPoint(x: frame.width - minX - beforeSize.width * 0.5, y: frame.height * 0.5)
behindHalfLabel.bounds = CGRect(x: 0, y: 0, width: beforeSize.width, height: beforeSize.height)
minX = behindHalfLabel.frame.minX - padding
}
if imageName != nil {
let imageW = imageHeight == 0 ? frame.height - 2 * 10 : imageHeight
contentImageView.center = CGPoint(x: minX - imageW * 0.5, y: frame.height * 0.5)
contentImageView.bounds = CGRect(x: 0, y: 0, width: imageW, height: imageW)
minX = contentImageView.frame.minX - padding
}
if let beforeText = beforeHalfText {
let beforeSize = stringSize(string: beforeText, maxSize: maxSize, font: beforeHalfFont!, color: beforeHalfColor)
beforeHalfLabel.center = CGPoint(x: minX - beforeSize.width * 0.5, y: frame.height * 0.5)
beforeHalfLabel.bounds = CGRect(x: 0, y: 0, width: beforeSize.width, height: beforeSize.height)
}
}
3.从中间向两边布局
private func layoutFromCenter() {
let maxSize = frame.size
if imageName != nil {
let imageW = imageHeight == 0 ? frame.height - 2 * 10 : imageHeight
contentImageView.center = CGPoint(x: frame.width * 0.5, y: frame.height * 0.5)
contentImageView.bounds = CGRect(x: 0, y: 0, width: imageW, height: imageW)
}
if let beforeText = beforeHalfText {
let minX = imageName == nil ? frame.width * 0.5 : contentImageView.frame.minX
let beforeSize = stringSize(string: beforeText, maxSize: maxSize, font: beforeHalfFont!, color: beforeHalfColor)
beforeHalfLabel.center = CGPoint(x: minX - padding - beforeSize.width * 0.5, y: frame.height * 0.5)
beforeHalfLabel.bounds = CGRect(x: 0, y: 0, width: beforeSize.width, height: beforeSize.height)
}
if let behindText = behindHalfText {
let maxX = imageName == nil ? frame.width * 0.5 : contentImageView.frame.maxX
let beforeSize = stringSize(string: behindText, maxSize: maxSize, font: behindHalfFont!, color: behindHalfColor)
behindHalfLabel.center = CGPoint(x: maxX + padding + beforeSize.width * 0.5, y: frame.height * 0.5)
behindHalfLabel.bounds = CGRect(x: 0, y: 0, width: beforeSize.width, height: beforeSize.height)
}
}
此外可以自己设定左边文字，右边文字的字体颜色，字体大小以及文字对齐方式，图片的尺寸也可以自己外界控制，实现的功能很简单，通用性未必那么强大，遇到合适的需求稍加修改还是可以用的，最后附上我的gitHub源码，请多多支持！有问题或者别的想法的大大们，可以在评论区沟通，能够将通用型扩展就更好啦！
网友评论