I created a custom UIButton with this initialiser :
class CustomButton : UIButton{
override init(frame: CGRect) {
super.init(frame: frame)
setUpButtoninClass(frame)
addTarget(self, action: #selector(handleTap), for:.touchUpInside )
}
fileprivate func setUpButtoninClass(_ frame: CGRect) {
let padding : CGFloat = 16
self.frame = frame
layer.shadowColor = UIColor.darkGray.cgColor
layer.shadowOpacity = 0.3
layer.shadowOffset = .zero
layer.shadowRadius = 10
layer.cornerRadius = frame.width/2
backgroundColor = UIColor(white: 0.9, alpha: 1)
let buttonView = UIView(frame: frame)
buttonView.layer.cornerRadius = frame.width/2
buttonView.backgroundColor = .white
addSubview(buttonView)
let imageView = UIImageView(image: UIImage(named: "pen")?.withRenderingMode(.alwaysTemplate))
imageView.tintColor = UIColor(white: 0.7, alpha: 1)
buttonView.addSubview(imageView)
imageView.anchor(top: buttonView.topAnchor, leading: buttonView.leadingAnchor, bottom: buttonView.bottomAnchor, trailing: buttonView.trailingAnchor, padding: UIEdgeInsets.init(top: padding, left: padding, bottom: padding, right: padding))
}
#objc func handleTap(){
print("I'm here")
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}}
In the initialiser I'm adding a target but when I actually initialise the custom button in the VC the #selector method (handleTap) is not called.
This is the implementation of custom Button in VC:
class ViewController: UIViewController {
let circularButton = CustomButton(frame: CGRect(x: 0, y: 0, width: 70, height: 70))
override func viewDidLoad() {
super.viewDidLoad()
self.view.addSubview(circularButton)
circularButton.center = view.center
}
I also tried to add the target when initialising the CustomButton in the VC but nothing changed.
I would like to know where I'm making a mistake in setting up the button.
EDIT 1 :
this is the Debug View Hierarchy
OMG, after debug your code, buttonView and imageView is on the top. Button is behide. You can set the color to debug it more easily. Delete 2 views above make your code works perfectly
I think it's your fault here,
Touch is not detected because you added an ImageView to the top of UIButton.
Try this, or this one,
buttonView.isUserInteractionEnabled = true
imageView.isUserInteractionEnabled = true
Related
I'm using a placeHolder extension to give padding to the placeholder. But when I apply this class to my input field it doesn't show the clear button even if I select "Appears while editing" on the storyboard.
Can someone tell me how to fix it?
import UIKit
class textFiledplaceholder: UITextField {
static let font_size : CGFloat = 16
static let leftPadding : CGFloat = 15
static let righPadding : CGFloat = 15
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)!
self.comminIt()
}
override init(frame: CGRect) {
super.init(frame: frame)
self.comminIt()
}
func comminIt()
{
borderStyle = .none
backgroundColor = .white
// layer.masksToBounds = true
setLeftPaddingPoints(textFiledplaceholder.leftPadding)
setRightPaddingPoints(textFiledplaceholder.righPadding)
}
}
extension UITextField {
func setLeftPaddingPoints(_ amount:CGFloat){
let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: amount, height: self.frame.size.height))
self.leftView = paddingView
self.leftViewMode = .always
}
func setRightPaddingPoints(_ amount:CGFloat) {
let paddingView = UIView(frame: CGRect(x: 0, y: 0, width: amount, height: self.frame.size.height))
self.rightView = paddingView
self.rightViewMode = .always
}
}
You can not use rightview and clearbutton together. And if you are going to use a clear button then I don't think there is any use of right padding. Remove right padding and it will resolve your issue.
This is a custom view, this view creates a square with a given frame with the background color. I am adding a custom view to a subview, the view appears properly. But I am not able to cover the bottom safe area, anyone can help me to remove the safe area from bottom Programmatically.
class CustomView: UIView {
override var frame: CGRect {
didSet {
setNeedsDisplay()
}
}
override init(frame: CGRect) {
super.init(frame: frame)
self.isOpaque = false
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.isOpaque = false
}
override func draw(_ rect: CGRect) {
UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.7).setFill()
UIRectFill(rect)
let square = UIBezierPath(rect: CGRect(x: 200, y: rect.size.height/2 - 150/2, width: UIScreen.main.bounds.size.width - 8, height: 150))
let dashPattern : [CGFloat] = [10, 4]
square.setLineDash(dashPattern, count: 2, phase: 0)
UIColor.white.setStroke()
square.lineWidth = 5
square.stroke()
}
}
Consider the following example:
class ViewController: UIViewController {
private let myView = UIView()
override func viewDidLoad() {
super.viewDidLoad()
configureCustomView()
}
private func configureCustomView() {
myView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(myView)
myView.backgroundColor = .systemPurple
NSLayoutConstraint.activate([
myView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
myView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
myView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
myView.heightAnchor.constraint(equalToConstant: 200)
])
}
}
Result:
If you don't want to go over the safe area, then you could use myView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor) inside NSLayoutConstraint.activate([...]).
So you actually don't have to remove the SafeArea, because you can simply ignore them if you want so...
In case you want to do this fast. (Not programatically)
Open storyboard.
Select your UIView.
Safe Area should be unselected.
So I have a UIBarbuttonItem that I am currently designing based off of a layout that I have done.
import Foundation
import UIKit
class LocationManager: UIBarButtonItem {
var viewController: MainViewController?
lazy var customButton : UIButton = {
let customButton = UIButton(type: .system)
customButton.setImage(UIImage(named: "downArrow"), for: .normal)
customButton.imageEdgeInsets = UIEdgeInsetsMake(0, 20, 0, -10)
guard let customFont = UIFont(name: "NoirPro-SemiBold", size: 20) else {
fatalError("""
Failed to load the "CustomFont-Light" font.
Make sure the font file is included in the project and the font name is spelled correctly.
"""
)
}
customButton.semanticContentAttribute = UIApplication.shared
.userInterfaceLayoutDirection == .rightToLeft ? .forceLeftToRight : .forceRightToLeft
customButton.titleLabel?.font = customFont
customButton.setTitleColor(UIColor.black, for: .normal)
return customButton
}()
override init() {
super.init()
setupViews()
}
#objc func setupViews(){
customView = customButton
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
I correctly do the job of using both an image and title and setting the image insets for the button and on load the appearance is great. However, when I leave the screen and come back it seems as though everything is thrown out of wack the image gets moved back and sometimes there will be two images and one will have a distorted size.
Is there anything wrong with my custom button implementation that I am missing.
I have included images for before and after
I suggest you to make your custom button class, then make title and image by adding subviews. In this case UIImageView and UILabel. Because UIButton inherits from UIView you can easy do this. I've never had problems using this way.
Here is the code I've written for you:
import UIKit
class ViewController: UIViewController {
lazy var customButton: CustomButton = {
let button = CustomButton(frame: CGRect(x: 50,
y: 200,
width: view.frame.width - 100,
height: 50))
// This mask for rotation
button.autoresizingMask = [.flexibleLeftMargin,
.flexibleRightMargin,
.flexibleTopMargin,
.flexibleBottomMargin]
button.attrTitleLabel.text = "San Francisco, CA"
button.addTarget(self, action: #selector(chooseCity), for: .touchUpInside)
return button
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .blue
view.addSubview(customButton)
}
#objc func chooseCity() {
print("Choose city button has pressed")
}
}
class CustomButton: UIButton {
private let arrowImageSize: CGSize = CGSize(width: 20, height: 20)
private let sideOffset: CGFloat = 10
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .white
addSubview(attrTitleLabel)
addSubview(arrowImageView)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
lazy var attrTitleLabel: UILabel = {
let label = UILabel()
label.font = UIFont(name: "NoirPro-SemiBold", size: 20)
label.textColor = .black
return label
}()
lazy var arrowImageView: UIImageView = {
let iv = UIImageView()
iv.image = UIImage(named: "arrow_down")
iv.contentMode = .scaleAspectFit
return iv
}()
override func layoutSubviews() {
super.layoutSubviews()
arrowImageView.frame = CGRect(x: self.frame.width - arrowImageSize.width - sideOffset,
y: self.frame.height/2 - arrowImageSize.height/2,
width: arrowImageSize.width,
height: arrowImageSize.height)
attrTitleLabel.frame = CGRect(x: sideOffset, y: 0, width: self.frame.width - sideOffset*2 - arrowImageSize.width, height: self.frame.height)
}
}
How it looks:
I create programmatically custom textfield
import UIKit
class SearchTextField: UITextField, UITextFieldDelegate {
let padding = UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 5);
init(frame: CGRect, tintText: String, tintFont: UIFont, tintTextColor: UIColor) {
super.init(frame:frame)
self.frame = frame
delegate = self
backgroundColor = .white
textColor = tintTextColor
placeholder = tintText
font = tintFont
createBorder()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
delegate = self
}
func createBorder() {
self.layer.cornerRadius = 6
self.layer.borderColor = UIColor(red: 169/255, green: 169/255, blue: 169/255, alpha: 1).cgColor
self.layer.borderWidth = 1
}
override func textRect(forBounds bounds: CGRect) -> CGRect {
return UIEdgeInsetsInsetRect(bounds, padding)
}
override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
return UIEdgeInsetsInsetRect(bounds, padding)
}
override func editingRect(forBounds bounds: CGRect) -> CGRect {
return UIEdgeInsetsInsetRect(bounds, padding)
}
}
and add it like a subview to my view which is a subview of Google maps view
import UIKit
import GoogleMaps
class MapViewController: UIViewController, UITextFieldDelegate {
#IBOutlet weak var mapView: GMSMapView!
var customSearchBar: SearchTextField!
let searchBarTextColor = UIColor(red: 206, green: 206, blue: 206, alpha: 1)
override func viewDidLoad() {
super.viewDidLoad()
let camera = GMSCameraPosition.camera(withLatitude: 55.75, longitude: 37.62, zoom: 13.0)
mapView.camera = camera
mapView.isUserInteractionEnabled = true
addTopBarView(mapView: mapView)
}
func addTopBarView(mapView: GMSMapView) {
//heigt of topBar is 14% of height of view^ width is the same
let topBarFrame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height * 0.14)
let topBarView = UIView(frame: topBarFrame)
addTopBarViewBackground(view: topBarView)
addTitleForTopBarView(view: topBarView)
addProfileIconForTopBarView(view: topBarView)
addSettingsIconForTopBarView(view: topBarView)
addSearchBar(view: topBarView)
topBarView.isUserInteractionEnabled = true
mapView.addSubview(topBarView)
}
func addSearchBar(view: UIView) {
let frameCustomSearchBar = CGRect(x: 10, y: 45, width: view.frame.width - 20, height: 40)
let fontCustomSearchBar = UIFont(name: "HelveticaNeueCyr", size: 28) ?? UIFont.italicSystemFont(ofSize: 14)
let textColorCustomSearchBar = UIColor(red: 206/255, green: 206/255, blue: 206/255, alpha: 1)
customSearchBar = SearchTextField(frame: frameCustomSearchBar, tintText: NSLocalizedString("find_petrole", comment: ""), tintFont: fontCustomSearchBar, tintTextColor: textColorCustomSearchBar)
customSearchBar.delegate = self
customSearchBar.isUserInteractionEnabled = true
customSearchBar.isEnabled = true
let iconPinView = UIImageView(image: #imageLiteral(resourceName: "icon_pin"))
iconPinView.frame = CGRect(x: 10, y: 10, width: 12, height: 20)
customSearchBar.addSubview(iconPinView)
let iconAddView = UIImageView(image: #imageLiteral(resourceName: "icon_add"))
iconAddView.frame = CGRect(x: customSearchBar.frame.width - 34, y: 10, width: 20, height: 20)
customSearchBar.addSubview(iconAddView)
view.addSubview(customSearchBar)
}
The textfield(customSearchBar) i see but it doesn't clickable, when i tapped on it nothing happens. I saw a few such problems here but did not find anything that help me.
You need inspect UIView Hierarchy using View Debugging feature of xcode and you need to check that textfield does not overlap with other view.
Run the app. View Debugging works in the simulator and on devices, but it's important to note that it needs to be an iOS 8 simulator or device. That said, you may allow earlier deployment targets in your project, just make sure you run on iOS 8 when you try View Debugging.
Navigate to the screen/view that you want to inspect within the running app.
In the Navigators Panel (left column), select the Debug Navigator (sixth tab). Next to your process, you'll see two buttons – press the rightmost button and select View UI Hierarchy
I guess it's because you put the UITextField under other touchable views so the touch event was intercepted.
if you make the custom textField hierarchy by a non-defalut isUserInteractionEnabled object, remember to enable it.
I've built a custom UIButton class but I'm struggling to add objects without affecting the behaviour of the button. I've shown the class below. When I use the class in my main code and add a target, the button only works in areas not covered by the image or text. How can I add objects and have the entire button area behave in the same way?
class TestButton: UIButton {
var myText: UITextView!
var myImageView: UIImageView!
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.blue
let myImage = UIImage(named: "AnImage")
myImageView = UIImageView(image: myImage)
myImageView.frame = CGRect(x: 10, y: 10, width: (myImage?.size.width)!, height: (myImage?.size.height)!)
addSubview(myImageView)
myText = UITextView()
myText.font = UIFont(name: "Courier", size: 12)!
myText.isEditable = false
addSubview(myText)
}
}
A guess here, hope it works.
UIImageView and UITextView does not normally allow "user interaction", meaning that the user can not tap them and expect the app to react based on that. That is probably why, when you tap on the Image view, that event is not passed through to the UIButton below.
Fortunately the fix is easy. You can set the boolean property isUserInteractionEnabled to true and you should be in business again.
So in your case:
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.blue
let myImage = UIImage(named: "AnImage")
myImageView = UIImageView(image: myImage)
myImageView.frame = CGRect(x: 10, y: 10, width: (myImage?.size.width)!, height: (myImage?.size.height)!)
myImageView.isUserInteractionEnabled = true
addSubview(myImageView)
myText = UITextView()
myText.font = UIFont(name: "Courier", size: 12)!
myText.isEditable = false
myText.isUserInteractionEnabled = true
addSubview(myText)
}
Update (after your comment)
OK so I just tried to create a quick project with your button and...it seems to work, I can click on the imageView and I can click on the label and still get an answer from my function, so there must be some difference in how we've set this up.
Here is my MyButton button, awfully close to the one you've made, the only difference is that I've added a backgroundColor to myImageView, a frame on myText and isUserInteractionEnabled = false on myText
class MyButton: UIButton {
var myText: UITextView!
var myImageView: UIImageView!
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = UIColor.blue
let myImage = UIImage(named: "AnImage")
myImageView = UIImageView(image: myImage)
myImageView.frame = CGRect(x: 10, y: 10, width: (myImage?.size.width)!, height: (myImage?.size.height)!)
myImageView.backgroundColor = UIColor.red
addSubview(myImageView)
myText = UITextView()
myText.font = UIFont(name: "Courier", size: 12)!
myText.frame = CGRect(x: 10, y: 80, width: 100, height: 30)
myText.isEditable = false
myText.isUserInteractionEnabled = false
addSubview(myText)
}
}
And here is my ViewController where I use the button
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let button = MyButton(frame: CGRect(x: 10, y: 100, width: 200, height: 200))
button.myText.text = "Hello"
button.addTarget(self, action: #selector(didTapButton(_:)), for: .touchUpInside)
view.addSubview(button)
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
#IBAction func didTapButton(_ sender: MyButton) {
print("It's alive!!")
}
}
Which gives me this pretty UI
And when I tap either the red image, the blue button itself or the "Hello" label I can see this in my console:
It's alive!!
It's alive!!
It's alive!!
So the good news is that it seems to work, now we just need to figure out what the difference between your setup and my setup is :)
Hope that works and helps.