I have added a custom class for my buttons where I set corner radius (to save some code for multiple VCs) but once I set it, title from my buttons disappears. You can see I have a button title set and it worked ok before choosing a custom class.
Background of my button is the gray color with alpha. I have tried to play with the .isOpaque setting but got no luck getting the title back. Any idea what could cause this problem?
#IBDesignable class RoundedButton: UIButton {
#IBInspectable var cornerRadius: CGFloat = 8
override func layoutSubviews() {
layer.cornerRadius = cornerRadius
}
}
Edit: Solved! Thanks u/zombie for an explenation!
The title does not show because its frame was not updated.
To fix the layout you need to call super.layoutSubviews
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = cornerRadius
}
Your approach might prevent any update of the radius outside of your variable.
here is a better way to do it:
#IBDesignable class RoundedButton: UIButton {
private var defaultCornerRadius: CGFloat = 8
#IBInspectable var cornerRadius: CGFloat {
get {
return layer.cornerRadius
}
set {
layer.cornerRadius = newValue
}
}
override init(frame: CGRect) {
super.init(frame: frame)
cornerRadius = defaultCornerRadius
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
cornerRadius = aDecoder.decodeObject(forKey: "cornerRadius") as? CGFloat ?? defaultCornerRadius
}
override func encode(with aCoder: NSCoder) {
super.encode(with: aCoder)
aCoder.encode(cornerRadius, forKey: "cornerRadius")
}
}
You forget
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = cornerRadius
}
Related
How can I set a default border color for UITextFields which are not in focus when the view appears? Tried this with no success:
class UITextFieldCustom : UITextField, UITextFieldDelegate {
init(frame: CGRect, size: CGFloat) {
super.init(frame: frame)
self.layer.borderColor = UIColor.gray.cgColor
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
If you can't see new border, try to increase its width:
layer.borderWidth = 2.0
The problem you are facing is that self.layer.borderColor = UIColor.gray.cgColor is not called, because the function init(frame: CGRect, size: CGFloat) is not called. The reason why it is not called is because your textfield is not initilized in your code, for example:
func createTextField() -> UITextfield {
return UITextfield(frame: .zero, size: 100.0)
}
Your textfield is initilized from the storyboard. That is why the other init function required init?(coder aDecoder: NSCoder) exists. The sotryboard calls this function to initalize the textfield.
To solve the problem you just need to add your border modification line into the other init function, like this:
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.layer.borderColor = UIColor.gray.cgColor
}
Although one other clean approach I prefere more, is to add all setup code into the viewDidLoad method, for a clean overview, like this:
class ViewController: UIViewController {
// MARK: - Properties
#IBOutlet weak var textfield: UITextfield!
// MARK: - View's Lifecycle
override func viewDidLoad {
super.viewDidLoad()
setupTextfield()
}
// MARK: - Setup
private func setupTextfield() {
textfield.layer.borderColor = UIColor.gray.cgColor
}
}
just place your code here as well, you probably don't call this from storyboard or nib.
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.layer.borderColor = UIColor.gray.cgColor
}
use #IBDesignable class to create the border color and set the width, like this example.
import UIKit
#IBDesignable
class BorderTextField: UITextField {
#IBInspectable var borderColor: UIColor = UIColor.white{
didSet{
layer.borderColor = borderColor.cgColor
}
}
#IBInspectable var borderWidth: CGFloat = 0 {
didSet{
layer.borderWidth = borderWidth
}
}
}
the you can set the value in storyboard as needed.
I have added a custom class to UILabel.
Custom Class is:
#IBDesignable class CustomLabel: UILabel {
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
self.setup()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.setup()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
setup()
}
private func setup() {
self.textColor = UIColor.blue
}
}
But I cant see the changes in storyboard. How can it is able to see the changes in the interface builder??
You have to add IBInspectable properties to see changes in storyboard
here is example
#IBDesignable class RoundedTextField: UITextField {
#IBInspectable var cornerRadius:CGFloat = 0 // You will see this in storyboard
#IBInspectable var borderColor:UIColor = .green // You will see this in storyboard
override func awakeFromNib() {
super.awakeFromNib()
self.borderStyle = .none
self.layer.cornerRadius = cornerRadius
self.layer.borderColor = borderColor.cgColor
self.layer.borderWidth = 2.0
self.backgroundColor = UIColor.white
self.layer.masksToBounds = true
}
}
Don't forgot to set class
Here how you can see in stoyrboard
I have extended the UIView class and added a property for cornerRadius. The property does set to desired value. I have made two custom classes one derives from UITextField and another from UILabel. UITextField gets rounded corners but UILabel does not.
Any help in this regard will be highly appreciated.
#IBDesignable
public class BLabel: UILabel {
public override init(frame: CGRect) {
super.init(frame: frame)
layer.cornerRadius = cornerRadius
layer.masksToBounds = true
clipsToBounds = true
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
extension UIView {
#IBInspectable
var cornerRadius : CGFloat {
get {return layer.cornerRadius}
set {layer.cornerRadius = newValue}
}
}
In your BLabel class you access the cornerRadius property of your UIView extension in the init method. This is before you have any chance to set a specific corner radius value so it will be 0.
There's no point to the line layer.cornerRadius = cornerRadius in the init method of BLabel. Simply create the BLabel instance and then set its cornerRadius property.
let label = BLabel(frame: someFrame)
label.cornerRadius = 5
Are you sure your UITextField is responding to cornerRadius? Or are you maybe just seeing the normal rounded corners?
Try changing your BLabel to this - it will make sure the initializations are being called properly:
#IBDesignable
public class BLabel: UILabel {
public override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
public override func awakeFromNib() {
super.awakeFromNib()
commonInit()
}
public override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
commonInit()
}
func commonInit() {
// As noted by "rmaddy" ---
// setting .cornerRadius here does nothing, as it is always equal to Zero
// the UIView extension will handle it
//layer.cornerRadius = cornerRadius
layer.masksToBounds = true
clipsToBounds = true
// the following just makes it easy to confirm
// that this code is being executed
backgroundColor = UIColor.red
textColor = UIColor.yellow
textAlignment = .center
}
}
I would like to thank #rmaddy for help. I am writing this for the benefit for all. The code given by rmaddy works. But, after testing it I figured out that it is not required. Just setting layer.masksToBounds = true in UIView extension cornerRadius setter method does the trick. So the entire problem was solved by just this one line of code.
So the final code looks like this and it works:
#IBDesignable
public class BTextField: UITextField {
public override init(frame: CGRect) {
super.init(frame: frame)
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
#IBDesignable
public class BLabel: UILabel {
public override init(frame: CGRect) {
super.init(frame: frame)
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
extension UIView {
#IBInspectable
var cornerRadius : CGFloat {
get {return layer.cornerRadius}
set {layer.cornerRadius = newValue
layer.masksToBounds = true}
}
}
I hope it helps others also.
I'm new to swift and I'm just trying to create a subclass of uibutton. Except that I have this weird blue rounded rect appearing when the button is selected as shown below. When all I want is a nice white border.
The code of my class :
import UIKit
import QuartzCore
#IBDesignable
class ColorButton: UIButton {
//MARK: PROPERTIES
#IBInspectable var stickerColor: UIColor = UIColor.whiteColor() {
didSet {
configure()
}
}
override var selected: Bool {
willSet(newValue) {
super.selected = newValue;
if selected {
layer.borderWidth = 1.0
} else {
layer.borderWidth = 0.0
}
}
}
//MARK: Initializers
override init(frame : CGRect) {
super.init(frame : frame)
setup()
configure()
}
convenience init() {
self.init(frame:CGRectZero)
setup()
configure()
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
configure()
}
override func awakeFromNib() {
super.awakeFromNib()
setup()
configure()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
setup()
configure()
}
func setup() {
//Border color
layer.borderColor = UIColor.whiteColor().CGColor
//Corner Radius
setUpCornerRadius()
}
func configure() {
backgroundColor = stickerColor
}
override func layoutSubviews() {
super.layoutSubviews()
setUpCornerRadius()
}
func setUpCornerRadius() {
layer.cornerRadius = CGRectGetWidth(bounds) * 0.205
}
}
I have checked your code. and I got same issue.
but If you set button type as Custom then this problem will not occur
Output :
Found something for buttonType :
You may find the discussion at CocoaBuilder's thread How to subclass UIButton? helpful, particularly Jack Nutting's suggestion to ignore the buttonType:
Note that this way the buttonType isn't explicitly set to anything,
which probably means that it's UIButtonTypeCustom. The Docs don't
seem to actually specify that, but since that's the 0 value in the
enum, that's likely what happens (and that seems to be the observable
behavior as well)
Source : https://stackoverflow.com/a/10278515/3202193
How to draw the following tab image in UIView?The text is changeable,which implies that the image could stretch in width. And I know in XCode6,it supports live render.So I think if possible,it's color,text,and size could be set in attributes inspector.
You have to create a custom class, based on UIView. This class is declared as #IBDesignable and has #IBInspectable properties. Override UIView.drawRect() and you are totally free on how your view gets displayed.
Here is a sample class to get you started.
import UIKit
#IBDesignable
class MyTabView: UIView {
#IBInspectable tabTitle: String = ""
#IBInspectable tabColor: UIColor = UIColor.clearColor()
override init(frame: CGRect) {
super.init(frame: frame)
// Initialization code
}
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func prepareForInterfaceBuilder() {
// stuff for interface builder only
}
override func drawRect(rect: CGRect)
{
// this is where your view gets drawed
self.layer.cornerRadius = 10
self.layer.masksToBounds = true
}
}