I've created a UIButton as follows (round button with shadow properties nothing too fancy):
let button = UIButton(type: .system)
button.backgroundColor = UIColor(hexString: "4267B2")
button.tintColor = .white
button.setImage(#imageLiteral(resourceName: "add").withRenderingMode(.alwaysTemplate), for: .normal)
button.addTarget(self, action: #selector(handleClick), for: .touchUpInside)
button.translatesAutoresizingMaskIntoConstraints = false
button.layer.cornerRadius = 32
button.layer.shadowColor = UIColor.darkGray.cgColor
button.layer.shadowRadius = 6
button.layer.shadowOpacity = 0.6
button.layer.shadowOffset = CGSize.zero
Purpose is to seem as an add button on click it rotates to form a cross button.
func handleClick() {
button.isSelected = !newPostButton.isSelected
let rotationDirection: CGFloat = button.isSelected ? 1: -1
UIView.animate(withDuration: 0.5) {
self.button.transform = self.button.transform.rotated(by: (rotationDirection * .pi/4))
}
}
The issue I encounter is when the animation occur for rotation the rotation works perfectly but the image provided for button .withRendering: is nullified as shown below:
Is there a fix? (with code no libraries please) I searched through the net but none had a similar issue.
You could set your button type to .custom instead of .system. This should fix your problem.
Related
I'm struggling a lot trying to change the Corner Radius of a customized Segmented Controller. Does anyone know what the problem might be?
Blessings
lazy var mainSegment: UISegmentedControl = {
let sc = UISegmentedControl(items: items)
sc.translatesAutoresizingMaskIntoConstraints = false
sc.selectedSegmentTintColor = .orange
sc.selectedSegmentIndex = 0
sc.backgroundColor = .white
sc.setTitleTextAttributes([.foregroundColor: UIColor.white], for: .selected)
sc.setTitleTextAttributes([.foregroundColor: UIColor.gray], for: .normal)
sc.layer.cornerRadius = 20
sc.layer.borderWidth = 0.1
sc.layer.borderColor = UIColor.white.cgColor
sc.clipsToBounds = true
sc.layer.masksToBounds = true
sc.addTarget(self, action: #selector(handleSegmentChanges), for: .valueChanged)
return sc
}()
I'm not using the Storyboard to create my UI so I've created my button like so
var randomButton: UIButton = {
var button = UIButton()
button.translatesAutoresizingMaskIntoConstraints = false
button.setTitle("Random", for: .normal)
button.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.6)
button.layer.cornerRadius = 3
button.layer.borderWidth = 1
button.layer.borderColor = UIColor.black.cgColor
button.setTitleColor(.black, for: .highlighted)
button.addTarget(self, action: #selector(HomeController.buttonPressed), for: .touchUpInside)
return button
}()
The issue is that when the user taps the button it doesn't have a nice transition/animation between the tint colors. The color of the text doesn't change to black unless the user holds the button.
The normal behavior, when you use the Storyboard, the blue tinted text changes to a light blue color slowly. Not abruptly.
I think the animation you are referring to is part of the system type button.
Try this:
var button = UIButton(type: .system)
I have a UIButton that has a default image and if a property is set it changes to the property object (an image);
With the default image, everything works properly and the image fits perfectly but when I'm using the image, I don't know why the image doesn't fit.
Here's the code:
var user: User? {
didSet {
self.profileImageButton.setImage(self.user?.profileImage?.withRenderingMode(.alwaysOriginal) ?? #imageLiteral(resourceName: "plus_photo").withRenderingMode(.alwaysOriginal), for: .normal)
}
}
lazy var profileImageButton: UIButton = {
let button = UIButton(type: .system)
button.setImage(#imageLiteral(resourceName: "plus_photo").withRenderingMode(.alwaysOriginal), for: .normal)
button.layer.cornerRadius = 80/2
button.contentMode = .scaleAspectFill
button.layer.masksToBounds = true
button.clipsToBounds = true
button.layer.borderWidth = 1
button.layer.borderColor = .white
button.addTarget(self, action: #selector(didTapPhoto), for: .touchUpInside)
return button
}()
I'm expecting something like this
But I'm getting this instead
Add this line to your button configuration
button.imageView?.contentMode = .scaleAspectFit
This is my code
var button = [UIButton?](count:3, repeatedValue: UIButton())
for i in 0...2{
button[i]!.tag = i
button[i]!.frame = CGRectMake(CGFloat(i) *(collectionViewLove?.frame.width)!/3,0,(collectionViewLove?.frame.width)!/3, 30)
button[i]!.setTitle(titleForButtonsOneSelected[i], forState: .Normal)
button[i]!.titleLabel?.adjustsFontSizeToFitWidth = true
button[i]!.layer.borderWidth = 1.0
button[i]!.layer.borderColor = UIColor.blueColor().CGColor
button[i]!.backgroundColor = UIColor.clearColor()
button[i]!.setTitleColor(UIColor.blackColor(), forState: .Normal)
view.addSubview(button[i]!)
}
The problem is only the last button added to the view is getting shown. How do I show all the button objects in the view?
EDIT:
The frame values for UIButton I am getting
(0.0, 0.0, 106.666666666667, 30.0)
(106.666666666667, 0.0, 106.666666666667, 30.0)
(213.333333333333, 0.0, 106.666666666667, 30.0)
let buttons = Array(0...2).map { number -> UIButton in
let button = UIButton(frame: CGRectMake(CGFloat(number) * collectionViewLove!.frame.width / 3, 0, collectionViewLove!.frame.width / 3, 30))
button.tag = number
button.setTitle(titleForButtonsOneSelected[number], forState: .Normal)
buttontitleLabel?.adjustsFontSizeToFitWidth = true
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.blueColor().CGColor
button.backgroundColor = UIColor.clearColor()
button.setTitleColor(UIColor.blackColor(), forState: .Normal)
view.addSubview(button)
return button
}
This way you have 3 different buttons in buttons. You can also customize the buttons right there as well.
Edit:
let buttons = Array(0...2).forEach {
let button = UIButton(frame: CGRectMake(CGFloat($0) * collectionViewLove!.frame.width / 3, 0, collectionViewLove!.frame.width / 3, 30))
button.tag = $0
button.setTitle(titleForButtonsOneSelected[$0], forState: .Normal)
buttontitleLabel?.adjustsFontSizeToFitWidth = true
button.layer.borderWidth = 1.0
button.layer.borderColor = UIColor.blueColor().CGColor
button.backgroundColor = UIColor.clearColor()
button.setTitleColor(UIColor.blackColor(), forState: .Normal)
view.addSubview(button)
}
It looks like button[i]!.frame = CGRectMake(CGFloat(i) *(collectionViewLove?.frame.width)!/3,0,(collectionViewLove?.frame.width)!/3, 30) is producing the same frame each time, so your buttons will be superimposed on each other. You need to have something dynamic in your call to have them be in different spots and visible.
I am trying to make this simple UI
Now the orange and darkblue are simple two views (the darkblue will have a nested tableview), but how would i make the button with some simple animation? Should i use CALayer or can i make use of the Interface Builder?
I would have done it through code:
let button2 = UIButton()
button2.frame = CGRectMake(0, 0, 100, 100)
button2.layer.borderColor = UIColor.whiteColor().CGColor
button2.layer.borderWidth = 2
button2.layer.cornerRadius = 50
button2.setTitle("button", forState: .Normal)
button2.backgroundColor = UIColor.blueColor()
button2.addTarget(self, action: "buttonAction", forControlEvents: .TouchUpInside)
button2.setTitleColor(UIColor(red: 233/255, green: 64/255, blue: 87/255, alpha: 1), forState: UIControlState.Normal)
self.view.addSubview(button1)
Try This :-
Make sure your button's Height and width are the same
self.imgBg1.layer.cornerRadius = self.imgBg1.bounds.size.height / 2
self.imgBg1.layer.borderWidth = 3.0
self.imgBg1.layer.borderColor = UIColor.whiteColor().CGColor
self.imgBg1.clipsToBounds = true
self.imgBg1.contentMode = .ScaleToFill