I'm having a problem with what I thought was a simple UIView slide animation from a UINavigationBar. I have a UIView with a UIButton and I would like to simulate a slide
down/up effect from the Navigation Bar by animating the View height. The problem is the View animates but any SubViews e.g. UIButton stay fixed.
I'm coding in Xamarin (C#) but I'm sure it's simple enough to read for Objective-C coders
if (_menuView == null)
{
// set initial frame
_menuView = new MenuView{Frame = Window.Frame};
// store original "expanded" height for later
_expandedMenuHeight = _menuView.Frame.Height;
// set the frame to underneath the NavigationBar
var frame = ((UINavigationController)Window.RootViewController).NavigationBar.Frame;
var y = frame.Bottom;
// Add to Window View
menuView.Frame = new RectangleF(_menuView.Frame.X,y,_menuView.Frame.Width,0);
Window.Add(_menuView);
}
// Toggle View Height - if collapsed, expand, if expanded, collapse
var height = _menuView.Frame.Height == 0 ? _expandedMenuHeight : 0;
// Animate the height
UIView.Transition (_menuView,0.2,UIViewAnimationOptions.CurveEaseIn | UIViewAnimationOptions.LayoutSubviews,() => {
_menuView.Frame = new RectangleF(0,_menuView.Frame.Y,_menuView.Frame.Width,height); },null);
Any pointers are greatly appreciated!
I am not so clear with Xamarin. But in objectiveC, you could use,
view.clipsToBounds = YES;
So when you are trying to reduce the height the subviews would also be hidden.
Related
Using storyboard, I have placed an imageView as my tableView's headerView inside a ViewController.
This is how my storyboard is set up:
Depending on what data the user is viewing, the viewController will either show or hide the headerView. My question is, that when the headerView is visible and the user drags down on the tableView, how can I have the imageView stick to both the navigationBar and the tableView as it resizes to cover the space in between?
This is what it currently does:
But this is what I'm going for:
Any help would be greatly appreciated. I've looked at parallax libraries, but none support sectionTitles, and I'm not necessarily going for the parallax effect either. When the user scrolls up, I want it to bounce back to the regularView and not hide the headerView. Thanks!
UPDATE:
I have followed the advice posted by Dany below and have done the
following:
-(void)scrollViewDidScroll:(UIScrollView*)scrollView {
CGRect initialFrame = CGRectMake(0, 0, 320, 160);
if (scrollView.contentOffset.y < 0) {
initialFrame.size.height =! scrollView.contentOffset.y;
childHeaderView.frame = initialFrame;
} }
childHeaderView is an imageView and for some reason when I drag down,
the image moves up (like half of it behind the navBar) and doesn't return. Any advice would be
greatly appreciated!! Thanks!
I recently posted a blog post about accomplishing this using constraints which might help, turns out it was quite straight forward.
Here is the link: Creating parallax effect on UIScrollView using constraints
First of all you should remove the UIImageView from the header and add it as a simple UIImageView on top of the UITableView then since UITableViewDelegate protocol conforms to UIScrollViewDelegate protocol you can implement the scrollViewDidScroll: method to check when the tableView is scrolling down and has a bouncing effect. something like this:
-(void)someInitMethod {
initialFrame = yourHeaderView.frame;
}
-(void)scrollViewDidScroll:(UIScrollView*)scrollView {
if(scrollView.contentOffset.y < 0) {
initialFrame.size.height -= scrollView.contentOffset.y;
yourHeaderView.frame = initialFrame;
}
}
Also make sure you set the proper contentMode for your UIImageView. Also I think this implementation will create a bouncing effect but I'm not sure because I can't test it right now but I think this is a good start point for you.
This is how I achieved it, in my case I was using a map view up the top:
Create a View Controller in storyboard.
Add a Table View and set the constraints to 0 from all sides.
Add a Map View (or whatever view) below the Table View so that it will get rendered over the top. It will look like it is overlapping.
Add constraints to the top left and right.
In the view controller viewDidLoad add the following: tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0) where 200 is the height of the View. This will push the contents of the table view downwards.
In the view controller add the following code, which resizes the view based on the scrolling:
func scrollViewDidScroll(scrollView: UIScrollView) {
var scrollOffset = scrollView.contentOffset.y
var headerFrame = mapView.frame
if (scrollOffset < 0) {
// Adjust map
headerFrame = CGRect(x: mapView.frame.origin.x,
y: mapView.frame.origin.y,
width: mapView.frame.size.width,
height: -scrollOffset)
} else {
// Adjust map
headerFrame = CGRect(x: mapView.frame.origin.x,
y: mapView.frame.origin.y,
width: mapView.frame.size.width,
height: 0)
}
mapView.frame = headerFrame
}
If I could set contentInset from the storyboard it would be even more pretty
Please have a look at this https://github.com/matteogobbi/MGSpotyViewController which implements the same effect as per your requirement.
The earlier solutions on this page gave me some trouble when I needed this to work along with section titles and index bar, so I came up with the following alternative myself. Please note; I don't use autolayout in my project and I've only tested this on iOS9+;
In your project's storyboard:
Create a UITableView within a UIViewController (or try it with a UITableViewController).
Drop a UIView at the top (but within) the UITableView, so it becomes a table header above the first cell.
Give this header view a desired height (like 200px for example) and set the background color to "Clear Color". The Clear Color is important, the view needs to be see-through.
Drop a 2nd UIView within the table header UIView and make it the same size as it's parent. This will be the actual header, so feel free to give it any color, setup an image view or other content.
Connect this 2nd UIView to your UIViewController IBOutlet, I named it "headerView" in my case.
Next, go to your UIViewController.m:
- (void)viewDidLoad
{
[super viewDidLoad];
// Remove view from table header and place it in the background instead.
[self.headerView removeFromSuperview];
UIView *backgroundView = [UIView new];
[backgroundView addSubview:self.headerView];
self.tableView.backgroundView = backgroundView;
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
/* Set initialScrollOffset ivar to start offset, because in my case
the scroll offset was affected by the statusbar + navigation bar heights
and the view controller's "extend edges under top bars" option. */
initialScrollOffset = self.tableView.contentOffset.y;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
/* Modify headerView height only if the table content gets pulled
beyond initial offset. */
if (scrollView.contentOffset.y < initialScrollOffset) {
CGRect frame = self.headerView.frame;
frame.size.height = self.tableView.tableHeaderView.frame.size.height + -scrollView.contentOffset.y;
self.headerView.frame = frame;
}
}
I needed this implementation only for a stretching header with background color and labels. It should be easy to add a UIImageView to this header though.
Also, steps 1 to 5 are completely optional of course. You can programmatically create your header view or use a XIB instead. As long as you make sure the table has a Clear Colored header view set with the same height as your desired header because this serves as a spacer to keep your cells and section titles in line.
EDIT:
I found an even cleaner way to accomplish this;
Build up your table header in interface builder as described above: 1 UIView as container with a 2nd UIView embedded within.
Skip the viewDidLoad code above, there is no need to pull the UIView out of it's container and we won't need to set it as a table background.
Change the scrollViewDidScroll: method to this:
UIViewController.m:
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
if (scrollView.contentOffset.y < initialScrollOffset) {
CGRect frame = self.headerView.frame;
frame.size.height = self.tableView.tableHeaderView.frame.size.height - scrollView.contentOffset.y;
frame.origin.y = self.tableView.tableHeaderView.frame.origin.y + scrollView.contentOffset.y;
self.headerView.frame = frame;
}
}
That's it. Only visual difference from the other solution is that the contents will now scroll up along with the rest of the cells instead of being overlapped by them.
I don't know, if this would help you or not ..
Set your scroll delegate to self.
and then implement this:
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
float scrollViewHeight = scrollView.frame.size.height;
float scrollContentSizeHeight = scrollView.contentSize.height;
float scrollOffset = scrollView.contentOffset.y;
if (scrollOffset == 0)
{
// then we are at the top
}
else if (scrollOffset + scrollViewHeight == scrollContentSizeHeight)
{
// then we are at the end
// Do what you need here
}
}
I have a new design for my app and it include a parallax scroll for a image display on top of tableView.
I know how to add a parallax effect with putting a image in to a cell, like this -
when table scrollViewDidScroll get called :
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGPoint currentOffset = scrollView.contentOffset;
if (currentOffset.y > _lastContentOffset.y) {
//Scroll Up
_containerView.clipsToBounds = true;
_bottomSpaceConstraint.constant = -scrollView.contentOffset.y / 2;
_topSpaceConstraint.constant = scrollView.contentOffset.y / 2;
} else {
//Scroll Down
_topSpaceConstraint.constant = scrollView.contentOffset.y;
_containerView.clipsToBounds = false;
}
_lastContentOffset = currentOffset;
}
(the _bottomSpaceConstraint and _topSpaceConstraint are the Image top and Bottom constraint which inside the tableView cell in section 0)
But my problem is I needs to stop the image scrolling up when it reached the size of my navigation bar. (my navigation bar background is transparent) I don't want the image to go all the way top. But it is a cell which is inside my tableView so it is going all the way to top until it disappear when scrolling. I need help for stop this image get scrolled. Maybe my approach is not correct if I want to achieve this effect.
This effect is on android and its called "collapsing toolbar layout".
http://antonioleiva.com/collapsing-toolbar-layout/
Does someone know how to do this "collapsing toolbar layout" effect for iOS.
Thanks a lot for any help!
Try creating a UIView that will contain the image and set the tableHeaderView in the tableView. Then in scrollViewDidScroll: update the height and top constraints of the header view.
I am using a a translucent Navigation Bar and Status Bar and my View Controller wants full screen. Thus, my View Controller's View extends under the Nav and Status bars and takes the full size of the screen.
I also have a Label which I would like to align directly under the Navigation Bar. Because I cannot add constraints directly between the Label and the Navigation Bar, I add my constraint between the Top of the Label and the Top of the it's Parent View. I set the constant of the contstraint to be equal to the height of the Status Bar + the height of the Navigation Bar.
The issue I have is during rotation between Portrait and Landscape, because the height of the Navigation Bar changes and I need my Label to rotate nicely as well, so I need to know the new height of the Navigation Bar in the willRotateToInterfaceOrientation: method.
I use this method to ensure the Label is in the correct location when the View Controller is navigated to from either portrait or landscape. It works fine.
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
// Get Y origin for Label
CGFloat navBarY = self.navigationController.navigationBar.frame.origin.y;
CGFloat navBarHeight = self.navigationController.navigationBar.frame.size.height;
CGFloat labelY = navBarY + navBarHeight;
// Set vertical space constraint for Label
self.labelConstraint.constant = labelY;
}
I use this method to reposition the Label when the orientation is changed, as the Navigation Bar height changes from 44px to 32px. Problem is, I need to get the NEW height that the navigation bar WILL BE after the rotation, BEFORE the rotation actually takes place.
- (void)willRotateToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
[super willRotateToInterfaceOrientation:toInterfaceOrientation duration:duration];
// Get Y origin for Label
CGFloat navBarY = self.navigationController.navigationBar.frame.origin.y;
CGFloat navBarHeight = self.navigationController.navigationBar.frame.size.height;
CGFloat labelY = navBarY + navBarHeight;
// This obviously returns the the current Y origin for label before the rotation
// Which isn't very useful.
NSLog(#"labelY: %f", labelY);
// This code produces the desired effect, but obviously I want to avoid
// hard-coding the values.
if (UIInterfaceOrientationIsLandscape(toInterfaceOrientation)) {
self.labelConstraint.constant = 20 + 32;
} else {
self.labelConstraint.constant = 20 + 44;
}
}
For fun, I tried to set the Y origin for the Label after the rotation in didRotateFromInterfaceOrientation:, but as expected it's not smooth and the label snaps into place after the rotation is complete.
Thanks in advance for your assistance!
The answer is: Size Classes. You can inform yourself about it, it's well documented by Apple. You will have to use this function: func willTransitionToTraitCollection(newCollection: UITraitCollection, withTransitionCoordinator coordinator: UIViewControllerTransitionCoordinator). When setting up your view I would suggest adding two properties in your view controller, both an array of NSLayoutConstraint, one for portrait mode, one for landscape. Since iOS 8, there is the possibility to activate/deactivate multiple constraints at once. In the above mentioned function, do the following:
if newCollection.verticalSizeClass == .Compact { //orientiation is landscape
NSLayoutConstraint.deactivateConstraints(self.portraitConstraints)
NSLayoutConstraint.activateConstraints(self.landscapeConstraints)
} else {
NSLayoutConstraint.deactivateConstraints(self.landscapeConstraints)
NSLayoutConstraint.activateConstraints(self.portraitConstraints)
}
Make sure to deactivate first, otherwise your constraints will conflict.
Sorry for the "swifty" answer, I suppose you'll be able to 'translate' it into ObjC. If you have any question, feel free to ask.
I am building an app with a stream of social content and am trying to get the behavior of how instagram does it's stream in app. So basically a top header that scrolls off the screen but bounces between that and the content. I can make the top header scroll off the screen and I can make the view not bounce but I want to use Pull to refresh and that ends up going above the "faux" nav bar UIView. I know that a normal Navbar will produce this but this one that scrolls off is a different story.
Currently I have a UITableview that has a UIView above the UITableViewCell and everything works great except the bounce happens above the UIView. I figure I need to get the UIView above the UITableView however in the UITableViewController the storyboard won't allow me to place the UIView above the UITableView.
Any ideas???
Thanks
Well I finally got this all to work so I thought I would post the Answer for everyone.
Basically I set a standard Navigation bar and then on scrollViewDidScroll I get the offset of the scrolling and change the frame based on that. This seems to work perfectly, see below for my scrollViewDidScroll method.
- (void)scrollViewDidScroll:(UIScrollView *)sender {
//Initializing the views and the new frame sizes.
UINavigationBar *navbar = self.navigationController.navigationBar;
UIView *tableView = self.view;
CGRect navBarFrame = self.navigationController.navigationBar.frame;
CGRect tableFrame = self.view.frame;
//changing the origin.y based on the current scroll view.
//Adding +20 for the Status Bar since the offset is tied into that.
navBarFrame.origin.y = MIN(0, (sender.contentOffset.y * -1)) +20;
navbar.frame = navBarFrame;
tableFrame.origin.y = MIN(0,MAX(-44,(sender.contentOffset.y * -1)));
tableView.frame = tableFrame;
}
Also you will want to make your TableView 44px taller to compensate for the scrolling otherwise your frame will not be big enough. I just did this in viewWillAppear and made the frame bigger.
Forgive me to the obtuse title, as I'm unsure how to describe this question.
Recently many iOS apps utilise a scrolling UI design pattern which helps to maximise screen real-estate, typically hiding the header when the user scrolls downwards.
For example, Instragram's main view has the Instragram header at the top. Scrolling upwards on this view keeps the header fixed at the top, and the view bounces back normally to the top of the content. But scroll down and the header acts as part of the content, making way for an extra 44 points of vertical space.
Its probably that I haven't done much iOS work in a while, but I can't easily figure out how best to impliment this? Apologies for the terrible description.
If the header stays put no matter what, use a separate view on top of the scroll view.
If you use UITableView, you can use section headers.
EDIT Use this code:
- (void)scrollViewDidScroll:(UIScrollView*) scrollView
{
CGPoint offset = scrollView.contentOffset;
CGRect headerFrame = _headerView.frame;
if(offset.y > 0){
headerFrame.origin.y = offset.y;
}
else{
headerFrame.origin.y = 0.0;
}
[_headerView setFrame:headerFrame];
}
(Assumes _headerView is your header, sitting on top of the scroll view, not inside it. Also, both scroll view and header begin at the top of their parent view, y==0. Also, your view controller must be set up as delegate of the scroll view)
I just wrote this code from memory; haven't tested it but at most it should only need tweaking.
I tried ranReloaded's answer above but it seems that calling setFrame: on a UIScrollView stops the view from bouncing when going beyond its bounds.
Instead I set the scroll view to fit inside another UIView called scrollerWrapper. Applying the calculated origin and height to this view gives me effect I'm after plus retains the bounce behaviour.
- (void)scrollViewDidScroll:(UIScrollView*) scrollView
{
CGPoint offset = scrollView.contentOffset;
CGRect headerFrame = header.frame;
CGRect wrapperFrame = scrollerWrapper.frame;
if(offset.y > 0){
headerFrame.origin.y = -offset.y;
wrapperFrame.origin.y = MAX(0, headerFrame.size.height - offset.y);
}
else{
headerFrame.origin.y = 0.0;
wrapperFrame.origin.y = headerFrame.size.height;
}
wrapperFrame.size.height = self.view.frame.size.height - wrapperFrame.origin.y;
[header setFrame:headerFrame];
[scrollerWrapper setFrame:wrapperFrame];
}