I have a view with a UICollectionView (with scroll enabled).
I would like that, when I click on a button, there is a black overlay shown behind a menu.It would be better with a picture:
The problem is that this overlay is not covering all the background when I scroll down.
When the scroll is up, it's perfect, but when scroll down we can see the limit of the subview.
This is my code:
let width = UIScreen.main.bounds.height
let height = UIScreen.main.bounds.height
overlay = UIView(frame: CGRect(x: 0, y: 0, width: width, height: height))
overlay.backgroundColor = UIColor(red: 0/255, green: 0/255, blue: 0/255, alpha: 0.3)
overlay.layer.zPosition = 1
// AND WHEN THE BUTTON IS PRESSED
// self.collectionView.addSubview(overlay)``
How could I correct this problem ?
Related
I have a floating button in my app that display 5 different buttons. Each of them has a color but initially are gray. When the user selects one of the buttons, all of them hide, and when the user taps again on the floating button, the button that was previously tapped is not gray but with its proper color.
Also the logic would be that the user can tap another one of the buttons to select it, and the previous one would be unselected, as if the user taps on a selected button, it gets unselected.
I'm using cocoa pods for the Floating Button, JJFloatingActionButton, but on the documentation there is no info about this.
func configureActionButton() {
actionButton.overlayView.backgroundColor = UIColor(white: 0, alpha: 0.5)
actionButton.buttonImage = UIImage(systemName: "line.horizontal.3.decrease")
actionButton.buttonColor = UIColor(named: "signoColor")!
actionButton.buttonImageColor = .white
actionButton.buttonImageSize = CGSize(width: 30, height: 30)
actionButton.itemAnimationConfiguration = .slideIn(withInterItemSpacing: 14)
actionButton.itemSizeRatio = CGFloat(0.75)
let item = actionButton.addItem()
item.titleLabel.text = "Button 1"
item.buttonColor = UIColor(red: 254/255.0, green: 224/255.0, blue: 255/255.0, alpha: 1.0)
item.buttonImageColor = UIColor(red: 200/255.0, green: 73/255.0, blue: 203/255.0, alpha: 1.0)
item.imageSize = CGSize(width: 30, height: 30)
item.action = { item in
//This is for the functionality of the button
}
let item2 = actionButton.addItem()
item2.titleLabel.text = "Button 2"
item2.buttonColor = UIColor(red: 254/255.0, green: 224/255.0, blue: 255/255.0, alpha: 1.0)
item2.buttonImageColor = UIColor(red: 200/255.0, green: 73/255.0, blue: 203/255.0, alpha: 1.0)
item2.imageSize = CGSize(width: 30, height: 30)
item2.action = { item in
//This is for the functionality of the button
}
//And I have 3 more buttons
}
This is how the floating button looks like:
I would appreciate some help. I've searched for similar questions but none of them solved this problem. Thank you!
I'm trying to show a subview that has been added to a view, but it does not show up when the button is pressed.
I have tried setting isOpaque to 1, alpha to 1, isHidden to false (without needing to press the button) and have checked that I have run view.addSubview(). I have also found out that the subview is not hidden at all but the background is white (it is supposed to be blue or red).
code to add subviews
//setup
viewBGKRect = CGRect(x: 20, y: 20, width: 984, height: 660)
viewBGK = UIView(frame: viewBGKRect)
viewBGK.backgroundColor = UIColor(red: 139.0, green: 206.0, blue: 231.0, alpha: 1.0)
viewBGK.alpha = 1
viewBGK.isOpaque = true
viewRGKRect = CGRect(x: 20, y: 20, width: 984, height: 660)
viewRGK = UIView(frame: viewRGKRect)
viewRGK.backgroundColor = UIColor(red: 240.0, green: 177.0, blue: 187.0, alpha: 1.0)
viewRGK.alpha = 1
viewRGK.isOpaque = true
//isHidden is set to false when the buttons are pressed
viewBGK.isHidden = true
viewRGK.isHidden = true
view.addSubview(viewBGK)
view.addSubview(viewRGK)
code to show subviews
#IBAction func goalkeeper(_ sender: UIButton) {
switch sender.tag {
case 0:
// blue
viewBGK.isHidden = false
viewRGK.isHidden = true
return
default:
viewBGK.isHidden = true
viewRGK.isHidden = false
return
}
}
I expect a blue/red rectangle to appear at the top of the screen but it does not show.
Nevermind I found the answer:
UIColor RGB is from 0-1 not 0-255 the colors should be
(blue)
UIColor(red:0.55, green:0.81, blue:0.91, alpha:1.0)
and
(red)
UIColor(red:0.94, green:0.69, blue:0.73, alpha:1.0)
not
(blue)
UIColor(red: 139.0, green: 206.0, blue: 231.0, alpha: 1.0)
and
(red)
UIColor(red: 240.0, green: 177.0, blue: 187.0, alpha: 1.0)
i feel really dumb now.
If you're going to utilize custom colors, it might be easier to declare them somewhere other than in a view controller. One approach would be to declare them in an extension. To do this, you would do the following:
Create a new Swift file and name it UIColor+Extension.swift
Inside the new file, add the following code:
extension UIColor {
static var customBlue: UIColor {
return #colorLiteral(red: 0.5450980392, green: 0.8078431373, blue: 0.9058823529, alpha: 1)
}
static var customRed: UIColor {
return #colorLiteral(red: 0.9411764706, green: 0.6941176471, blue: 0.7333333333, alpha: 1)
}
}
I didn't type those colors out. I simply typed return Color Literal and it showed a white rounded rectangle. When I clicked on the rectangle, I saw this:
Then, I clicked the "Other" button and I typed in the RGB values:
Lastly, you want to avoid writing repetitive code (DRY = don't repeat yourself). Here's the updated code:
//setup
viewBGKRect = CGRect(x: 20, y: 20, width: 984, height: 660)
viewBGK = UIView(frame: viewBGKRect)
viewBGK.backgroundColor = .customBlue
viewRGKRect = CGRect(x: 20, y: 20, width: 984, height: 660)
viewRGK = UIView(frame: viewRGKRect)
viewRGK.backgroundColor = .customRed
[viewBGK, viewRGK].forEach { view in
view.alpha = 1
view.isOpaque = true
//isHidden is set to false when the buttons are pressed
view.isHidden = true
}
I am not sure if I understand the concept of Masking correctly but I am trying to recreate the Twitter logo expansion animation in their app:
Twitter Logo expansion
I have this code so far:
class LaunchScreenViewController: UIViewController {
var mask: CALayer!
override func viewDidLoad() {
setUpViewMask()
}
func setUpViewMask() {
mask = CALayer()
mask.contents = UIImage(named: "logo_mask")?.cgImage
mask.contentsGravity = kCAGravityResizeAspect
mask!.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
mask!.anchorPoint = CGPoint(x: 0.5, y: 0.5)
mask!.position = CGPoint(x: view.frame.size.width/2, y: view.frame.size.height/2)
view.layer.backgroundColor = UIColor(red: 70/255, green: 154/255, blue: 233/255, alpha: 1).cgColor
view.layer.mask = mask
}
}
The output of this is:
How would I change the black background to be blue? I tried doing but it didn't seem to work:
view.layer.backgroundColor = UIColor(red: 70/255, green: 154/255, blue: 233/255, alpha: 1).cgColor
Create an intermediate layer where you apply mask. Set the background of your view to the desired background, and set background color of the intermediate layer to the color that you wish your mask to appear in. Something like this,
view.backgroundColor = UIColor(red: 70/255, green: 154/255, blue: 233/255, alpha: 1) // set background of the view portion that do not include mask
let parentLayer = CALayer()
parentLayer.frame = view.bounds
parentLayer.backgroundColor = UIColor.white.cgColor // sets background of mask
view.layer.addSublayer(parentLayer)
let mask = CALayer()
mask.contents = UIImage(named: "twitter.png")?.cgImage
mask.contentsGravity = kCAGravityResizeAspect
mask.bounds = CGRect(x: 0, y: 0, width: 100, height: 100)
mask.anchorPoint = CGPoint(x: 0.5, y: 0.5)
mask.position = CGPoint(x: view.frame.size.width/2, y: view.frame.size.height/2)
parentLayer.mask = mask
This can be achieved by changing the background color of appDelegate's window...
let appDelegate = UIApplication.shared.delegate as! AppDelegate
appDelegate.window!.backgroundColor = UIColor.blue
I have a UIScrollView subclass containing a very wide UIView subclass, and I want to fade out the edges of the visible content. Here's what I've got in the UIScrollView subclass:
private var gradientMask = CAGradientLayer()
override func layoutSubviews() {
super.layoutSubviews()
gradientMask.frame = self.bounds
gradientMask.colors = [UIColor(white: 0.0, alpha: 0.18).CGColor,
UIColor(white: 0.0, alpha: 0.95).CGColor,
UIColor(white: 0.0, alpha: 0.95).CGColor,
UIColor(white: 0.0, alpha: 0.0).CGColor
]
let fadeStart:CGFloat = 50.0 / self.bounds.width
gradientMask.startPoint = CGPoint(x:0, y:0.5)
gradientMask.endPoint = CGPoint(x:1, y:0.5)
let fadeEnd = (self.bounds.width - 40.0) / self.bounds.width
gradientMask.locations = [fadeStart,fadeStart+0.1,fadeEnd,1.0]
self.layer.mask = gradientMask
}
It does work, but there's a lag. After you scroll, the gradient appears to scroll with the content for a moment then snaps back to the expected position. How can I ensure the edges of the scroll view fade out—and that the gradient doesn't move when scrolling?
The fix was just to embed the UIScrollView subclass into a view that has the gradient applied. That's it!
I have a UITabBar of which I want to change the background color of the middle item, but I can't figure out how! (I want to keep the rest of the bar the dark grey color it is).
let barTintColor = UIColor(red: 54/255, green: 54/255, blue: 54/255, alpha: 1.0)
UITabBar.appearance().barTintColor = barTintColor
You can do this by inserting a new subview to your TabBar.
Please check out this answer:
// Add background color to middle tabBarItem
let itemIndex = 2
let bgColor = UIColor(red: 0.08, green: 0.726, blue: 0.702, alpha: 1.0)
let itemWidth = tabBar.frame.width / CGFloat(tabBar.items!.count)
let bgView = UIView(frame: CGRectMake(itemWidth * itemIndex, 0, itemWidth, tabBar.frame.height))
bgView.backgroundColor = bgColor
tabBar.insertSubview(bgView, atIndex: 0)
Hope it helps.
Edit:
If you want to change the background image rather than background color, all you have to do is change the line :
bgView.backgroundColor = bgColor
to imageView with image as background, then add it as a subview. It may look like this:
backgroundView = UIImageView(image: UIImage(named: "tabBarImage"))
bgView.addSubview(backgroundView)