I am trying to add a bottom line to UITextField ...
what am I doing wrong?
let emialTextField: UITextField = {
let textField = UITextField()
textField.layer.cornerRadius = 5
textField.borderStyle = .none
textField.placeholder = "emial adress"
let bottomline = CALayer()
bottomline.frame = CGRect(x: 0, y: textField.frame.height - 2, width: textField.frame.width, height: 2)
bottomline.backgroundColor = UIColor.init(red: 0/255, green: 0/255, blue: 0/255, alpha: 1).cgColor
textField.layer.addSublayer(bottomline)
return textField
}()
Try below code.
override func viewDidLoad() {
super.viewDidLoad()
let emialTextField: UITextField = {
let textField = UITextField(frame: CGRect(x: 100, y: 90, width: 100, height: 30))
textField.borderStyle = .none
textField.placeholder = "emial adress"
let bottomline = CALayer()
bottomline.frame = CGRect(x: 0, y: textField.frame.height + 1, width: textField.frame.width, height: 2)
bottomline.backgroundColor = UIColor.init(red: 3/255, green: 4/255, blue: 5/255, alpha: 1).cgColor
textField.layer.addSublayer(bottomline)
return textField
}()
view.addSubview(emialTextField)
emialTextField.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 100).isActive = true
emialTextField.topAnchor.constraint(equalTo: view.topAnchor, constant: 90).isActive = true
emialTextField.heightAnchor.constraint(equalToConstant: 30).isActive = true
emialTextField.widthAnchor.constraint(equalToConstant: 100).isActive = true
}
It seems textField.frame.width is zero when executing below line of your code:
bottomline.frame = CGRect(x: 0, y: textField.frame.height - 2, width: textField.frame.width, height: 2)
So you should add bottomline layer to your text field after size set for emialTextField via constraint or frame size.
Here is what I am trying to do:
The screenshot is taken from iPhone:
Code Below:
//Show HighLightView
let highLightView = UIView(frame: CGRect(x: self.minXHighLightView!, y: 0, width: self.maxXHighLightView!-self.minXHighLightView!, height: self.soundWaveView.frame.height))
highLightView.backgroundColor = UIColor(displayP3Red: 89/256, green: 206/256, blue: 249/256, alpha: 0.4)
self.soundWaveView.addSubview(highLightView)
//Show HighLight Lable
let highLightLabelCount = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
highLightLabelCount.textColor = .black
highLightLabelCount.font = UIFont(name: "Lato-Bold", size: 20)
highLightView.addSubview(highLightLabelCount)
Question: How to set Frame or constraints label setup at top Left Corner?
Any help would be greatly appreciated.
Thanks in advance.
Your constraint should be centered x,y not top left with
//Show HighLightView
let highLightView = UIView(frame: CGRect(x: self.minXHighLightView!, y: 0, width: self.maxXHighLightView!-self.minXHighLightView!, height: self.soundWaveView.frame.height))
highLightView.backgroundColor = UIColor(displayP3Red: 89/256, green: 206/256, blue: 249/256, alpha: 0.4)
self.soundWaveView.addSubview(highLightView)
//Show HighLight Lable
let highLightLabelCount = UILabel()
highLightLabelCount.textColor = .black
highLightLabelCount.font = UIFont(name: "Lato-Bold", size: 20)
highLightView.addSubview(highLightLabelCount)
highLightLabelCount.translatesAutoresizingMaskIntoConstraints = false
self.highLightView.textAlignment = .center
NSLayoutConstraint.activate([
self.highLightLabelCount.centerXAnchor.constraint(equalTo: self.highLightView.centerXAnchor),
self.highLightLabelCount.centerYAnchor.constraint(equalTo: self.highLightView.centerYAnchor)
])
I think this will be useful if you would like to pin label to top left corner of your highlight view.
NSLayoutConstraint.activate([
highLightView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
highLightView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
highLightLabelCount.leadingAnchor.constraint(equalTo: view.leadingAnchor),
highLightLabelCount.bottomAnchor.constraint(equalTo: highLightView.topAnchor))
])
I am working on a Swift playground for WWDC. I need to have a UI Button that closes the web view and toolbars (the button is called closeButton and the function is at the bottom for the button), and returns to the previously screen when clicked (the first view). The code below is the Swift I have typed so far:
import UIKit
import WebKit
import PlaygroundSupport
import Foundation
PlaygroundPage.current.needsIndefiniteExecution = true
class MyViewController : UIViewController {
let cardView = UIView()
let accountButton = UIButton()
let coverImageView = UIImageView()
let swiftLogoView = UIImageView()
let openLabel = UILabel()
let titleLabel = UILabel()
let label = UILabel()
let captionLabel = UILabel()
let descriptionLabel = UILabel()
let backgroundImageView = UIImageView()
let closeButton = UIButton()
let openButton = UIButton()
let doneButton = UIButton()
let url1 = URL(string: "https://youtube.com/embed/uuxXHAKA1WY")!
let alertController = UIAlertController(title: "Who Made This Playground:", message: "Mark Bruckert made this playground for WWDC 2018. He is a Web and Graphic Designer learning Swift and IOS Design. He would love to attend this year, to learn the new frameworks revealed at the event and have IOS Engineers review his designs and code.", preferredStyle: .alert)
let defaultAction = UIAlertAction(title: "Close", style: .default, handler: nil)
let menuBar = UIView()
let doneLabel = UILabel()
let webView = UIWebView()
let cardView2 = UIView()
let coverImageView2 = UIImageView()
let titleLabel2 = UILabel()
let captionLabel2 = UILabel()
let descriptionLabel2 = UILabel()
let backgroundImageView2 = UIImageView()
let url2 = URL(string: "https://youtu.be/uuxXHAKA1WY")!
override func loadView() {
let view = UIView()
view.backgroundColor = .white
label.frame = CGRect(x: 20, y: 30, width: 272, height: 38)
label.text = "Dev Tutorials:"
label.textColor = .black
label.font = UIFont.systemFont(ofSize: 32, weight: .bold)
openLabel.frame = CGRect(x: 140, y: 215, width: 272, height: 38)
openLabel.text = "Play Video"
openLabel.textColor = .black
openLabel.font = UIFont.systemFont(ofSize: 32, weight: .semibold)
self.openLabel.alpha = 0
openLabel.layer.zPosition = 5
doneLabel.frame = CGRect(x: 25, y: 5, width: 272, height: 38)
doneLabel.text = "Done"
doneLabel.textColor = .white
doneLabel.font = UIFont.systemFont(ofSize: 32, weight: .light)
openLabel.layer.zPosition = 7
doneButton.addTarget(self, action: #selector(doneButtonTapped), for: .touchUpInside
)
cardView.frame = CGRect(x: 60, y: 100, width: 300, height: 250)
cardView.layer.cornerRadius = 14
cardView.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
cardView.layer.shadowOpacity = 0.25
cardView.layer.shadowOffset = CGSize(width: 0, height: 10)
cardView.layer.shadowRadius = 10
cardView2.frame = CGRect(x: 60, y: 100, width: 300, height: 250)
cardView2.layer.cornerRadius = 14
cardView2.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
cardView2.layer.shadowOpacity = 0.25
cardView2.layer.shadowOffset = CGSize(width: 0, height: 10)
cardView2.layer.shadowRadius = 10
titleLabel.frame = CGRect(x: 16, y: 16, width: 272, height: 38)
titleLabel.text = "Portals with ARKit"
titleLabel.textColor = .white
titleLabel.font = UIFont.systemFont(ofSize: 32, weight: .semibold)
captionLabel.frame = CGRect(x: 16, y: 204, width: 272, height: 40)
captionLabel.text = "by Jared Davidson"
captionLabel.textColor = .white
captionLabel.numberOfLines = 0
descriptionLabel.frame = CGRect(x: 20, y: 400, width: 335, height: 132)
descriptionLabel.text = "In this tutorial, you will learn how to use ARKit by Apple to transport yourself through a portal."
descriptionLabel.textColor = .black
descriptionLabel.numberOfLines = 10
descriptionLabel.alpha = 0
coverImageView.frame = CGRect(x: 0, y: 0, width: 300, height: 250)
coverImageView.contentMode = .scaleAspectFill
coverImageView.image = #imageLiteral(resourceName: "Cover.jpg")
coverImageView.clipsToBounds = true
swiftLogoView.frame = CGRect(x: 8, y: 8, width: 35, height: 35)
swiftLogoView.contentMode = .scaleAspectFill
swiftLogoView.image = #imageLiteral(resourceName: "Swift_logo.png")
swiftLogoView.clipsToBounds = true
coverImageView.layer.cornerRadius = 14
accountButton.frame = CGRect(x: 360, y: 20, width: 55, height: 55)
accountButton.backgroundColor = #colorLiteral(red: 0.803921580314636, green: 0.803921580314636, blue: 0.803921580314636, alpha: 1.0)
accountButton.layer.cornerRadius = 30
accountButton.addTarget(self, action: #selector(accountButtonTapped), for: .touchUpInside)
closeButton.frame = CGRect(x: 360, y: 20, width: 28, height: 28)
closeButton.backgroundColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.5)
closeButton.layer.cornerRadius = 14
closeButton.setImage(#imageLiteral(resourceName: "Action-Close#2x.png"), for: .normal)
closeButton.addTarget(self, action: #selector(closeButtonTapped), for: .touchUpInside)
closeButton.alpha = 0
openButton.frame = CGRect(x: 100, y: 200, width: 220, height: 75)
openButton.backgroundColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
openButton.layer.cornerRadius = 14
openButton.addTarget(self, action: #selector(openButtonTapped), for: .touchUpInside)
openButton.alpha = 0
doneButton.frame = CGRect(x: 10, y: 5, width: 130, height: 50)
doneButton.layer.borderWidth = 3.0
doneButton.layer.borderColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
doneButton.layer.cornerRadius = 14
doneButton.addTarget(self, action: #selector(doneButtonTapped), for: .touchUpInside)
cardView.addSubview(coverImageView)
cardView.addSubview(openLabel)
doneButton.addSubview(doneLabel)
cardView.addSubview(closeButton)
cardView.addSubview(openButton)
menuBar.addSubview(doneButton)
cardView.addSubview(descriptionLabel)
view.addSubview(cardView)
view.addSubview(label)
view.addSubview(accountButton)
let tap = UITapGestureRecognizer(target: self, action: #selector(cardViewTapped))
cardView.addGestureRecognizer(tap)
cardView.isUserInteractionEnabled = true
doneButton.isUserInteractionEnabled = true
self.view = view
}
#objc func cardViewTapped() {
let animator = UIViewPropertyAnimator(duration: 0.7, dampingRatio: 0.7) {
self.cardView.frame = CGRect(x: 0, y: 0, width: 450, height: 667)
self.label.layer.isHidden = true
self.cardView.layer.cornerRadius = 0
self.titleLabel.frame = CGRect(x: 20, y: 20, width: 374, height: 38)
self.captionLabel.frame = CGRect(x: 20, y: 370, width: 272, height: 40)
self.descriptionLabel.alpha = 1
self.coverImageView.frame = CGRect(x: 0, y: 0, width: 450, height: 420)
self.coverImageView.layer.cornerRadius = 0
self.closeButton.alpha = 1
self.openButton.alpha = 0.7
self.accountButton.alpha = 0
self.openLabel.alpha = 1
}
animator.startAnimation()
}
#objc func closeButtonTapped() {
let animator = UIViewPropertyAnimator(duration: 0.7, dampingRatio: 0.7) {
self.cardView.frame = CGRect(x: 60, y: 100, width: 300, height: 250)
self.cardView.layer.cornerRadius = 14
self.titleLabel.frame = CGRect(x: 16, y: 16, width: 272, height: 38)
self.captionLabel.frame = CGRect(x: 16, y: 204, width: 272, height: 40)
self.descriptionLabel.alpha = 0
self.coverImageView.frame = CGRect(x: 0, y: 0, width: 300, height: 250)
self.coverImageView.layer.cornerRadius = 14
self.closeButton.alpha = 0
self.label.layer.isHidden = false
self.openButton.alpha = 0
self.openLabel.alpha = 0
self.accountButton.alpha = 1
}
animator.startAnimation()
}
#objc func openButtonTapped() {
let view = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 600))
view.backgroundColor = UIColor.lightGray
PlaygroundPage.current.liveView = view
menuBar.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(menuBar)
menuBar.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
menuBar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
menuBar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
menuBar.heightAnchor.constraint(equalToConstant: 64.0).isActive = true
menuBar.backgroundColor = #colorLiteral(red: 0.803921580314636, green: 0.803921580314636, blue: 0.803921580314636, alpha: 1.0)
let toolbar = UIView()
toolbar.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(toolbar)
toolbar.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
toolbar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
toolbar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
toolbar.heightAnchor.constraint(equalToConstant: 64.0).isActive = true
toolbar.backgroundColor = #colorLiteral(red: 0.803921580314636, green: 0.803921580314636, blue: 0.803921580314636, alpha: 1.0)
webView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(webView)
webView.topAnchor.constraint(equalTo: menuBar.bottomAnchor, constant: 8.0).isActive = true
webView.bottomAnchor.constraint(equalTo: toolbar.topAnchor, constant: -8.0).isActive = true
webView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
webView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
webView.loadRequest(URLRequest(url: URL(string:"https://youtube.com/embed/uuxXHAKA1WY")!))
}
#objc func accountButtonTapped() {
present(alertController, animated: true, completion: nil)
alertController.addAction(defaultAction)
}
#objc func doneButtonTapped() {
self.webView.alpha = 0
self.view.alpha = 0
}
}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()
Thanks in advance for your help,
Mark B.
In method openButtonTapped, Local variable view created problem to your code. Also, you called liveView again. I have modified your code, it is working assumed that last screen will go to previous.
First, declare the toolBar as member variable like menuBar.And you the following code. Tap done button will go to previous.
#objc func openButtonTapped() {
view.backgroundColor = UIColor.cyan
menuBar.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(menuBar)
menuBar.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
menuBar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
menuBar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
menuBar.heightAnchor.constraint(equalToConstant: 64.0).isActive = true
menuBar.backgroundColor = #colorLiteral(red: 0.803921580314636, green: 0.803921580314636, blue: 0.803921580314636, alpha: 1.0)
toolbar.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(toolbar)
toolbar.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
toolbar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
toolbar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
toolbar.heightAnchor.constraint(equalToConstant: 64.0).isActive = true
toolbar.backgroundColor = #colorLiteral(red: 0.803921580314636, green: 0.803921580314636, blue: 0.803921580314636, alpha: 1.0)
webView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(webView)
webView.topAnchor.constraint(equalTo: menuBar.bottomAnchor, constant: 8.0).isActive = true
webView.bottomAnchor.constraint(equalTo: toolbar.topAnchor, constant: -8.0).isActive = true
webView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
webView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
webView.loadRequest(URLRequest(url: URL(string:"https://youtube.com/embed/uuxXHAKA1WY")!))
}
#objc func accountButtonTapped() {
present(alertController, animated: true, completion: nil)
alertController.addAction(defaultAction)
}
#objc func doneButtonTapped() {
print("test")
self.webView.stopLoading()
self.webView.alpha = 0
toolbar.removeFromSuperview()
menuBar.removeFromSuperview()
}
I am currently trying to make a simple pop up, here I have a button, once it gets tapped.
It should show a simple view above it, I achieved the blue background, but I am not being able to add a label to it, and center the label to the blue popup
let width = (sender as! UIButton).frame.width
let y = (sender as! UIButton).frame.origin.y
let x = (sender as! UIButton).frame.origin.x
myView = UIView(frame: CGRect(x: x, y: y - 30, width:width, height: 30))
myView.backgroundColor = UIColor.blue
let label = UILabel()
label.text = (sender as! UIButton).titleLabel?.text
label.font = UIFont(name:"avenirNext-Meduim",size:20)
label.center = self.myView.center
myview.addSubview(label)
self.view.addSubview(myView)
UIView.animate(withDuration: 0.1, delay: 0.1, options: [], animations: {
self.myView.alpha = 0.0
}) { (finished: Bool) in
self.myView.isHidden = true
}
Try to set your label frame:
let label = UILabel(frame: CGRect(origin: .zero, size: yourLabelSize))
Instead of
label.center = self.myView.center
try
label.centerXAnchor.constraint(equalTo: myView.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: myView.centerYAnchor).isActive = true
after
myview.addSubview(label)
self.view.addSubview(myView)
My solution
let codedLabel:UILabel = UILabel()
codedLabel.frame = CGRect(x: myView.center.x, y: myView.center.y, width: 51, height: 30)
codedLabel.textAlignment = .center
codedLabel.text = "q"
codedLabel.numberOfLines = 1
codedLabel.textColor=UIColor.red
codedLabel.font=UIFont.systemFont(ofSize: 22)
codedLabel.backgroundColor=UIColor.lightGray
self.myView.addSubview(codedLabel)
codedLabel.translatesAutoresizingMaskIntoConstraints = false
codedLabel.heightAnchor.constraint(equalToConstant: 30).isActive = true
codedLabel.widthAnchor.constraint(equalToConstant: 30).isActive = true
codedLabel.centerXAnchor.constraint(equalTo: codedLabel.superview!.centerXAnchor).isActive = true
codedLabel.centerYAnchor.constraint(equalTo: codedLabel.superview!.centerYAnchor).isActive = true
let headerView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: tableView.frame.width, height: 50))
let label = UILabel()
label.frame = CGRect.init(x: headerView.center.x-60, y:headerView.center.y-15, width: 120, height: 30)
label.textAlignment = .center
label.textColor = #colorLiteral(red: 0.1290470958, green: 0.2743584514, blue: 0.6418049335, alpha: 1)
label.font = UIFont(name: "Roboto-Bold", size: 15)
label.text = "11-12-2020"
headerView.addSubview(label)
headerView.backgroundColor = #colorLiteral(red: 0.9967060685, green: 0.9998621345, blue: 0.9997505546, alpha: 1)
im trying to add an icon to my username textfield, somehow I added the icon but I cant add any padding to it.
What I mean is, I want it to look like this:
And what I get is this:
let usernameTextField: UITextField = {
let tf = UITextField()
let imageView = UIImageView()
let image = UIImage(named: "user-icon")
imageView.image = image
imageView.frame = CGRect(x: 0, y: 0, width: 10, height: 15)
tf.leftViewMode = UITextFieldViewMode.always
tf.leftView = imageView
tf.addSubview(imageView)
var placeholder = NSMutableAttributedString(string: "username", attributes: [NSForegroundColorAttributeName: UIColor.lightGray])
tf.attributedPlaceholder = placeholder
tf.backgroundColor = UIColor.rgb(red: 34, green: 34, blue: 34)
tf.borderStyle = .roundedRect
tf.font = UIFont.systemFont(ofSize: 14)
tf.layer.cornerRadius = 25
tf.textColor = .white
tf.layer.borderWidth = 1
tf.layer.borderColor = UIColor(white: 1, alpha: 0.1).cgColor
tf.layer.masksToBounds = true
return tf
}()
And this is my code block. Even if I change the x and y values it doesnt event move any pixels.
Increase the width of the view and center the image. Adjust the width accordingly (I have set it 50). Try this ...
let usernameTextField: UITextField = {
let tf = UITextField()
let imageView = UIImageView()
let image = UIImage(named: "user-icon")
imageView.image = image
imageView.frame = CGRect(x: 0, y: 0, width: 50, height: 15)
imageView.contentMode = .scaleAspectFit
tf.leftViewMode = UITextFieldViewMode.always
tf.leftView = imageView
tf.addSubview(imageView)
var placeholder = NSMutableAttributedString(string: "username", attributes: [NSForegroundColorAttributeName: UIColor.lightGray])
tf.attributedPlaceholder = placeholder
tf.backgroundColor = UIColor.init(red: 35.0/100.0, green: 34.0/100.0, blue: 34.0/100.0, alpha: 1)
tf.borderStyle = .roundedRect
tf.font = UIFont.systemFont(ofSize: 14)
tf.layer.cornerRadius = 25
tf.textColor = .white
tf.layer.borderWidth = 1
tf.layer.borderColor = UIColor(white: 1, alpha: 0.1).cgColor
tf.layer.masksToBounds = true
return tf
}()