최신 버전의 Xcode 6에서 swift를 사용하여 앱을 작성 중이며 둥근 버튼을 사용하여 필요할 때 직접 조정할 수 있도록 버튼을 수정하는 방법을 알고 싶습니다. 완료되면 배경을 추가하지 않고 테두리 자체의 색상을 어떻게 변경할 수 있습니까? 즉, 배경이없는 약간 둥근 버튼, 특정 색상의 1pt 테두리 만 원합니다.
답변
사용 button.layer.cornerRadius
, button.layer.borderColor
및 button.layer.borderWidth
. 참고 borderColor
을 필요로 CGColor
당신이 말할 수 있도록, (스위프트 3/4) :
button.backgroundColor = .clear
button.layer.cornerRadius = 5
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.black.cgColor
답변
스토리 보드에서이 작업을 수행하려면 (Interface Builder Inspector)
의 도움으로 IBDesignable
Interface Builder Inspector에 더 많은 옵션을 추가 UIButton
하고 스토리 보드에서 조정할 수 있습니다. 먼저 다음 코드를 프로젝트에 추가하십시오.
@IBDesignable extension UIButton {
@IBInspectable var borderWidth: CGFloat {
set {
layer.borderWidth = newValue
}
get {
return layer.borderWidth
}
}
@IBInspectable var cornerRadius: CGFloat {
set {
layer.cornerRadius = newValue
}
get {
return layer.cornerRadius
}
}
@IBInspectable var borderColor: UIColor? {
set {
guard let uiColor = newValue else { return }
layer.borderColor = uiColor.cgColor
}
get {
guard let color = layer.borderColor else { return nil }
return UIColor(cgColor: color)
}
}
}
그런 다음 스토리 보드에서 버튼의 속성을 설정하십시오.
답변
tintColor
텍스트 및 테두리 색상에 대해 를 사용하고 강조 표시되면 배경이로 변경 되는 간단한 UIButton sublcass를 만들었습니다 tintColor
.
class BorderedButton: UIButton {
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
layer.borderWidth = 1.0
layer.borderColor = tintColor.CGColor
layer.cornerRadius = 5.0
clipsToBounds = true
contentEdgeInsets = UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8)
setTitleColor(tintColor, forState: .Normal)
setTitleColor(UIColor.whiteColor(), forState: .Highlighted)
setBackgroundImage(UIImage(color: tintColor), forState: .Highlighted)
}
}
이것은 색상에서 이미지를 만드는 UIImage 확장을 사용합니다. https://stackoverflow.com/a/33675160
기본 시스템 유형은 단추가 강조 표시 될 때 색상이 약간 수정되므로 인터페이스 빌더에서 사용자 정의 유형으로 설정하면 가장 효과적입니다.
답변
이 클래스는 답변의 모든 의견과 제안을 기반으로하며 xcode에서 직접 디자인 할 수도 있습니다. 프로젝트에 복사하고 UIButton을 삽입하고 사용자 정의 클래스를 사용하도록 변경하십시오. 이제 일반 및 / 또는 강조 표시된 상태에 대해 xcode에서 테두리 또는 배경색을 선택하십시오.
//
// RoundedButton.swift
//
import UIKit
@IBDesignable
class RoundedButton:UIButton {
@IBInspectable var borderWidth: CGFloat = 0 {
didSet {
layer.borderWidth = borderWidth
}
}
//Normal state bg and border
@IBInspectable var normalBorderColor: UIColor? {
didSet {
layer.borderColor = normalBorderColor?.CGColor
}
}
@IBInspectable var normalBackgroundColor: UIColor? {
didSet {
setBgColorForState(normalBackgroundColor, forState: .Normal)
}
}
//Highlighted state bg and border
@IBInspectable var highlightedBorderColor: UIColor?
@IBInspectable var highlightedBackgroundColor: UIColor? {
didSet {
setBgColorForState(highlightedBackgroundColor, forState: .Highlighted)
}
}
private func setBgColorForState(color: UIColor?, forState: UIControlState){
if color != nil {
setBackgroundImage(UIImage.imageWithColor(color!), forState: forState)
} else {
setBackgroundImage(nil, forState: forState)
}
}
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = layer.frame.height / 2
clipsToBounds = true
if borderWidth > 0 {
if state == .Normal && !CGColorEqualToColor(layer.borderColor, normalBorderColor?.CGColor) {
layer.borderColor = normalBorderColor?.CGColor
} else if state == .Highlighted && highlightedBorderColor != nil{
layer.borderColor = highlightedBorderColor!.CGColor
}
}
}
}
//Extension Required by RoundedButton to create UIImage from UIColor
extension UIImage {
class func imageWithColor(color: UIColor) -> UIImage {
let rect: CGRect = CGRectMake(0, 0, 1, 1)
UIGraphicsBeginImageContextWithOptions(CGSizeMake(1, 1), false, 1.0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
}
답변
@returntrue 답변을 바탕으로 Interface Builder에서 구현했습니다.
인터페이스 빌더가 키를 추가 사용하여 모서리가 둥근 버튼을 얻으려면 Path = "layer.cornerRadius"
함께 Type = "Number"
하고 Value = "10"
은 “에서 (또는 필요에 따라 다른 값) User Defined RunTime Attribute
“의 Identity Inspector
버튼의.
답변
이 UIButton 하위 클래스를 사용하여 필요에 따라 UIButton을 사용자 정의 할 수 있습니다.
class RoundedRectButton: UIButton {
var selectedState: Bool = false
override func awakeFromNib() {
super.awakeFromNib()
layer.borderWidth = 2 / UIScreen.main.nativeScale
layer.borderColor = UIColor.white.cgColor
contentEdgeInsets = UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5)
}
override func layoutSubviews(){
super.layoutSubviews()
layer.cornerRadius = frame.height / 2
backgroundColor = selectedState ? UIColor.white : UIColor.clear
self.titleLabel?.textColor = selectedState ? UIColor.green : UIColor.white
}
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
selectedState = !selectedState
self.layoutSubviews()
}
}
답변
가장 쉽고 깨끗한 방법은 프로토콜을 사용하여 상속 및 코드 반복을 피하는 것입니다. 스토리 보드에서이 속성을 직접 변경할 수 있습니다
protocol Traceable {
var cornerRadius: CGFloat { get set }
var borderColor: UIColor? { get set }
var borderWidth: CGFloat { get set }
}
extension UIView: Traceable {
@IBInspectable var cornerRadius: CGFloat {
get { return layer.cornerRadius }
set {
layer.masksToBounds = true
layer.cornerRadius = newValue
}
}
@IBInspectable var borderColor: UIColor? {
get {
guard let cgColor = layer.borderColor else { return nil }
return UIColor(cgColor: cgColor)
}
set { layer.borderColor = newValue?.cgColor }
}
@IBInspectable var borderWidth: CGFloat {
get { return layer.borderWidth }
set { layer.borderWidth = newValue }
}
}
최신 정보
이 링크 에서 Traceable protocol 유틸리티를 사용하여 예를 찾을 수 있습니다.