#IBDesignable not showing background color in IB - uiview

I have a UIView as below:
import UIKit
#IBDesignable
class CHRAlertView: UIView {
#IBOutlet var icon:UILabel!
#IBOutlet var alertText:UITextView!
override init(frame: CGRect) {
super.init(frame: frame)
self.initialize()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.initialize()
}
private func initialize(){
self.backgroundColor = UIColor.green
}
}
Based on how #IBDesignable works, this should show up in IB with a green background, but I get the clear color like this:
Why is this not functioning as expected? I need the background color to show in IB based on the defaults set in my #IBDesignable.

Since backgroundColor is an IB property not created via #IBInspectable, it always seems to overwrite whatever is in the init or draw methods. Meaning, if it is "default" in IB, it causes it to be overwritten with nil. However, if set in the prepareForInterfaceBuilder method backgroundColor works and shows in IB. So, the backgroundColor, it can be reasonably assumed, must be set at runtime. To do this I have the below:
//------------------
//Setup and initialization
//------------------
override init(frame: CGRect) {
super.init(frame: frame)
self.initialize()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.initialize()
}
//Setups content, styles, and defaults for the view
private func initialize(){
self.staticContent()
self.initStyle()
}
//Sets static content for the view
private func staticContent() {
}
//Styles the view's colors, borders, etc at initialization
private func initStyle(){
}
//Styles the view for variables that must be set at runtime
private func runtimeStyle(){
if self.backgroundColor == nil {
self.backgroundColor = UIColor.green
}
}
override func prepareForInterfaceBuilder() {
self.runtimeStyle()
}
override func awakeFromNib() {
super.awakeFromNib()
self.runtimeStyle()
}
This defaults the backgroundColor if it is "default" (read nil) in IB to a color, but does not use the UIColor.green if a backgroundColor is set in IB, which is exactly what I need.
Shoutout to Eridius in the #swift-lang irc for helping me get to this answer.

Related

Add subview in interfaceBuilder

I am trying to add a label to UIView and I would like to preview it in InterfaceBuilder, however it doesn't seem to work. not only I don't see label but It also doesn't append one to view hierarchy
#IBDesignable
class UIFloatingLabelInput: UIView {
/*
// Only override draw() if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
override func draw(_ rect: CGRect) {
// Drawing code
}
*/
let Label : UILabel?
func AddLabel(){
Label?.text = "Hello World"
Label?.center = CGPoint(x: self.center.x, y: self.center.y)
self.addSubview(Label!)
}
override init(frame: CGRect){
//Init vars
Label = UILabel(frame: frame)
//Call Initializer
super.init(frame: frame)
AddLabel()
}
required init?(coder: NSCoder){
//Init vars
Label = UILabel(coder: coder)
//CallInitializer
super.init(coder: coder)
AddLabel()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
AddLabel()
}
}
but it doesn't work in IB, but works fine on a device.
You need to give your label frame to make it work in IB
required init?(coder: NSCoder){
//Init vars
Label = UILabel(coder: coder)
//CallInitializer
super.init(coder: coder)
//Give your label a frame
Label.frame = bounds
AddLabel()
}

UILabel does get roundedCorners

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.

Transparent view is black?

I'm trying to create a view that is transparent in certain spots to see an image behind. However, for some reason in the transparent part of the view, I'm seeing black, instead of what's behind the view. I've trimmed it down to very little code and don't understand why my transparent view shows black instead of red (the color of the view behind). Here's my code:
class ViewController: UIViewController {
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
let redView = UIView(frame: view.frame)
redView.backgroundColor = UIColor.red
let transparentView = TransparentView(frame: view.frame)
view.addSubview(redView)
view.addSubview(transparentView)
}
}
class TransparentView: UIView {
override func draw(_ rect: CGRect) {
UIColor.clear.setFill()
UIRectFill(rect)
}
I would expect the screen to be full red, but instead it shows full black. Before someone says it's a lot easier to make a clear view, I'm actually trying to do more complex things in drawRect, just dropped down to the most basic thing to try to debug my problem. What am I missing here?
Use self.isOpaque = false; to make the view/layer transparent even when drawRect is overriden.
class TransparentView: UIView {
override init(frame: CGRect) {
super.init(frame: frame);
self.isOpaque = false; //Use this..
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
UIColor.clear.setFill()
UIRectFill(rect)
}
}
I figured it out. Apparently even if you override draw, backgroundColor seems to still be considered, and defaults to black. I added the following to my transparent view class:
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
"drawRect: Implement this method if your view draws custom content. If your view does not do any custom drawing, avoid overriding this method." Link
That been said would be better as you said just set background color on Init.
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.clear
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
Personally i wont subclass a view for so little customization. Just set it while creating it. Also view setup is better on viewDidLoad, not in viewWillAppear. Since it will execute every time your view will go foreground and u will end with two transparent views added.
Also keeping those line in a extension with a private function helps to keep your code clear.
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
setupViews()
}
}
//MARK: - Private Methods
extension ViewController{
fileprivate func setupViews(){
let redView = UIView(frame: view.frame)
redView.backgroundColor = UIColor.red
view.addSubview(redView)
let transparentView = UIView(frame: view.frame)
transparentView.backgroundColor = UIColor.clear
view.addSubview(transparentView)
}
}
Please notice that a more clear approach would be to create those Views in the Storyboard (not by code). Keep code clear and its easier to understand and see whats going on.

