I'm trying to create a custom button and import in my viewController to reduce the code inside it. However, it is not working. Could anyone give me any hint?
Despite the class ButtonView was instantiated properly, the button not show.
ButtonView.swift
import UIKit
final class ButtonView: UIButton {
// MARK: - Init
override init(frame: CGRect) {
super.init(frame: frame)
setupLayout()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: - Private functions
private func setupLayout() {
setTitle("Log In", for: .normal)
titleLabel?.font = UIFont.boldSystemFont(ofSize: 18)
setTitleColor(.white, for: .normal)
backgroundColor = UIColor(red: 94/255, green: 162/255, blue: 58/255, alpha: 1)
layer.cornerRadius = 10
translatesAutoresizingMaskIntoConstraints = false
}
}
HomeController.swift
class HomeController: UIViewController {
//MARK: - Properties
var delegate: ViewControllerDelegate?
//MARK: - Views
private let button = ButtonView()
//MARK: - Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
setupLayout()
configureNavigationBar()
}
fileprivate func setupLayout() {
view.backgroundColor = .white
view.addSubview(button)
button.heightAnchor.constraint(equalToConstant: 50).isActive = true
button.widthAnchor.constraint(equalToConstant: 150).isActive = true
button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
button.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 100).isActive = false
}
...
Your constraint that positions the button vertically is not active, change it to true:
button.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 100).isActive = true
Related
I have custom view with some labels, a text field and a button. When I add it to a view in a VC, the custom view appears nicely, but I can't tap on the text field or on the button, they are not responding. Can someone tell my what is the problem with the code? Here is the simplified version:
import UIKit
class CustomView: UIView {
let title: UILabel = {
let title = UILabel()
title.font = UIFont.systemFont(ofSize: 24)
title.text = "Title"
title.numberOfLines = 0
title.textAlignment = .center
title.translatesAutoresizingMaskIntoConstraints = false
return title
}()
let textView: UITextField = {
let textView = UITextField()
textView.translatesAutoresizingMaskIntoConstraints = false
textView.placeholder = "Placeholder text"
textView.backgroundColor = UIColor.lightGray
textView.layer.cornerRadius = 10
return textView
}()
let searchButton: UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.blue
button.setTitle("Tap me", for: UIControl.State.normal)
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
return button
}()
private func setupView() {
addSubview(title)
addSubview(textView)
addSubview(searchButton)
NSLayoutConstraint.activate([
title.topAnchor.constraint(equalTo: self.topAnchor, constant: 100),
title.rightAnchor.constraint(equalTo: self.rightAnchor),
title.leftAnchor.constraint(equalTo: self.leftAnchor),
])
NSLayoutConstraint.activate([
textView.topAnchor.constraint(equalTo: title.bottomAnchor, constant: 20),
textView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
textView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
textView.heightAnchor.constraint(equalToConstant: 60)
])
NSLayoutConstraint.activate([
searchButton.topAnchor.constraint(equalTo: textView.bottomAnchor, constant: 20),
searchButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
searchButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
searchButton.heightAnchor.constraint(equalToConstant: 60)
])
}
#objc func buttonAction(_ sender:UIButton!)
{
print("Button tapped")
}
override init(frame: CGRect) {
super.init(frame: frame)
self.setupView()
}
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
import UIKit
class ViewController: UIViewController {
private let customView = CustomView()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(customView)
customView.translatesAutoresizingMaskIntoConstraints = false
customView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
customView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
customView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
}
}
Basically I want to have a seperate file with the view that has all the design and I just want to drop that into the VC without doing anything special with it. Is this even a good approach? Where should I set up the button action? I mean once its tappable...
Thanks!
Try this first - at the end of viewDidLoad(), add this line:
customView.backgroundColor = .red
When you run the app, you'll notice there is no red box.
Now, add this line after that one:
customView.clipsToBounds = true
Run it again, and... we see nothing!
The problem is, you haven't given your customView any height.
To fix it, constrain the bottom of searchButton in your custom view class:
NSLayoutConstraint.activate([
searchButton.topAnchor.constraint(equalTo: textView.bottomAnchor, constant: 20),
searchButton.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20),
searchButton.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20),
searchButton.heightAnchor.constraint(equalToConstant: 60),
// add this line!
searchButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20),
])
You need to set userInteractionEnabled to true on your CustomView instance so that it passes through taps.
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(customView)
customView.translatesAutoresizingMaskIntoConstraints = false
customView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
customView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
customView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
customView.userInteractionEnabled = true
}
You can use a delegation pattern or a closure property to pass the button tap event back to the containing view controller.
For example,
class CustomView: UIView {
var searchTappedHandler: ((CustomView)->Void)?
#objc func buttonAction(_ sender:UIButton!)
{
print("Button tapped")
self.searchTappedHandler?(self)
}
}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(customView)
customView.translatesAutoresizingMaskIntoConstraints = false
customView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
customView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
customView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
customView.userInteractionEnabled = true
customView.searchTappedHandler = { _ in
print("Search button was tapped")
}
}
Or, if you want to use a function rather than an inline closure
func handleTap(_ customView: CustomView) {
print("tap")
}
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(customView)
customView.translatesAutoresizingMaskIntoConstraints = false
customView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
customView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
customView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
customView.userInteractionEnabled = true
customView.searchTappedHandler = handleTap
}
I am trying to setup a Carousel-like UI with buttons in each carousel cell. I am using a Collection View to do this. The buttons show up in the cell, but do not seem to respond to the touch up inside event which should run tapped() and return "TAPPED!". Here is the code for the Collection View Cell which includes the button. Thanks for the help!
CarouselCollectionViewCell.swift
import UIKit
import Foundation
class CarouselCollectionViewCell: UICollectionViewCell {
static let identifier = "CarouselCollectionViewCell"
#objc func tapped() {
print("TAPPED!")
}
var mainView : UIView = {
var mainCellView = UIView()
mainCellView.translatesAutoresizingMaskIntoConstraints = false
return mainCellView
}()
var remindButton : UIButton = {
var textView = UIButton()
textView.translatesAutoresizingMaskIntoConstraints = false
return textView
}()
override init(frame: CGRect) {
super.init(frame: frame)
self.addSubview(mainView)
mainView.addSubview(remindButton)
mainView.backgroundColor = .white
//Style
mainView.layer.cornerRadius = 8
mainView.layer.masksToBounds = true
// Constraints
mainView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
mainView.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
mainView.heightAnchor.constraint(equalToConstant: 360).isActive = true
mainView.widthAnchor.constraint(equalToConstant: 290).isActive = true
self.remindButton.backgroundColor = UIColor(red: 69.0/255.0, green: 198.0/255.0, blue: 255.0/255.0, alpha: 1.0)
self.remindButton.layer.cornerRadius = 20
self.remindButton.layer.masksToBounds = true
self.remindButton.bottomAnchor.constraint(equalTo: self.mainView.bottomAnchor, constant: -30).isActive = true
self.remindButton.centerXAnchor.constraint(equalTo: self.mainView.centerXAnchor).isActive = true
self.remindButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
self.remindButton.widthAnchor.constraint(equalToConstant: 175).isActive = true
self.remindButton.setTitle("Add Reminder", for: .normal)
self.remindButton.addTarget(self, action: #selector(self.tapped), for: .touchUpInside)
}
override func layoutSubviews() {
super.layoutSubviews()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
When trying to load a custom UIView (BaseHeader.swift) that contains a UIButton into a UIViewController (ViewController.swift) programmatically, the taps on the button are not recognized.
If I extract the code within the custom UIView and paste it directly into the UIViewController, all taps are recognized and working as expected. What am I missing?
At first, I thought it was a problem with not defining a frame size for the UIView after it gets instantiated. I thought that there might be no "hit box" for the button despite it being displayed as intended. After giving the view a frame I still had no luck and tried various other things after googling about for awhile.
The view loads but button taps are not recognized -- see image
ViewController.swift
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.title = "Authentication"
}
override func loadView() {
super.loadView()
let header = BaseHeader()
header.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(header)
NSLayoutConstraint.activate([
header.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
header.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
header.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: -10),
])
}
}
BaseHeader.swift
import UIKit
class BaseHeader: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
func setupView() {
self.isUserInteractionEnabled = true
let avenirFont = UIFont(name: "Avenir", size: 40)
let lightAvenirTitle = avenirFont?.light
let title = UILabel()
title.text = "Title"
title.font = lightAvenirTitle
title.textColor = .black
title.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(title)
NSLayoutConstraint.activate([
title.topAnchor.constraint(equalTo: self.topAnchor, constant: 20),
title.centerXAnchor.constraint(equalTo: self.centerXAnchor)
])
let profile = UIButton()
let profileImage = UIImage(named: "person-icon")
profile.setImage(profileImage, for: .normal)
profile.setImage(UIImage(named: "think-icon"), for: .highlighted)
profile.addTarget(self, action: #selector(profileTapped), for: .touchUpInside)
profile.backgroundColor = .systemBlue
profile.frame.size = CGSize(width: 30, height: 30)
profile.isUserInteractionEnabled = true
profile.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(profile)
NSLayoutConstraint.activate([
profile.centerYAnchor.constraint(equalTo: title.centerYAnchor),
profile.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -20),
])
}
#objc func profileTapped(sender: UIButton) {
print("Tapped")
}
}
You forgot set height for BaseHeader
NSLayoutConstraint.activate([
header.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
header.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
header.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor, constant: -10),
header.heightAnchor.constraint(equalToConstant: 40) //add more
])
It might be that you are calling the wrong initializer for your custom view and that your setupView() function is not being called. It looks like in the view controller you are calling
let header = BaseHeader()
To initialize the view, but it's this init:
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
That calls your setupView() function and sets up the tap.
I declare TestClass contain button and textField and constraint it and then add this class to view controller
import Foundation
import UIKit
class TestClass : UIView {
let testButton : UIButton = {
let button = UIButton()
button.setTitle("Test", for: .normal)
button.setTitleColor(.red ,for:.normal)
return button
}()
let testInput : UITextField = {
let input = UITextField()
input.placeholder = "type here"
return input
}()
override init(frame: CGRect) {
super.init(frame: frame)
setupView()
}
func setupView(){
addSubview(testButton)
addSubview(testInput)
testButton.translatesAutoresizingMaskIntoConstraints = false
testInput.translatesAutoresizingMaskIntoConstraints = false
testButton.topAnchor.constraint(equalTo: self.topAnchor, constant: 20).isActive = true
testButton.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 20).isActive = true
testButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
testButton.widthAnchor.constraint(equalToConstant: 50).isActive = true
testInput.topAnchor.constraint(equalTo: self.topAnchor, constant: 70).isActive = true
testInput.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 20).isActive = true
testInput.heightAnchor.constraint(equalToConstant: 30).isActive = true
testInput.widthAnchor.constraint(equalToConstant: 100).isActive = true
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
in the viewDidLoad I add this class and it appeared .
but when I tap on textField or button it doesn't respond
class ViewControll : UIViewController {
let newClass : TestClass = {
let view = TestClass()
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(newClass)
newClass.frame.size = CGSize(width: 200, height: 200)
newClass.translatesAutoresizingMaskIntoConstraints = false
newClass.topAnchor.constraint(equalTo: contView.topAnchor, constant: 300).isActive = true
newClass.leadingAnchor.constraint(equalTo: contView.leadingAnchor, constant: 30).isActive = true
newClass.testButton.addTarget(self, action: #selector(prnt), for: .touchUpInside)
}
#objc func prnt(){
print("bla bla bla")
}
}
when I click on button or tap on textField nothing happened
can anyone help me please
Constrains don't define height and width of your TestClass - set frame doesn't work. You need to add constraints for this as well, for example, in viewDidLoad method:
newClass.heightAnchor.constraint(equalToConstant: 200).isActive = true
newClass.widthAnchor.constraint(equalToConstant: 200).isActive = true
I'm making a custom UIView class that hold a datepicker. I want to setup the view constraints to reference the parent view that will call my custom class. here is my following code. this is what i get
Thread 1: Fatal error: Unexpectedly found nil while unwrapping an Optional value
class CustomView: UIView {
var datepicker:UIDatePicker!
override init(frame: CGRect) {
super.init(frame: frame)
setupConstraints()
} // initiliaze the button like this CustomButton()
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
func setupDatePicker() {
let datepicker = UIDatePicker()
datepicker.minimumDate = Date()
}
func setupConstraints(){
setupDatePicker()
translatesAutoresizingMaskIntoConstraints = false
leadingAnchor.constraint(equalTo: superview!.leadingAnchor, constant: 20).isActive = true // the error occurs here
trailingAnchor.constraint(equalTo: superview!.trailingAnchor, constant: -20).isActive = true
heightAnchor.constraint(equalToConstant: 60).isActive = true
centerYAnchor.constraint(equalTo: superview!.centerYAnchor).isActive = true
backgroundColor = .red
addSubview(datepicker)
datepicker.translatesAutoresizingMaskIntoConstraints = false
datepicker.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 10).isActive = true
datepicker.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -10).isActive = true
datepicker.heightAnchor.constraint(equalToConstant: 50).isActive = true
datepicker.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
}
}
and this is where i create my custom view and launch it
var customView: CustomView!
class ListViewController: UIViewController {
#IBOutlet var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
customView = CustomView()
view.addSubview(customView)
view.bringSubviewToFront(customView)
Thank you for your time.
You're not assigning var datepicker:UIDatePicker! so it is nil.
Try:
func setupDatePicker() {
let datepicker = UIDatePicker()
datepicker.minimumDate = Date()
self.datepicker = datepicker
}