I’m trying to put a gradient on a button, but it is not showing up. All the other button parts are working and displaying perfectly!
Function that creates the button
private func createButtonMenu(buttonTitle: String, buttonIcon: UIImage, colorOne: UIColor, colorTwo: UIColor) -> UIButton{
let button = UIButton()
button.setTitle(buttonTitle, for: .normal)
button.translatesAutoresizingMaskIntoConstraints = false
button.contentHorizontalAlignment = .leading
button.contentVerticalAlignment = .bottom
button.contentEdgeInsets = UIEdgeInsets(top: 0, left: 10, bottom: 10, right: 0)
button.layer.cornerRadius = 30
button.layer.masksToBounds = true
let icon = UIImageView(image: buttonIcon)
icon.translatesAutoresizingMaskIntoConstraints = false
button.addSubview(icon)
button.heightAnchor.constraint(equalToConstant: 100).isActive = true
icon.topAnchor.constraint(equalTo: button.topAnchor, constant: 10).isActive = true
icon.leadingAnchor.constraint(equalTo: button.leadingAnchor, constant: 10).isActive = true
let gradientLayer = CAGradientLayer()
gradientLayer.frame = button.bounds
gradientLayer.colors = [UIColor.red, UIColor.blue]
gradientLayer.locations = [0.0, 1.0]
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
button.layer.insertSublayer(gradientLayer, at: 0)
//button.backgroundColor = .red
icon.widthAnchor.constraint(equalToConstant: 30).isActive = true
icon.heightAnchor.constraint(equalToConstant: 30).isActive = true
return button
}
Function that inserts the button in view
private func configuringButtons(){
//Creating buttons
let userButtonMenu: UIButton = createButtonMenu(buttonTitle: "009", buttonIcon: #imageLiteral(resourceName: "woman"), colorOne: .red, colorTwo: .blue)
view.addSubview(userButtonMenu)
}
Colours in a gradient layer must be of type CGColor, not UIColor.
gradientLayer.colors = [UIColor.red.cgColor, UIColor.blue.cgColor]
Related
I have created UIView and it has one subview and it's containing shape object which are creating using UIBezierPath, and UIView has fixed height and width (image 1). When i click the blue color button, it should be scale down to another fixed width and height. I have applied CGAffineTransform to subview and, i guess it is scale down properly, but since topAnchor and leftAchor has constant values, after scale down it is not displaying properly (image 2).I will attach my source code here and screenshots, please, analyze this and can someone suggest better approach for how to do this ? and highly appreciate ur feedback and comments.
code:
import UIKit
class ViewController: UIViewController {
var screenView: UIView!
var button: UIButton!
let widthOfScaleDownView: CGFloat = 200
let heightOfScaleDownView: CGFloat = 300
override func viewDidLoad() {
screenView = UIView(frame: .zero)
screenView.translatesAutoresizingMaskIntoConstraints = false
screenView.backgroundColor = UIColor.red
self.view.addSubview(screenView)
NSLayoutConstraint.activate([
screenView.heightAnchor.constraint(equalToConstant: 800),
screenView.widthAnchor.constraint(equalToConstant: 600),
screenView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0),
screenView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0)
])
button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.blue
self.view.addSubview(button)
NSLayoutConstraint.activate([
button.heightAnchor.constraint(equalToConstant: 50),
button.widthAnchor.constraint(equalToConstant: 100),
button.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 950),
button.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 350)
])
button.setTitle("click", for: .normal)
button.setTitleColor(UIColor.white, for: .normal)
button.addTarget(self, action: #selector(scaleDownView(_:)), for: .touchUpInside)
let shapeView = UIView(frame: .zero)
shapeView.translatesAutoresizingMaskIntoConstraints = false
let rect = CGRect(x: 0, y: 0, width: 300, height: 300)
let shape = UIBezierPath(roundedRect: rect, cornerRadius: 50)
let layer = CAShapeLayer()
layer.path = shape.cgPath
layer.lineWidth = 2
shapeView.layer.addSublayer(layer)
screenView.addSubview(shapeView)
NSLayoutConstraint.activate([
shapeView.topAnchor.constraint(equalTo: screenView.topAnchor, constant: 250),
shapeView.leftAnchor.constraint(equalTo: screenView.leftAnchor, constant: 150)
])
}
#IBAction func scaleDownView(_ sender: UIButton) {
let widthScale = widthOfScaleDownView/screenView.frame.width
let heightScale = heightOfScaleDownView/screenView.frame.height
screenView.subviews.forEach{ view in
view.transform = CGAffineTransform(scaleX: widthScale, y: heightScale)
}
NSLayoutConstraint.activate([
screenView.heightAnchor.constraint(equalToConstant: heightOfScaleDownView),
screenView.widthAnchor.constraint(equalToConstant: widthOfScaleDownView),
screenView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0),
screenView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0)
])
}
}
Couple things...
1 - When you use CGAffineTransform to change a view, it will automatically affect the view's subviews. So no need for a loop.
2 - Transforms are cumulative, so when "going back" to the original scale, use .identity instead of another scale transform.
3 - You cannot set a constraint multiple times. So if you do:
screenView.heightAnchor.constraint(equalToConstant: 800)
and then you also do:
screenView.heightAnchor.constraint(equalToConstant: heightOfScaleDownView)
you will get auto-layout conflicts... the view cannot be both 800-pts tall and
300-pts tall at the same time.
Take a look at the changes I made to your code. I also added a 1-second animation to the scale transform so you can see what it's doing:
class ViewController: UIViewController {
var screenView: UIView!
var button: UIButton!
let widthOfScaleDownView: CGFloat = 200
let heightOfScaleDownView: CGFloat = 300
override func viewDidLoad() {
screenView = UIView(frame: .zero)
screenView.translatesAutoresizingMaskIntoConstraints = false
screenView.backgroundColor = UIColor.red
self.view.addSubview(screenView)
// constrain screenView
// width: 800 height: 600
// centered X and Y
NSLayoutConstraint.activate([
screenView.heightAnchor.constraint(equalToConstant: 800),
screenView.widthAnchor.constraint(equalToConstant: 600),
screenView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor, constant: 0),
screenView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor, constant: 0)
])
button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.blue
self.view.addSubview(button)
NSLayoutConstraint.activate([
button.heightAnchor.constraint(equalToConstant: 50),
button.widthAnchor.constraint(equalToConstant: 100),
button.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 950),
button.leftAnchor.constraint(equalTo: self.view.leftAnchor, constant: 350)
])
button.setTitle("click", for: .normal)
button.setTitleColor(UIColor.white, for: .normal)
button.addTarget(self, action: #selector(scaleDownView(_:)), for: .touchUpInside)
let shapeView = UIView(frame: .zero)
shapeView.translatesAutoresizingMaskIntoConstraints = false
let rect = CGRect(x: 0, y: 0, width: 300, height: 300)
let shape = UIBezierPath(roundedRect: rect, cornerRadius: 50)
let layer = CAShapeLayer()
layer.path = shape.cgPath
layer.lineWidth = 2
shapeView.layer.addSublayer(layer)
screenView.addSubview(shapeView)
// constrain shapeView
// width: 300 height: 300
// centered X and Y in screenView
NSLayoutConstraint.activate([
shapeView.widthAnchor.constraint(equalToConstant: 300.0),
shapeView.heightAnchor.constraint(equalToConstant: 300.0),
shapeView.centerXAnchor.constraint(equalTo: screenView.centerXAnchor),
shapeView.centerYAnchor.constraint(equalTo: screenView.centerYAnchor),
])
}
#IBAction func scaleDownView(_ sender: UIButton) {
let widthScale = widthOfScaleDownView/screenView.frame.width
let heightScale = heightOfScaleDownView/screenView.frame.height
UIView.animate(withDuration: 1.0) {
// if we have already been scaled down
if widthScale == 1 {
// animate the scale transform back to original (don't add another transform)
self.screenView.transform = .identity
} else {
// animate the scale-down transform
self.screenView.transform = CGAffineTransform(scaleX: widthScale, y: heightScale)
}
}
// do NOT change screenView constraints!
}
}
I would like to change the background of my game view controller,
However the classic self.view.backgroundColor = UIColor.red for example isn't working and I am not sure why. Could someone help me out? maybe I am missing something simple here is some code
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = UIColor(red: 35/255.0, green: 35/255.0, blue: 33/255.0, alpha: 1.0)
codedLabel.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
codedLabel.textAlignment = .center
codedLabel.text = "Box and Weave"
codedLabel.numberOfLines=1
codedLabel.textColor=UIColor.white
codedLabel.font=UIFont.systemFont(ofSize: 25)
codedLabel.backgroundColor = UIColor(red: 35/255.0, green: 35/255.0, blue: 33/255.0, alpha: 1.0)
self.view.addSubview(codedLabel)
codedLabel.translatesAutoresizingMaskIntoConstraints = false
codedLabel.heightAnchor.constraint(equalToConstant: 200).isActive = true
codedLabel.widthAnchor.constraint(equalToConstant: 200).isActive = true
codedLabel.centerXAnchor.constraint(equalTo: codedLabel.superview!.centerXAnchor).isActive = true
codedLabel.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 100).isActive = true
playButton.translatesAutoresizingMaskIntoConstraints = false
playButton.backgroundColor = UIColor.white
playButton.setTitle("Play!", for: .normal)
playButton.setTitleColor(UIColor.blue, for: .normal)
playButton.titleLabel!.font = UIFont(name: "HelveticaNeue-Thin", size: 23)
playButton.titleLabel?.adjustsFontSizeToFitWidth = true
playButton.titleLabel?.minimumScaleFactor = 0.5
playButton.layer.cornerRadius = 25
self.view.addSubview(playButton)
// contraints for button
let buttonHeight = playButton.heightAnchor.constraint(equalToConstant: 50)
let buttonWidth = playButton.widthAnchor.constraint(equalToConstant: 125)
let xPlacement = playButton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
let yPlacement = playButton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
buttonConstraints = [buttonHeight, buttonWidth, xPlacement, yPlacement]
NSLayoutConstraint.activate(buttonConstraints)
playButton.addTarget(self, action: #selector(playButtonMethod), for: .touchUpInside)
}
This is how it looks when loaded
I want to show the activity indicator on UIAlertViewController which contain the table view, So its working perfectly, but second case is when search controller appears on the Parent of UIAlertViewController then activity indicator not appears in center on UIAlertViewController.
Attaching image before attaching searchVC on Parent
And when searchVC added on Parent then
Following is code of activity indicator
var actInd: UIActivityIndicatorView = UIActivityIndicatorView()
func startActivityIndicator() {
self.view.isUserInteractionEnabled = false
let loadingView: UIView = UIView()
loadingView.frame = CGRect(x: 0, y: 0, width: 80.0, height: 80.0)
loadingView.center = self.view.center
loadingView.backgroundColor = UIColor(red: 44/255, green: 44/255, blue: 44/255, alpha: 0.7)
loadingView.clipsToBounds = true
loadingView.layer.cornerRadius = 10
actInd.frame = CGRect(x: 0, y: 0, width: 40.0, height: 40.0)
actInd.style = .whiteLarge
actInd.center = CGPoint(x: loadingView.frame.size.width / 2, y: loadingView.frame.size.height / 2)
loadingView.addSubview(actInd)
self.view.addSubview(loadingView)
actInd.startAnimating()
}
func stopActivityIndicator() {
self.view.isUserInteractionEnabled = true
actInd.stopAnimating()
let view = actInd.superview
view?.removeFromSuperview()
}
above code I have added in extension on UIViewController
Finally solved it by setting constraints by following way
func startActivityIndicator() {
self.view.isUserInteractionEnabled = false
let loadingView: UIView = UIView()
loadingView.translatesAutoresizingMaskIntoConstraints = false
actInd.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(loadingView)
loadingView.addSubview(actInd)
loadingView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
loadingView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
loadingView.widthAnchor.constraint(equalToConstant: 80.0).isActive = true
loadingView.heightAnchor.constraint(equalToConstant: 80.0).isActive = true
loadingView.center = self.view.center
loadingView.backgroundColor = UIColor(red: 44/255, green: 44/255, blue: 44/255, alpha: 0.7)
loadingView.clipsToBounds = true
loadingView.layer.cornerRadius = 10
actInd.leadingAnchor.constraint(equalTo: loadingView.leadingAnchor).isActive = true
actInd.trailingAnchor.constraint(equalTo: loadingView.trailingAnchor).isActive = true
actInd.topAnchor.constraint(equalTo: loadingView.topAnchor).isActive = true
actInd.bottomAnchor.constraint(equalTo: loadingView.bottomAnchor).isActive = true
actInd.style = .whiteLarge
actInd.center = CGPoint(x: loadingView.frame.size.width / 2, y: loadingView.frame.size.height / 2)
actInd.startAnimating()
}
I'm trying to remove shadow from my button title.
How I make shadow and corner radius:
func makeShadowRounded() {
layer.cornerRadius = 25
layer.shadowColor = UIColor.darkGray.cgColor
layer.shadowOffset = CGSize(width: 0, height: 2)
layer.shadowRadius = 3
layer.shadowOpacity = 0.15
}
My button with white background:
let signInButton: UIButton = {
let button = UIButton()
button.layer.borderColor = UIColor.customBlue.cgColor
button.layer.borderWidth = 0.5
button.setTitle("Sign In", for: .normal)
button.setTitleColor(.customBlue, for: .normal)
button.makeShadowRounded()
return button
}()
For removing/replacing (by different color) shadow i replaced setTitle and setTitleColor by:
let shadow = NSShadow()
shadow.shadowColor = UIColor(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
shadow.shadowOffset = CGSize(width: 0, height: 2)
shadow.shadowBlurRadius = 2
let attributedString = NSAttributedString(string: "Sign In", attributes: [
NSAttributedStringKey.shadow : shadow,
NSAttributedStringKey.foregroundColor : UIColor.customBlue
])
button.setAttributedTitle(attributedString, for: .normal)
However, It isn't working properly. What will be the better solution for that issue?
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)