How to custom this image tab in UIView,using #IBDesignable and #IBInspectable is better

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
}
}

How do I write a custom init for a UIView subclass in Swift?

Say I want to init a UIView subclass with a String and an Int.
How would I do this in Swift if I'm just subclassing UIView? If I just make a custom init() function but the parameters are a String and an Int, it tells me that "super.init() isn't called before returning from initializer".
And if I call super.init() I'm told I must use a designated initializer. What should I be using there? The frame version? The coder version? Both? Why?
The init(frame:) version is the default initializer. You must call it only after initializing your instance variables. If this view is being reconstituted from a Nib then your custom initializer will not be called, and instead the init?(coder:) version will be called. Since Swift now requires an implementation of the required init?(coder:), I have updated the example below and changed the let variable declarations to var and optional. In this case, you would initialize them in awakeFromNib() or at some later time.
class TestView : UIView {
var s: String?
var i: Int?
init(s: String, i: Int) {
self.s = s
self.i = i
super.init(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
I create a common init for the designated and required. For convenience inits I delegate to init(frame:) with frame of zero.
Having zero frame is not a problem because typically the view is inside a ViewController's view; your custom view will get a good, safe chance to layout its subviews when its superview calls layoutSubviews() or updateConstraints(). These two functions are called by the system recursively throughout the view hierarchy. You can use either updateContstraints() or layoutSubviews(). updateContstraints() is called first, then layoutSubviews(). In updateConstraints() make sure to call super last. In layoutSubviews(), call super first.
Here's what I do:
#IBDesignable
class MyView: UIView {
convenience init(args: Whatever) {
self.init(frame: CGRect.zero)
//assign custom vars
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
commonInit()
}
private func commonInit() {
//custom initialization
}
override func updateConstraints() {
//set subview constraints here
super.updateConstraints()
}
override func layoutSubviews() {
super.layoutSubviews()
//manually set subview frames here
}
}
Swift 5 Solution
You can try out this implementation for running Swift 5 on XCode 11
class CustomView: UIView {
var customParam: customType
var container = UIView()
required init(customParamArg: customType) {
self.customParam = customParamArg
super.init(frame: .zero)
// Setting up the view can be done here
setupView()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupView() {
// Can do the setup of the view, including adding subviews
setupConstraints()
}
func setupConstraints() {
// setup custom constraints as you wish
}
}
Here is how I do it on iOS 9 in Swift -
import UIKit
class CustomView : UIView {
init() {
super.init(frame: UIScreen.mainScreen().bounds);
//for debug validation
self.backgroundColor = UIColor.blueColor();
print("My Custom Init");
return;
}
required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented"); }
}
Here is a full project with example:
UIView Example Project (with SubView example)
Here is how I do a Subview on iOS in Swift -
class CustomSubview : UIView {
init() {
super.init(frame: UIScreen.mainScreen().bounds);
let windowHeight : CGFloat = 150;
let windowWidth : CGFloat = 360;
self.backgroundColor = UIColor.whiteColor();
self.frame = CGRectMake(0, 0, windowWidth, windowHeight);
self.center = CGPoint(x: UIScreen.mainScreen().bounds.width/2, y: 375);
//for debug validation
self.backgroundColor = UIColor.grayColor();
print("My Custom Init");
return;
}
required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented"); }
}

Resources