I have a UIView class
class FloatingView : UIView {
lazy var floatingButton : UIButton = {
let button = UIButton(type: UIButtonType.system)
button.setBackgroundImage(#imageLiteral(resourceName: "ic_add_circle_white_36pt"), for: .normal)
button.tintColor = UIColor().themePurple()
button.addTarget(self, action: #selector(buttonClicked), for: UIControlEvents.touchUpInside)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
setupViews()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setupViews(){ addSubview(floatingButton) }
override func didMoveToWindow() {
super.didMoveToWindow()
floatingButton.rightAnchor.constraint(equalTo: layoutMarginsGuide.rightAnchor).isActive = true
floatingButton.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor).isActive = true
floatingButton.widthAnchor.constraint(equalToConstant: 60).isActive = true
floatingButton.heightAnchor.constraint(equalToConstant: 60).isActive = true
}
#objc func buttonClicked (){
print("Clicked..")
}
Added this to view by
let floatingButton = FloatingView()
view.addSubview(floatingButton)
I've also specified the constraints for the floating view .
The button got added to view as expected but the "buttonClicked" function not invoked when the button is clicked . The fade animation on the button when clicked is working though.I've tried UITapGesture but not working .
I've update the class as below
class FloatingView{
lazy var floatingButton : UIButton = {
let button = UIButton(type: UIButtonType.system)
button.setBackgroundImage(#imageLiteral(resourceName: "ic_add_circle_white_36pt"), for: .normal)
button.tintColor = UIColor().themePurple()
button.addTarget(self, action: #selector(buttonClicked(_:)), for: UIControlEvents.touchUpInside)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
private var view : UIView!
func add(onview: UIView ){
view = onview
configureSubViews()
}
private func configureSubViews(){
view.addSubview(floatingButton)
floatingButton.rightAnchor.constraint(equalTo: view.layoutMarginsGuide.rightAnchor).isActive = true
floatingButton.bottomAnchor.constraint(equalTo: view.layoutMarginsGuide.bottomAnchor).isActive = true
floatingButton.widthAnchor.constraint(equalToConstant: 60).isActive = true
floatingButton.heightAnchor.constraint(equalToConstant: 60).isActive = true
}
#objc func buttonClicked(_ sender : UIButton){
print("Button Clicked")
}
}
And in controller
let flButton = FloatingView()
flButton.add(onview: view)
I'm trying to create a floating action button like this. I'm not sure whether I'm doing it the right way.
try to change the action to
action: #selector(buttonClicked(_:))
and the function to
#objc func buttonClicked(_ sender: UIButton){..}
I somehow fixed it by setting the constrains from within the custom class to its superview rather than from the controller.
func configureSubviews(){
if let superView = superview {
superView.addSubview(floatingButton)
widthAnchor.constraint(equalToConstant: circleSpanArea).isActive = true
heightAnchor.constraint(equalTo: widthAnchor).isActive = true
centerXAnchor.constraint(equalTo: floatingButton.centerXAnchor).isActive = true
centerYAnchor.constraint(equalTo: floatingButton.centerYAnchor).isActive = true
floatingButton.rightAnchor.constraint(equalTo: superView.layoutMarginsGuide.rightAnchor).isActive = true
floatingButton.bottomAnchor.constraint(equalTo: superView.layoutMarginsGuide.bottomAnchor).isActive = true
floatingButton.heightAnchor.constraint(equalToConstant: 60).isActive = true
floatingButton.widthAnchor.constraint(equalToConstant: 60).isActive = true
}
}
Related
I need to add a UIButton as a subview on a UIView but it actually doesn't appear at runtime.
This is my code:
let moreButton : UIButton = {
let button = UIButton()
button.setImage(#imageLiteral(resourceName: "more"), for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
addSubview(moreButton)
moreButton.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
moreButton.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
moreButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
moreButton.widthAnchor.constraint(equalToConstant: 20).isActive = true
}
The button isn't added eventually to the view. I'm sure this is an easy fix but I can't wrap my head around it.
First of all, make sure you the viewController is showing anything since you're doing it without storyboards, check out this simple tutorial:
https://medium.com/better-programming/creating-a-project-without-storyboard-in-2020-and-without-swifui-82080eb6d13b
If the problem is with that UIButton, try to set up the subviews in viewDidLoad:
final class ViewController: UIViewController {
let cardView = CardView()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(cardView)
/// Constraints
let margins = view.layoutMarginsGuide
cardView.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
cardView.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
cardView.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true
cardView.heightAnchor.constraint(equalToConstant: 30).isActive = true
cardView.widthAnchor.constraint(equalToConstant: 20).isActive = true
}
}
final class CardView: UIView {
let moreButton : UIButton = {
let button = UIButton()
button.setTitle("Button title", for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
return button
}()
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
}
override init(frame: CGRect) {
super.init(frame:frame)
self.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(moreButton)
/// Constraints
let margins = self.layoutMarginsGuide
moreButton.trailingAnchor.constraint(equalTo: margins.trailingAnchor).isActive = true
moreButton.leadingAnchor.constraint(equalTo: margins.leadingAnchor).isActive = true
moreButton.topAnchor.constraint(equalTo: margins.topAnchor).isActive = true
moreButton.heightAnchor.constraint(equalToConstant: 30).isActive = true
moreButton.widthAnchor.constraint(equalToConstant: 20).isActive = true
}
}
I've set up margins for the constraints and also added a leadingAnchor constraint, that might have been the issue as well.
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 I m clicking on button , selector is not getting called.
There are only two component is the cell , 1 is image and another is UIButton.
Below is the code for collection cell. is there any other way to add method.
class AttachmentCell: UICollectionViewCell {
weak var delegate: AttachmentCellDelegate?
let removeButton: UIButton = {
let button = UIButton(type: .custom)
button.translatesAutoresizingMaskIntoConstraints = false
button.setImage(UIImage(named: "close_icon"), for: .normal)
button.addTarget(self, action: #selector(removeButtonTapped), for: .touchUpInside)
button.isUserInteractionEnabled = true
return button
}()
let imageView: UIImageView = {
let imgView = UIImageView()
imgView.contentMode = .scaleAspectFill
imgView.clipsToBounds = true
return imgView
}()
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = UIColor.red
self.isUserInteractionEnabled = true
self.contentView.addSubview(imageView)
imageView.isUserInteractionEnabled = true
self.contentView.addSubview(removeButton)
//self.addSubview(removeButton)
imageView.snp.makeConstraints { (make) in
make.leading.equalToSuperview()
make.trailing.equalToSuperview()
make.top.equalToSuperview()
make.bottom.equalToSuperview()
}
removeButton.snp.makeConstraints { (make) in
make.width.equalTo(40)
make.height.equalTo(40)
make.top.equalTo(imageView.snp.top).offset(-5)
make.trailing.equalTo(self.imageView.snp.trailing).offset(5)
}
self.backgroundColor = UIColor.gray
}
#objc func removeButtonTapped() {
delegate?.didRemoveButtonTapped()
}
}
Change let removeButton to lazy var removeButton.
self doesn't exist until init has been called. When you add a target to self in a let constant, you are defining it before init has been called.
Alternatively, just call addTarget in the init block.
I have a custom view that includes a stack view. Inside the stack view I have a label and a button.
I created my stack view, label and button in the following way and added them to the parent view.
class HomeView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
translatesAutoresizingMaskIntoConstraints = false
addSubview(stackView)
stackView.addArrangedSubview(haveAccount)
stackView.addArrangedSubview(signin)
stackView.setCustomSpacing(4.0, after: haveAccount)
}
let stackView: UIStackView = {
let stack = UIStackView()
stack.translatesAutoresizingMaskIntoConstraints = false
stack.distribution = .fillProportionally
stack.alignment = .fill
stack.isUserInteractionEnabled = false
return stack
}()
let haveAccount: UILabel = {
let label = UILabel()
...
return label
}()
let signin: UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("Sign in", for: .normal)
button.titleLabel?.font = UIFont(name: "Avenir", size: 14)
button.setTitleColor(UIColor.white, for: .normal)
button.addTarget(self, action: #selector(HomeController.loginClicked(_:)), for: .touchUpInside)
return button
}()
}
In my view controller I add the view to the controller's base view and set the constraints. I also create the method that should be called when the signin button is tapped.
override func viewDidLoad() {
super.viewDidLoad()
homeView = HomeView()
homeView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(homeView)
homeView.fullscreenView(parentView: view)
}
#objc func loginClicked(_ sender: UIButton) {
print("sign in button pressed")
}
When I press the button the loginClicked method is not called. Now I did tried moving the loginClicked method to the custom view and changing the addTarget accordingly and loginClicked method is called. This being said I know the button is clickable but I don't think the target for the button action is correct and that is why the loginClicked method in the view controller is not being called.
You can use Protocol/Delegation
//1. Create a protocol
protocol HomeViewDelegate{
func loginButtonClicked(sender: UIButton)
}
class HomeView: UIView {
//2. Create a delegate
var delegate: HomeViewDelegate?
let stackView: UIStackView = {
let stack = UIStackView()
stack.translatesAutoresizingMaskIntoConstraints = false
stack.distribution = .fillProportionally
stack.alignment = .fill
stack.isUserInteractionEnabled = false
return stack
}()
let haveAccount: UILabel = {
let label = UILabel()
return label
}()
let signin: UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("Sign in", for: .normal)
button.titleLabel?.font = UIFont(name: "Avenir", size: 14)
button.setTitleColor(UIColor.white, for: .normal)
button.addTarget(self, action: #selector(loginClicked(sender:)), for: .touchUpInside)
button.backgroundColor = .red
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
translatesAutoresizingMaskIntoConstraints = false
addSubview(stackView)
stackView.addArrangedSubview(haveAccount)
stackView.addArrangedSubview(signin)
stackView.setCustomSpacing(4.0, after: haveAccount)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//3. Call your protocol method via delegate
#objc func loginClicked(sender: UIButton) {
if let delegate = delegate{
delegate.loginButtonClicked(sender: sender)
}
}
}
In You Caller ViewController create an extension
extension ViewController: HomeViewDelegate{
func loginButtonClicked(sender: UIButton) {
print("login Button Clicked")
}
}
First of all you set userInteractionEnabled property of your stackView to false, set it to true. Then if it does not work consider the following approach:
There are two possible ways to fix this, first is adding the target from ViewController, and the other one is using delegation.
I think the first way would be easier to implement for you.
You need to add your target from your ViewController class.
First update your view class and get rid of adding a target:
class HomeView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
translatesAutoresizingMaskIntoConstraints = false
addSubview(stackView)
stackView.addArrangedSubview(haveAccount)
stackView.addArrangedSubview(signin)
stackView.setCustomSpacing(4.0, after: haveAccount)
}
let stackView: UIStackView = {
let stack = UIStackView()
stack.translatesAutoresizingMaskIntoConstraints = false
stack.distribution = .fillProportionally
stack.alignment = .fill
stack.isUserInteractionEnabled = true
return stack
}()
let haveAccount: UILabel = {
let label = UILabel()
...
return label
}()
let signin: UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("Sign in", for: .normal)
button.titleLabel?.font = UIFont(name: "Avenir", size: 14)
button.setTitleColor(UIColor.white, for: .normal)
return button
}()
}
Now in your ViewController:
override func viewDidLoad() {
super.viewDidLoad()
homeView = HomeView()
homeView.translatesAutoresizingMaskIntoConstraints = false
homeView.signIn.addTarget(self, action: #selector(loginClicked), for: .touchUpInside)
view.addSubview(homeView)
homeView.fullscreenView(parentView: view)
}
#objc func loginClicked(_ sender: UIButton) {
print("sign in button pressed")
}
You need to add the right constraints, I had this problem, I had this problem and the solution was this.
Solution:
import Foundation
import UIKit
protocol HomeViewDelegate:class{
func loginButtonClicked(sender: UIButton)
}
class HomeView: UIView {
//2. Create a delegate
weak var delegate: HomeViewDelegate?
var stackView: UIStackView = {
let stack = UIStackView()
stack.translatesAutoresizingMaskIntoConstraints = false
stack.distribution = .fillProportionally
stack.alignment = .fill
stack.axis = .vertical
stack.isUserInteractionEnabled = true
return stack
}()
let haveAccount: UILabel = {
let label = UILabel()
label.backgroundColor = .gray
label.text = "Label"
label.textAlignment = .center
return label
}()
let signin: UIButton = {
let button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("Sign in", for: .normal)
button.titleLabel?.font = UIFont(name: "Avenir", size: 14)
button.setTitleColor(UIColor.white, for: .normal)
button.addTarget(self, action: #selector(loginClicked(sender:)), for: .touchUpInside)
button.isUserInteractionEnabled = true
button.backgroundColor = .red
return button
}()
override init(frame: CGRect) {
super.init(frame: frame)
stackView.addArrangedSubview(haveAccount)
stackView.addArrangedSubview(signin)
stackView.setCustomSpacing(4.0, after: haveAccount)
addSubview(stackView)
NSLayoutConstraint.activate([
self.stackView.topAnchor.constraint(equalTo: self.topAnchor),
self.stackView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
self.stackView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
self.stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
])
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
//3. Call your protocol method via delegate
#objc func loginClicked(sender: UIButton) {
if let delegate = delegate{
delegate.loginButtonClicked(sender: sender)
}
}
}
ViewController
override func viewDidLoad() {
super.viewDidLoad()
let homeView = HomeView()
homeView.translatesAutoresizingMaskIntoConstraints = false
homeView.delegate = self
self.view.addSubview(homeView)
NSLayoutConstraint.activate([
homeView.centerXAnchor.constraint(equalTo: centerXAnchor),
homeView.centerYAnchor.constraint(equalTo: centerYAnchor),
homeView.heightAnchor.constraint(equalToConstant: 300),
homeView.widthAnchor.constraint(equalToConstant: 300)
])
}
#objc func loginClicked(_ sender: UIButton) {
print("sign in button pressed")
}
add this line to your button code
button.isUserInteractionEnabled = true
re-active isUserInteractionEnabled again
let signin: UIButton = {
let button = UIButton()
button.backgroundColor = .blue
button.setTitle("Sign in", for: .normal)
button.titleLabel?.font = UIFont(name: "Avenir", size: 14)
button.setTitleColor(UIColor.white, for: .normal)
button.addTarget(self, action: #selector(ViewController.loginClicked(_:)), for: .touchUpInside)
button.isUserInteractionEnabled = true
return button
}()
I want to programmatically set multiple alignment combinations for my button title, like so:
The easiest way I found to do this was to add two UILabels as subviews of my custom UIButton and set autolayout constraints accordingly.
However, I can't figure out how to make my labels behave the same way as a button title would (namely having its alpha altered when a button tap occurs).
I have tried setting their alpha property in a target-action method for .touchUpInside but since they're not attached to the button state, they won't change their alpha back to normal when the user ends tapping the button.
class Button: UIView {
var leftButton = UIButton(type: .roundedRect)
var rightButton = UIButton(type: .roundedRect)
init() {
super.init(frame: .zero)
createButton()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
createButton()
}
func createButton() {
self.backgroundColor = UIColor.cyan
self.layer.borderWidth = 0.5
self.layer.borderColor = UIColor.blue.cgColor
self.addSubview(leftButton)
self.addSubview(rightButton)
leftButton.setTitle("left", for: .normal)
leftButton.setTitleColor(UIColor.black, for: .normal)
leftButton.layer.borderColor = UIColor.yellow.cgColor
leftButton.layer.borderWidth = 0.5
leftButton.translatesAutoresizingMaskIntoConstraints = false
leftButton.topAnchor.constraint(equalTo: self.topAnchor, constant: 0).isActive = true
leftButton.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
leftButton.trailingAnchor.constraint(lessThanOrEqualTo: rightButton.leadingAnchor).isActive = true
leftButton.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0).isActive = true
rightButton.setTitle("right", for: .normal)
rightButton.layer.borderColor = UIColor.green.cgColor
rightButton.layer.borderWidth = 0.5
rightButton.setTitleColor(UIColor.black, for: .normal)
rightButton.translatesAutoresizingMaskIntoConstraints = false
rightButton.topAnchor.constraint(equalTo: self.topAnchor, constant: 0).isActive = true
rightButton.leadingAnchor.constraint(greaterThanOrEqualTo: leftButton.trailingAnchor).isActive = true
rightButton.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
rightButton.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: 0).isActive = true
leftButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
rightButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
}
func buttonTapped() {
print("button tapped")
}
there is a better approach.
Take two buttons and keep them in a stackView and do necessary settings.
But make sure that two buttons will point to same action.So that it will seem to user that it's actually one button.
here is the output.
I just made this in storyboard. As i am using stackView so programmatically creating and layouting is super easy. I think you can do it. :)
To stop flashing:
Make each button type custom.
How to make only one button action for both button?
See this popular stack answer.
Here is the result.
What you need is to differentiate between tap and hold and release of the button states. Luckily there are 2 built-in action methods that we can make use of for this.
Touch Down Action: This will be called as soon as you tap on the button. So you can change the alpha of your labels here.
Touch Up Inside: This action method is called when you have released the button. So you can reset your alpha here.
#IBAction func touchupInsideAction(_ sender: Any) {
firstLabel.alpha = 1.0
secondLabel.alpha = 1.0
}
#IBAction func touchDownAction(_ sender: Any) {
firstLabel.alpha = 0.5
secondLabel.alpha = 0.5
}
I was able to put the two labels and get them highlighted when clicked by creating a UIButton other than .custom (for this example I used .roundedRect), setting a dummy title, adding subviews to the button title itself and setting their constraints as I wanted to. It works as expected.
Code:
class Button: UIView {
let button: UIButton
let leftLabel = UILabel()
let rightLabel = UILabel()
init() {
button = UIButton(type: .roundedRect)
super.init(frame: .zero)
createButton()
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func createButton() {
self.addSubview(button)
button.translatesAutoresizingMaskIntoConstraints = false
button.topAnchor.constraint(equalTo: self.topAnchor).isActive = true
button.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
button.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
button.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
button.backgroundColor = UIColor.cyan
button.layer.borderWidth = 0.5
button.layer.borderColor = UIColor.blue.cgColor
button.setTitle(" ", for: .normal)
if let title = button.titleLabel {
title.addSubview(rightLabel)
rightLabel.text = "right"
rightLabel.translatesAutoresizingMaskIntoConstraints = false
rightLabel.topAnchor.constraint(equalTo: title.topAnchor).isActive = true
rightLabel.leadingAnchor.constraint(greaterThanOrEqualTo: title.trailingAnchor).isActive = true
rightLabel.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
rightLabel.bottomAnchor.constraint(equalTo: title.bottomAnchor).isActive = true
title.addSubview(leftLabel)
leftLabel.text = "left"
leftLabel.translatesAutoresizingMaskIntoConstraints = false
leftLabel.topAnchor.constraint(equalTo: title.topAnchor).isActive = true
leftLabel.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
leftLabel.trailingAnchor.constraint(lessThanOrEqualTo: title.leadingAnchor).isActive = true
leftLabel.bottomAnchor.constraint(equalTo: title.bottomAnchor).isActive = true
}
button.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
}
func buttonTapped() {
print("button tapped")
}