朋友項(xiàng)目中有個(gè)需求控件是文字和圖片共存的，一般情況下同時(shí)顯示圖片文字，用UIButton就能夠?qū)崿F(xiàn)，但是他的需求比較奇特，兩頭是文字，中間是圖片，用普通的UIButton就不能滿足要求了(當(dāng)然用多個(gè)控件可以實(shí)現(xiàn)，但控件太多，難免代碼多)。于是我就封裝了這樣的一個(gè)控件，同時(shí)做了一些適配，可以滿足只有文字，只有圖片，或者只有單邊(左邊或者右邊)文字和圖片，同時(shí)也給出了布局方向，從左往右，從右往左，或者從中間往兩邊，由于是繼承與UIControl的控件，所以也擁有了addTarget的點(diǎn)擊事件功能。不過沒有適配到能夠根據(jù)內(nèi)容去自動(dòng)適配控件寬高，需要提前給出空間的寬高尺寸(這一點(diǎn)暫時(shí)沒方法，想搞的可以試試哦)
更新：經(jīng)測(cè)試，從中間向兩邊布局，若圖片為空，布局會(huì)出問題，這里調(diào)整下，就算圖片為空，從中間往兩邊也能實(shí)現(xiàn)文字居中布局
外界引用只需要設(shè)置一下幾個(gè)屬性：
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 = "測(cè)試: "
leftLabel.behindHalfText = "后面的 "
leftLabel.imageName = "timeLine_icon"
至于內(nèi)部的一些實(shí)現(xiàn)邏輯，下面值粘貼處三種布局的方式，詳細(xì)的代碼在最后會(huì)附帶上gitHub源碼以及實(shí)例，感興趣的童鞋可以下載下來(lái)看一下
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)
}
}
此外可以自己設(shè)定左邊文字，右邊文字的字體顏色，字體大小以及文字對(duì)齊方式，圖片的尺寸也可以自己外界控制，實(shí)現(xiàn)的功能很簡(jiǎn)單，通用性未必那么強(qiáng)大，遇到合適的需求稍加修改還是可以用的，最后附上我的gitHub源碼，請(qǐng)多多支持！有問題或者別的想法的大大們，可以在評(píng)論區(qū)溝通，能夠?qū)⑼ㄓ眯蛿U(kuò)展就更好啦！
