QQ20170817-0.png

之前遇到上圖下文、下圖上文的item年鸳，都是用UIImageView + Label的方式解決趴久，過于麻煩。一直想通過設置button的圖文位置來實現這種需求搔确，但是無奈EdgeInsets總是設置不對彼棍，每次使用每次去算已添。某次在github上看到一個demo受到了啟發(fā)，經我使用過程中改良后滥酥，現在只需要設置DirectionButton的圖片方位更舞、圖片和文字的間距，即能隨心所欲實現button的圖文位置坎吻，即便文字寬度大于圖片寬度缆蝉，也能居中顯示，實現需求瘦真。

//按鈕中圖片的位置
public enum ImageAlignment: Int {
    //  默認圖片在上
    case top = 0
    case left = 1
    case bottom = 2
    case right = 3
}

class DirectionButton: UIButton {
    var imageAlignment: ImageAlignment = .top //默認上圖下文
    var spaceBetweenTitleAndImage: CGFloat = 10
    override func layoutSubviews() {
        super.layoutSubviews()
        let space = self.spaceBetweenTitleAndImage
        let titleW = self.titleLabel?.bounds.size.width
        let titleH = self.titleLabel?.bounds.size.height
        let imageW = self.imageView?.bounds.size.width
        let imageH = self.imageView?.bounds.size.height
        
        let btnCenterX = self.bounds.size.width / 2 //按鈕中心點X的坐標（以按鈕左上角為原點的坐標系）
        let imageCenterX = btnCenterX - titleW!/2; //imageView中心點X的坐標（以按鈕左上角為原點的坐標系）
        //let titleCenterX = btnCenterX + imageW!/2;//titleLabel中心點X的坐標（以按鈕左上角為原點的坐標系）
        
        switch imageAlignment {
        case .top:
            self.titleEdgeInsets = UIEdgeInsetsMake(imageH!/2 + space/2, -imageW!, -(imageH!/2 + space/2), 0)
            self.imageEdgeInsets = UIEdgeInsetsMake(-(titleH!/2 + space/2), btnCenterX - imageCenterX, titleH!/2 + space/2, -(btnCenterX - imageCenterX))
            self.imageView?.center.x = (self.titleLabel?.center.x)!
            self.titleLabel?.textAlignment = .center
            
        case .left:
            self.titleEdgeInsets = UIEdgeInsetsMake(0, space/2, 0,  -(space/2))
            self.imageEdgeInsets = UIEdgeInsetsMake(0, -(space/2), 0, space/2)
            
        case .bottom:
            self.titleEdgeInsets = UIEdgeInsetsMake(-(imageH!/2 + space/2), -imageW!, imageH!/2 + space/2, 0)
            self.imageEdgeInsets = UIEdgeInsetsMake(titleH!/2 + space/2, btnCenterX - imageCenterX,-(titleH!/2 + space/2), -(btnCenterX - imageCenterX))
            self.imageView?.center.x = (self.titleLabel?.center.x)!
            self.titleLabel?.textAlignment = .center
            
        case .right:
            self.titleEdgeInsets = UIEdgeInsetsMake(0, -(imageW! + space/2), 0, imageW! + space/2)
            self.imageEdgeInsets = UIEdgeInsetsMake(0, titleW! + space/2, 0, -(titleW! + space/2))
        }
    }
}

使用方式刊头，其他設置與UIButton無異

let testButton = DirectionButton()
testButton.imageAlignment = .top //上圖下文
testButton.spaceBetweenTitleAndImage = 3 //圖片與文字之間的間距