I got the viewController with 2 elements:
view with labels and buttons
tableView
I'm getting the following animation by changing view's height constraint from 170 to 0 and than animating view.layoutIfNeeded() and tableView.layoutIfNeeded().
My goal is to hide menu when content offset of the tableView reaches some value.
This works fine, except I got an overlay of status bar over the moving content from my view. Are there any options to add a sublayer to status bar not to be transparent? Or any other suggestions?
Thanks!
Create a view, put it where the status bar will be, and set its background color to which ever color you require. For example:
let statusBarView = UIView(frame: UIApplication.sharedApplication().statusBarFrame)
statusBarView.backgroundColor = UIColor.blackColor()
view.addSubview(statusBarView)
Or, set the content edge inset by (20.0, 0.0, 0.0, 0.0), which I would agree is a much more elegant solution, as suggested by #holex in the comments
Related
I want to create UINavigationBar with rounded corner. It will look like this
What I am thinking is I add UIView with rounded corner and insert it in navigation bar. So this is my code
let roundView = UIView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width, height: 44))
roundView.backgroundColor = UIColor.whiteBackground
roundView.roundCorners(corners: [.topLeft, .topRight], radius: 20)
navigationController?.navigationBar.insertSubview(roundView, at: 0)
setTitleTextColor(color: UIColor.black)
By the UI, this works well. But then my UIBarButtonItem is missing, it covered up by my custom view and couldn't be clicked. So my question is, how to add subview in navigation bar?
Thank you!
Just not use UINavigation bar and create all by scratch. Is the easiest way. Otherwise you can try with pattern image:
navigationController?.navigationBar.backgroundColor = UIColor(patternImage: UIImage(named: "background.png"))
From Storyboard,
You have ViewController with navigationController
Select navigationController and deselect the below selected option i.e. Show Navigation Bar visibility.
Take a UIView (purpleView) with constraints
top, leading trailing = 0 w.r.t. superview
height = 64
Take another UIView (whiteView) in purpleView with constraints
top= 20 (for status bar)
leading trailing bottom= 0 w.r.t. purpleView
Now add cancel and label to your whiteview
Now your UI Hierarchy is like below
Take outlet of whiteView and make corner radius
Thats it.
If you'r not using storyboard then you can do same with code also. In this case you have to set frame of purpleView and whiteView instead of constraints.
Hope now its clear to you.
How about to make it as a normal UIView and hide the navBar and show it in the next VC, who will know which trick you have used.
read this short article here
I'm having quite a hard time messing with UIView's properties to achieve a desired opaque look programmatically that can be easily done through Storyboard and Attributes Inspector.
What I want to re-create (settings from attributes inspector):
A UIView with a background color of (RGB Sliders: 0, 0, 0) and Opacity Slider set at 75%, with alpha defaulted at 1. So basically a black UIView with the opacity toned down.
What I've tried programmatically:
1) view.backgroundColor = .black
view.alpha = 0.75
2) view.backgroundColor = UIColor.black.withAlphaComponent(0.75)
view.isOpaque = true
Attached is a picture of the UIView selected in Storyboard with the settings for you to see. If you need any more information, please don't hesitate to let me know. Much thanks for your help.
UPDATE: Thanks for all your input. The combination of Clever Error's explanation of view layers and Matt's code allowed for me to achieve my desired look.
Desired UI Look!
What you are describing is:
view.backgroundColor = UIColor.black.withAlphaComponent(0.75)
view.isOpaque = false
The view must not be marked opaque, as it is not opaque.
You can set opacity to view like below in Swift 3
view.alpha = CGFloat(0.1)
Summarizing these answers https://stackoverflow.com/a/40405424/7767664, https://stackoverflow.com/a/46669162/7767664
for UIView itself opacity
view.isOpaque = false
view.alpha = CGFloat(0.5)
for UIView Background opacity
view.backgroundColor = UIColor.black.withAlphaComponent(0.5)
view.isOpaque = false
When your app runs, the view hierarchy will be
UIWindow
UINavigationControllers view
Your View Controllers View
The problem is that UIWindow is black by default, and the UINavigationControllers view is clear. So it ends up mixing your transparent black color with full black to get just black.
You would need to add another view to your view controller that is transparent black then set the view controllers view color to the one you want to blend with.
I want to have the Tab Bar at the top of the screen. One post suggested to do the followings (I put the following code in the viewDidLoad() of the UITabBarController) :
CODE
let tabBar = self.tabBar
// yStatusBar indicates the height of the status bar
let yStatusBar = UIApplication.sharedApplication().statusBarFrame.size.height
// Set the size and the position in the screen of the tab bar
tabBar.frame = CGRectMake(0, yStatusBar, tabBar.frame.size.width, tabBar.frame.size.height)
There are 2 problems with this solution:
The bottom of the screen is left with a black region where the tab bar was
The Tab bar covers the view at the top of the screen - the constraints of that view is relative to the device but they should be relative to the Tab bar. However when the screen is designed in the IB there is no Tab bar to relate to.
Is there a way to overcome these problems? P.S. I am new to IOS
let tabBar = self.tabBarController?.tabBar
// Set the size and the position in the screen of the tab bar
tabBar?.frame = CGRect(x: 0, y: self.view.frame.height, width: (tabBar?.frame.size.width)!, height: (tabBar?.frame.size.height)!)
Although it is against the human interface guidelines there exist a hack if you really want to.
You could create a blank UIView in your storyboard (with proper constraints set up) that would essentially be the placeholder for the tabBar when loaded.
You then set top constraints for your other views relative to this view that you have setup.
This works, but probably not best practice to do so
I am trying to implement the following animation in my swift iOS app. There is currently a UIView at the bottom of my screen with the following properties :
let containerView : UIView = {
let this = UIView(frame: CGRectMake(0,0, 600,150))
this.backgroundColor = UIColor.clearColor()
this.layer.cornerRadius = 5
this.layer.borderColor = UIColor(red: (69/255.0), green: (209/255.0), blue: (153/255.0), alpha: 1.0).CGColor
this.layer.borderWidth = 0.5
return this
}()
Inside, there is an imageView, a couple buttons and other components. The containerView also has a blur effect implemented on it. When the user presses on it, I want the view to move upwards until it reaches the top of the screen. At the same time I want the borders to be drawn, to fill the whole screen, as shown in the outline below. I also want to apply the blur effect as an animation along with the border to the whole screen. Finally, when this animation is finished, I want my collectionView to fade into the space which has been created within the expanded view. I have next to zero experience with animating views in Swift, however these are the ideas which I had :
Apply a movement animation which moves the top of the view from the current position to the top of the screen.
During this process, gradually fade in the expanded view so that it appears as if the view itself is expanding.
Finally, when both animations complete, fade in the collectionView (this should be the easiest part).
However, I'm not sure if my way of thinking is correct, particularly when it comes to drawing the borders and background dynamically doing the animation. I am looking for some advice on how to approach this problem.
Take outlet of heightConstraint of the view which you want to animate.
Make heightConstraint.constant = 0 initially.
On click do something like this.
UIView.animateWithDuration(0.3) {
self.heightConstraint.constant = YOURMAXVALUE
// perform fade in out tasks here
self.view.setNeedsUpdateConstraints()
self.view.layoutIfNeeded()
};
or you can do this with topConstriant also..
Initially set topConstaint such that view will go down.
And then animate like this to see effects
I'm trying to create a statusBar Background. However it seem to place it wrong i've set a View in the top of the viewController and applied following contraints:
-16 trailing
-16 leading
top space 0
height 24
However this is the result
Why is there a white space at the top?
You can create the background for your status bar in the next very straightforward way :
// Set the status bar to red
var statusBarView = UIView(frame: CGRectMake(0, 0, 1024, 22))
statusBarView.backgroundColor = UIColor.redColor()
self.view.addSubview(statusBarView)
Put in the above code in your viewDidLoad() it should be work. I put the 1024 size for the width of the UIView but you can change it according your needs of the device you want.
I hope this help you.