Swift 3 - Xcode 8 - iOS10
I have a xib file with a UIView. I want import this view in my ViewController.
My Player.xib
And my Storyboard result :
And my Class:
#IBDesignable
class EmbedPlayerViewV2: UIView {
#IBOutlet weak var subTitleLbl: UILabel!
var view: UIView!
override init(frame: CGRect) {
super.init(frame: frame)
loadViewFromNib()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
loadViewFromNib()
}
func loadViewFromNib() {
let bundle = Bundle(for: type(of: self))
let nib = UINib(nibName: "Player", bundle: bundle)
self.view = nib.instantiate(withOwner: self, options: nil).first as! UIView
self.addSubview(self.view)
}
override func layoutSubviews() {
subTitleLbl.text = "LOADED"
// ...
}
// ...
}
I have solved my problem.
func loadViewFromNib() {
let bundle = Bundle(for: type(of: self))
let nib = UINib(nibName: "Player", bundle: bundle)
self.view = nib.instantiate(withOwner: self, options: nil).first as! UIView
self.addSubview(view)
view.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
view.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
view.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
view.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
}
Tanks Aaron
Related
I create a custom view in xib file. I add 3 views(which inherited from custom) in viewController. Initially they have white color, but when i click on first view it should be changed other color and if i click on second view, the first view should be back in white color.
I need help to change first view color back to white when second view is selected.
My code for customView here
class SubscriptionView: UIView {
#IBOutlet weak var title: UILabel!
#IBOutlet weak var subTitle: UILabel!
#IBOutlet weak var checkMark: UIImageView!
var isSelect: Bool = false
let nibName = "SubscriptionView"
var contentView: UIView?
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
override func awakeFromNib() {
super.awakeFromNib()
addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(tapAction)))
}
func commonInit() {
guard let view = loadViewFromNib() else {
return
}
view.frame = self.bounds
view.layer.masksToBounds = true
view.layer.cornerRadius = 14
view.layerBorderColor = AppColor.amaranth
view.layerBorderWidth = 0.5
self.addSubview(view)
contentView = view
}
func loadViewFromNib() -> UIView? {
let bundle = Bundle(for: type(of: self))
let nib = UINib(nibName: nibName, bundle: bundle)
return nib.instantiate(withOwner: self, options: nil).first as? UIView
}
public func selectedView(_ isSelect: Bool) {
self.isSelect = isSelect
title.textColor = isSelect ? UIColor.white : AppColor.amaranth
subTitle.textColor = isSelect ? UIColor.white : AppColor.amaranth
checkMark.alpha = isSelect ? 1.0 : 0.0
contentView!.backgroundColor = isSelect ? AppColor.amaranth : UIColor.white
}
#objc private func tapAction() {
///????? selectedView
}
}
Here is a very simple example using the Delegate / Protocol pattern.
Define a Protocol:
// Protocol / Delegate pattern
protocol SubscriptionViewDelegate {
func gotTap(from sender: SubscriptionView)
}
Have your view controller conform to that protocol. In your custom SubscriptionView class, when the user taps you will tell the delegate that a tap was received, and the controller will loop through the SubscriptionView objects setting the "selected" state to true or false, based on the tapped view.
class SubscriptionsViewController: UIViewController, SubscriptionViewDelegate {
let theStackView: UIStackView = {
let v = UIStackView()
v.translatesAutoresizingMaskIntoConstraints = false
v.axis = .vertical
v.alignment = .fill
v.distribution = .fill
v.spacing = 20
return v
}()
// array to track the "subscription" views
var arrayOfSubscriptionViews: [SubscriptionView] = [SubscriptionView]()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .yellow
// add a stack view to hold the "subscription" views
view.addSubview(theStackView)
NSLayoutConstraint.activate([
theStackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 20.0),
theStackView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 20.0),
theStackView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -20.0),
])
// instantiate 3 "subscription" views
for _ in 1...3 {
// instantiate view
let v = SubscriptionView()
// set self as its delegate
v.delegate = self
// add it to our stack view
theStackView.addArrangedSubview(v)
// append it to our tracking array
arrayOfSubscriptionViews.append(v)
}
}
func gotTap(from sender: SubscriptionView) {
// just for dev / debugging
print("got tap from", sender)
// loop through the subscription views,
// setting the sender selected to TRUE
// the others to FALSE
arrayOfSubscriptionViews.forEach {
$0.selectedView($0 == sender)
}
}
}
// Protocol / Delegate pattern
protocol SubscriptionViewDelegate {
func gotTap(from sender: SubscriptionView)
}
class SubscriptionView: UIView {
#IBOutlet weak var title: UILabel!
#IBOutlet weak var subTitle: UILabel!
#IBOutlet weak var checkMark: UIImageView!
var isSelect: Bool = false
var delegate: SubscriptionViewDelegate?
let nibName = "SubscriptionView"
var contentView: UIView?
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
override func awakeFromNib() {
super.awakeFromNib()
}
func commonInit() {
guard let view = loadViewFromNib() else {
return
}
view.frame = self.bounds
view.layer.masksToBounds = true
view.layer.cornerRadius = 14
view.layer.borderColor = UIColor.red.cgColor // AppColor.amaranth
view.layer.borderWidth = 0.5
self.addSubview(view)
contentView = view
selectedView(false)
addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(tapAction)))
}
func loadViewFromNib() -> UIView? {
let bundle = Bundle(for: type(of: self))
let nib = UINib(nibName: nibName, bundle: bundle)
return nib.instantiate(withOwner: self, options: nil).first as? UIView
}
public func selectedView(_ isSelect: Bool) {
self.isSelect = isSelect
title.textColor = isSelect ? UIColor.white : .red // AppColor.amaranth
subTitle.textColor = isSelect ? UIColor.white : .red // AppColor.amaranth
checkMark.alpha = isSelect ? 1.0 : 0.0
// contentView!.backgroundColor = isSelect ? AppColor.amaranth : UIColor.white
contentView!.backgroundColor = isSelect ? UIColor.red : UIColor.white
}
#objc private func tapAction() {
// for dev / debugging
print("sending tap from", self)
// tell the delegate self got tapped
delegate?.gotTap(from: self)
}
}
I only made minor changes to your SubscriptionView class, so you should be able to use it as-is with your existing .xib
I am trying to implement a simple UIView that will show at the bottom of the screen when internet connection is lost and will have a dismiss button. My UIView class looks something like this.
import UIKit
class ConnectionLostAlertUIView: UIView {
#IBOutlet var view: UIView!
var viewConstraints: [NSLayoutConstraint] = []
override init(frame: CGRect) {
super.init(frame: frame)
Bundle.main.loadNibNamed("ConnectionLostAlertView", owner: self, options: nil)
self.addSubview(self.view)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
Bundle.main.loadNibNamed("ConnectionLostAlertView", owner: self, options: nil)
self.addSubview(self.view)
}
override func didMoveToSuperview() {
view.translatesAutoresizingMaskIntoConstraints = false
let bottomConstraint = view.bottomAnchor.constraint(equalTo: self.superview!.bottomAnchor)
let leftConstraint = view.leadingAnchor.constraint(equalTo: self.superview!.leadingAnchor)
let rightConstraint = view.trailingAnchor.constraint(equalTo: self.superview!.trailingAnchor)
viewConstraints = [bottomConstraint, leftConstraint, rightConstraint]
NSLayoutConstraint.activate(viewConstraints)
}
#IBAction func dismissButton(_ sender: Any) {
Logger.log(message: "Dismiss button was pressed", event: .d)
self.isHidden = true
}
And I add this UIView to my UIViewController by doing the following
var ConnectionLostAlert: ConnectionLostAlertUIView!
ConnectionLostAlert = ConnectionLostAlertUIView(frame: CGRect.zero)
self.view.addSubview(ConnectionLostAlert)
Well, I can use actual values for CGRect instead of zero but the problem is that after the constraints are added in my UIView, the button in my UIView stops responding. It works just fine if I actually set some CGRect coordinates and not use constraints in the UIView. Is there a better way to do what I am trying to achieve that will still allow me to handle the button event inside the UIView?
The problem is you are adding constraints from the inner view i.e view to the superview skipping the main view (ConnectionLostAlertUIView) that is actually being added to the super view.
What you should do instead is to add constraints between view and self first. Then when self(ConnectionLostAlertUIView) is added to the superview, add the constraints with super view then.
Do something like this:
#IBOutlet var view: UIView!
var viewConstraints: [NSLayoutConstraint] = []
override init(frame: CGRect) {
super.init(frame: frame)
Bundle.main.loadNibNamed("ConnectionLostAlertView", owner: self, options: nil)
self.addSubview(self.view)
view.translatesAutoresizingMaskIntoConstraints = false
let bottomConstraint = view.bottomAnchor.constraint(equalTo: self.bottomAnchor)
let leftConstraint = view.leadingAnchor.constraint(equalTo: self.leadingAnchor)
let rightConstraint = view.trailingAnchor.constraint(equalTo: self.trailingAnchor)
viewConstraints = [bottomConstraint, leftConstraint, rightConstraint]
NSLayoutConstraint.activate(viewConstraints)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
Bundle.main.loadNibNamed("ConnectionLostAlertView", owner: self, options: nil)
self.addSubview(self.view)
}
override func didMoveToSuperview() {
self.translatesAutoresizingMaskIntoConstraints = false
let bottomConstraint = self.bottomAnchor.constraint(equalTo: self.superview!.bottomAnchor)
let leftConstraint = self.leadingAnchor.constraint(equalTo: self.superview!.leadingAnchor)
let rightConstraint = self.trailingAnchor.constraint(equalTo: self.superview!.trailingAnchor)
viewConstraints = [bottomConstraint, leftConstraint, rightConstraint]
NSLayoutConstraint.activate(viewConstraints)
}
#IBAction func dismissButton(_ sender: Any) {
Logger.log(message: "Dismiss button was pressed", event: .d)
self.isHidden = true
}
I am wondering what is the cleanest way to initialize a custom UIView with a specific frame.
The UIView is designed from a XIB file.
Here is my implementation :
class CustomView : UIView {
#IBOutlet var outletLabel: UILabel!
public required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupView()
}
public override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
private func setupView() {
// Set text for labels
}
}
Here is how I want to initialize it in my ViewController :
let screenSize: CGRect = UIScreen.main.bounds
let screenWidth = screenSize.width
let frame = CGRect(x: 0, y: 0, width: screenWidth - 50, height: 70)
let customView = CustomView.init(frame: frame)
But it is not working, I have a white UIView without any outlets.
And if I do this instead :
// Extension to UIView to load Nib
let customView : CustomView = UIView.fromNib()
I can see my view from XIB file, with its width/height used in the Interface Builder.
What is I want to load the view from XIB file BUT with specific frame ?
Am I missing something about initialization ?
You can have a NibLoading class like:
// NibLoadingView.swift
//source:https://gist.github.com/winkelsdorf/16c481f274134718946328b6e2c9a4d8
import UIKit
// Usage: Subclass your UIView from NibLoadView to automatically load a xib with the same name as your class
#IBDesignable
class NibLoadingView: UIView {
#IBOutlet weak var view: UIView!
override init(frame: CGRect) {
super.init(frame: frame)
nibSetup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
nibSetup()
}
private func nibSetup() {
backgroundColor = .clear
view = loadViewFromNib()
view.frame = bounds
view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.translatesAutoresizingMaskIntoConstraints = true
addSubview(view)
}
private func loadViewFromNib() -> UIView {
let bundle = Bundle(for: type(of:self))
let nib = UINib(nibName: String(describing: type(of:self)), bundle: bundle)
let nibView = nib.instantiate(withOwner: self, options: nil).first as! UIView
nibView.anchorAllEdgesToSuperview()
return nibView
}
}
extension UIView {
func anchorAllEdgesToSuperview() {
self.translatesAutoresizingMaskIntoConstraints = false
if #available(iOS 9.0, *) {
addSuperviewConstraint(constraint: topAnchor.constraint(equalTo: (superview?.topAnchor)!))
addSuperviewConstraint(constraint: leftAnchor.constraint(equalTo: (superview?.leftAnchor)!))
addSuperviewConstraint(constraint: bottomAnchor.constraint(equalTo: (superview?.bottomAnchor)!))
addSuperviewConstraint(constraint: rightAnchor.constraint(equalTo: (superview?.rightAnchor)!))
}
else {
for attribute : NSLayoutAttribute in [.left, .top, .right, .bottom] {
anchorToSuperview(attribute: attribute)
}
}
}
func anchorToSuperview(attribute: NSLayoutAttribute) {
addSuperviewConstraint(constraint: NSLayoutConstraint(item: self, attribute: attribute, relatedBy: .equal, toItem: superview, attribute: attribute, multiplier: 1.0, constant: 0.0))
}
func addSuperviewConstraint(constraint: NSLayoutConstraint) {
superview?.addConstraint(constraint)
}
}
Then your view will subclass the NibLoadingClass like:
class YourUIView: NibLoadingView {
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Set your XIB class in File's Owner like:
In this case it will be YourUIView
Then instantiate it:
let myView = YourUIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width-60, height: 170))
You can create custom class like this...
import UIKit
class CustomView: UIView {
class func mainView() -> CustomView {
let nib = UINib(nibName: "nib", bundle: nil)
let view = nib.instantiate(withOwner: self, options: nil).first as! CustomView
return view
}
override init(frame: CGRect) {
super.init(frame: frame)
let view = CustomView.mainView()
view.frame = frame
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
Initialize view where you want...
let view = CustomView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
view.backgroundColor = UIColor.blue
self.view.addSubview(view)
My code for this is:
import UIKit
class RCSubscriptionPackageView: UIView {
let centeredCollectionViewFlowLayout = CenteredCollectionViewFlowLayout()
let collectionView :UICollectionView
let cellPerWidth = 0.7
let container: UIView!
override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
collectionView = UICollectionView(centeredCollectionViewFlowLayout: centeredCollectionViewFlowLayout)
super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
}
Error is in the above initializer
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .lightGray
collectionView.backgroundColor = .clear
centeredCollectionViewFlowLayout.itemSize = CGSize(
width: self.bounds.width * CGFloat(cellPerWidth),
height: self.bounds.height * CGFloat(cellPerWidth) * CGFloat(cellPerWidth)
)
centeredCollectionViewFlowLayout.minimumLineSpacing = 20
collectionView.showsVerticalScrollIndicator = false
collectionView.showsHorizontalScrollIndicator = true
addContainerView()
addConstraintsForContainer()
collectionView.register(
RCSubscriptionPackCollectionViewCell.self,
forCellWithReuseIdentifier: String(describing: RCSubscriptionPackCollectionViewCell.self)
)
centeredCollectionViewFlowLayout.minimumLineSpacing = 20
collectionView.showsVerticalScrollIndicator = false
collectionView.showsHorizontalScrollIndicator = true
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func addContainerView() -> Void {
container.backgroundColor = .lightGray
container.translatesAutoresizingMaskIntoConstraints = false
container.addSubview(collectionView)
}
func addConstraintsForContainer() -> Void {
container.snp.makeConstraints { (make) in
make.edges.equalToSuperview()
}
}
}
the error says 'Initializer does not override a designated initializer from its superclass'
and in
super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
error is
'Cannot invoke 'UIView.init' with an argument list of type '(nibName: String?, bundle: Bundle?)'
I have searched about it every where but didn't got anything.
Please get me out of this.
UIView supports these two initializers
init(frame: CGRect)
init?(coder aDecoder: NSCoder)
init(nibName:bundle: belongs to a view controller or a NIB
I've created a custom UIView subclass in Swift with a corresponding .xib file but am having trouble adding Auto Layout constraints during initialization. The view itself loads just fine, but adding layout constraints seems to have no effect on the view's layout, regardless of whether I add these constraints within init or viewDidMoveToSuperview or viewDidMoveToWindow, and even if I call setNeedsUpdateConstraints() / layoutIfNeeded() immediately after.
I can do this quite easily in Objective-C, so hopefully this is a very simple fix, but I can't figure out what I am doing wrong.
Here is my code:
var isLoading = false
class CustomSubview: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
private lazy var view: UIView! = { [unowned self] in
let bundle = NSBundle(forClass: self.dynamicType)
let nibName = String(CustomSubview.self)
let nib = UINib(nibName: nibName, bundle: bundle)
return nib.instantiateWithOwner(self, options: nil)[0] as! UIView
}()
private func setup() {
if (isLoading) {
return
}
isLoading = true
// self.view.frame = self.bounds // this works but I want to use Auto Layout
// self.view.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight] // this works but I want to use Auto Layout
self.translatesAutoresizingMaskIntoConstraints = false // no effect
addSubview(self.view)
let views = Dictionary(dictionaryLiteral: ("view", self.view))
let horizontalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("H:|[view]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
self.addConstraints(horizontalConstraints)
NSLayoutConstraint.activateConstraints(horizontalConstraints) // this seems to do nothing
let verticalConstraints = NSLayoutConstraint.constraintsWithVisualFormat("V:|[view]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views)
self.addConstraints(verticalConstraints)
NSLayoutConstraint.activateConstraints(verticalConstraints) // this seems to do nothing
self.setNeedsUpdateConstraints()
self.layoutIfNeeded()
isLoading = false
}
}
I've reworked your class a bit to make it look a bit cleaner. I've omitted the loading Bool. Also I have no experience in creating views from a XIB file I pretty much left it almost untouched.
var isLoading = false
class CustomSubview: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setup()
}
private lazy var customView: UIView = {
let bundle = NSBundle(forClass: self.dynamicType)
let nibName = String(CustomSubview.self)
let nib = UINib(nibName: nibName, bundle: bundle)
let customView = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
customView.translatesAutoresizingMaskIntoConstraints = false
return customView
}()
private func setup() {
if (isLoading) {
return
}
isLoading = true
addSubview(self.customView)
let views = ["customView": customView]
addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[customView]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views))
addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[customView]|", options: NSLayoutFormatOptions(rawValue: 0), metrics: nil, views: views))
isLoading = false
}
}
As for your aspect ratio constraint, you can set multiple constraint for your aspect ratio and set the active of those to true / false to switch between them.