2016-09-17 137 views
1

我試圖創建一個按鈕,看起來像這樣:按鈕右對齊圖像x指向從右側

enter image description here

所以具有邊框和右邊ImageView的。

我的子類的UIButton這樣的:

class ButtonWithRightImage: UIButton { 

    override func imageRectForContentRect(contentRect:CGRect) -> CGRect { 
     var imageFrame = super.imageRectForContentRect(contentRect) 
     imageFrame.origin.x = CGRectGetMaxX(super.titleRectForContentRect(contentRect)) - CGRectGetWidth(imageFrame) 
     return imageFrame 
    } 

    override func titleRectForContentRect(contentRect:CGRect) -> CGRect { 
     var titleFrame = super.titleRectForContentRect(contentRect) 
     if (self.currentImage != nil) { 
      titleFrame.origin.x = CGRectGetMinX(super.imageRectForContentRect(contentRect)) 
     } 
     return titleFrame 
    } 
} 

我建立了我的按鈕,如下:

lazy var testButton: ButtonWithRightImage = { 
    let button = ButtonWithRightImage(forAutoLayout:()) 

    button.setTitle("Privacy", forState: .Normal) 
    button.setTitleColor(UIColor.DarkBlue(), forState: .Normal) 

    button.layer.borderWidth = 1 
    button.layer.borderColor = UIColor.grey().CGColor 

    button.setImage(UIImage(named: "arrow"), forState: .Normal) 

    button.contentHorizontalAlignment = .Left 
    button.contentEdgeInsets = UIEdgeInsetsMake(0, 20, 0, 0) 

    return button 
}() 

現在我的按鈕看起來是這樣的:

enter image description here

正如你可以看到圖像沒有與從右邊20點對齊。 我想不出如何做到這一點。我使用自動佈局來顯示按鈕,所以我不能只修改我猜的框架。

回答

3

當你的ButtonWithRightImage類需要修改,以達到輸出按您的要求。

class ButtonWithRightImage: UIButton { 

    override func imageRectForContentRect(contentRect:CGRect) -> CGRect { 
     var imageFrame = super.imageRectForContentRect(contentRect) 
     imageFrame.origin.x = CGRectGetWidth(contentRect) - CGRectGetWidth(imageFrame) 
     return imageFrame 
    } 

    override func titleRectForContentRect(contentRect:CGRect) -> CGRect { 
     var titleFrame = super.titleRectForContentRect(contentRect) 
     if (self.currentImage != nil) { 
      titleFrame.origin.x = CGRectGetMinX(super.imageRectForContentRect(contentRect)) 
     } 
     return titleFrame 
    } 
} 

問題是您需要從container width減去圖像寬度。價值取代container maxX

讓我知道你是否對此有任何評論。

由於

+0

謝謝你:-)的工作原理就像請求。 – user1007522

0

設置imageEdgeInsets的按鈕類似下面的代碼: -

lazy var testButton: ButtonWithRightImage = 
{ 
    let button = ButtonWithRightImage(forAutoLayout:()) 

    button.setTitle("Privacy", forState: .Normal) 
    button.setTitleColor(UIColor.DarkBlue(), forState: .Normal) 

    button.layer.borderWidth = 1 
    button.layer.borderColor = UIColor.grey().CGColor 

    button.setImage(UIImage(named: "arrow"), forState: .Normal) 

    button.contentHorizontalAlignment = .Left 
    button.imageEdgeInsets = UIEdgeInsetsMake(0, 280, 0, 0) 

    return button 
}() 
0

夫特3及以上基於MinuMaster's answer溶液。

此外,添加規定爲圖像設置正確的填充併爲故事板中的文本設置左填充。

此外,處理文本的長度,所以它不應該重疊圖像。

class ButtonWithRightImage: UIButton { 

    @IBInspectable var imagePaddingRight: CGFloat = 0.0 
    @IBInspectable var textPaddingLeft: CGFloat = 0.0 

    override func imageRect(forContentRect contentRect:CGRect) -> CGRect { 
     var imageFrame = super.imageRect(forContentRect: contentRect) 
     imageFrame.origin.x = contentRect.width - imageFrame.width - imagePaddingRight 
     return imageFrame 
    } 

    override func titleRect(forContentRect contentRect:CGRect) -> CGRect { 
     var titleFrame = super.titleRect(forContentRect: contentRect) 
     if (self.currentImage != nil) { 
      titleFrame.origin.x = super.imageRect(forContentRect: contentRect).minX + textPaddingLeft 
      if titleFrame.size.width > frame.size.width - (imageView?.frame.size.width)! - imagePaddingRight { 
       titleFrame.size.width = titleFrame.size.width - (imageView?.frame.size.width)! - imagePaddingRight 
      } 
     } 
     return titleFrame 
    } 
}