UIPageViewController with docking/pinning functionality - ios

I've been using UIPageViewController with transitionStyle UIPageViewControllerTransitionStyleScroll in order to be able to easily move between views in my app.
I'm looking for a bit more functionality that I won't get from the UIPageViewController so I'm looking to make my own solution - perhaps still a subclass of UIPageViewController.
To explain the extra functionality I'll provide a scenario & a diagram:
In A the app is currently showing the first view controller. I then drag from right to left which will of course start to show the second viewcontroller as shown in B. If I stop panning before the point where the UIPageViewController decides whether or not to show the second view controller or go back to the first one I'd like it to instead show the second viewcontroller (taking up one third of the screen) instead of hiding it completely.
If I was to keep panning a bit further beyond the halfway point and then released I'd like the second view controller to take up two thirds of the screen, while the first view controller takes up one third.
That's essentially it. I'd appreciate any advice on how to go about doing this. I'm thinking I'll subclass UIPageViewController and override the delegate methods, but I'd really appreciate any advice on a better solution.
Many thanks

Maybe this could give you a hint or and inspiration. >>
http://www.raywenderlich.com/78568/create-slide-out-navigation-panel-swift

Related

Is it possible to animate a view form one ViewController into the next?

So I am trying to set up a UIPageViewController, and I have several UIViewControllers, but I want to set it up so I can animate(translate) a subview of my first view controller into the second view controller as it is transitioning. I have the UIPageViewController transition set to scroll. So that is what makes me believe this should be possible correct me if I am wrong. My google searches came up empty, but perhaps I am searching for the wrong thing.
Please point me in the right direction here in the form of a tut or how to conceptually think about this. My current thought is that I could have two identical views in different controllers, and as the user swipes the first view travels from left to right and then when I know it is at the edge I could have the other view take over perhaps using the prepareForSegue method.
Have a look at the Hero library (https://github.com/lkzhao/Hero) for custom animations between UIViewControllers.
Since a PageViewController doesn't really allow custom animation have a look at the AppleHomePageExample to see a example.

How to make a UIButton open up a SideView

I am making an app that has multiple view controllers that has a side view that you can go to navigate to each one, etc. I have everything set up and you can navigate to the side view by swiping from left to right to revealViewController, and that works splendid; however, what I would also like as well is to have a button that looks like 3 rectangles (not important to this, as I already designed the button) like on most apps, that you click and it would take you to that side view as if you where swiping like I have it set up right now. Does anyone know how to do this? I know it's pretty easy, but I am not quite sure.
An example of what I am trying to do, is in the Chase Mobile App. Even though this is a function that is in MANY different apps.
This is EXACTLY what I am trying to do in the example/image above
All help is gladly appreciated!!
I need to have that button open up the side menu just like this. Right now I have it were you slide from one side to the other to get this.
Please try this code to toggle the sideview appear and disappear as :
[self.revealViewController revealToggleAnimated:YES];
and
-(void)backButtonPressed {
[self.revealViewController rightRevealToggleAnimated:YES];
[self.navigationController popViewControllerAnimated:YES];
}
This is called a hamburger menu (or sidebar menu) and is typically frowned upon for iOS design. There are a number of reasons for this, but they are still used in many applications. Basically, they hide links and information from the user that should be quickly accessible.
Disney recently recreated the navigation in their Disney World app. Previously they used this method to navigate the app, but they changed it up pretty well. I personally like the change and that they were able to fit a large amount of information and features into their app without a sidebar.
While I don't recommend using this design, it is a great method to learn if only to better understand making custom views. There are many tutorials that will help you set this up online. A good example is at Appcoda.
Basically, you will need a root view controller with two views in it: the menu and the content. You will switch the content view controller with the view that is selected and active in the menu. You can show and hide the menu a number of ways, but one of the easiest is to move the menu left or right to place it in the frame or out of the frame. The tutorial linked above will get you pretty far. I would have gone into more detail, but there are so many resources regarding this that I don't see the point in copy/pasting it here.
What I ended up doing was from each tableView cell, instead of connecting it straight to the view I want it to show when you click that table cell, I had it go to a navigationaController with a segue (reveal view controller push controller) and then from that NavigationController I connected it to the view that I wanted it to display and connected it to that view controller by having a segue (root view controller), and then having the button in each view, and in each of the files .swift for those view controllers I connected the button up as you normally would, and for the code inside of the ViewDidLoad I have "menuBars.target = self.revealViewController()" and "menuBars.action = #selector(SWRevealViewController.revealToggle(_:))"

Adding a subview that stays in place as you navigate through views

I am looking to create a subview that looks like a banner drop down view from the Navigation Bar.
or like this
I feel like I see this effect all the time but have been struggling for a while to recreate this. I have it working on single view applications but I would like it to stay in place as I navigate from view to view. Right now I have the view setup in the storyboard and would like use this because I had issues attempting this programatically.
To create this "drop down banner view" and have it stay in place (until the user dismisses it) as a user navigates from screen to screen I see two solutions, each of which I have stumped myself on.
Create my own master view as the window.rootViewController
I see this as the cleaner solution in the end, but a bit harder to implement. Would it be possible to create a blank UIView as the rootViewController and whenever the app needs to drop down an alertBanner it could tell the rootController to do so? The view hierarchy would be something like
window -> masterViewController -> alertBannerController -> Navigation Controller -> otherViewControllers
but I cannot seem to have this set up the proper way.
Create an instance of my AlertBannerView from a subclass of the UINavigationController
Instead of calling the method to create a dropDownBanner from the rootViewController another option I see is subclassing the navigationController to be able to drop down this subview. This way it could still persist as the user navigates around views.
Once again I am having problems setting this up properly to work with the existing NavigationControllers
Conclusion
I do not know what is the best approach here.
This is different than the Apple Push Notifications drop down screen because I would like to customize it for the apps UI
Any tips on how to properly set up a custom view as the rootViewController would be great (where do I do this? what methods do I need to call?)
The problem to solve here is to have the alert banner view remain in the window until the user dismisses it even if they are navigating from screen to screen.
Thanks!
Depending on which version of iOS you're working with, yeah there are a lot of possibilities and ways of doing this. In fact, there are a lot of people who already have.
Best place for getting some ideas on how to attack this problem, to me, is by looking at an existing solution. CocoaControls is a great place for this.
For instance, here is a relatively recent one: https://www.cocoacontrols.com/controls/mpgnotification
And here is a list of a bunch of them ( they aren't sorted in any particular order unfortunately though ) : https://www.cocoacontrols.com/search?utf8=%E2%9C%93&q=notification

Nested UINavigationController

I'm fairly new to iOS development and I want to make something like the attached screenshot.
I've read the nested UINavigationControllers is not a good idea, if not impossible, so I'm more than willing to accept ideas on how to implement what I want.
On my second screen there are two views I want to switch back and forth between (NOT using gestures and push animated), while maintaining a static header and footer.
The only way I know how to do a push segue is with a UINavigationController, hence why I see the need for nested ones.
How do I implement this? I thought that in my second UIViewController I could programmatically create a UINavigationController and add it to self.view, but I ended up doing this:
self.subNavigationController = [UINavigationController alloc] initWithRootViewController:[someVC alloc] init]];
[self.view addSubview: self.subNavigationController.view]
But that only adds the view of self.subNavigationController to self.view, not self.subNavigationController itself.
Like I said, I could easily be way off base on how I should be handling it, any advice is appreciated.
OK, if I've got this right then what you want is an app where you can navigate between different views (like any other app).
This will use a UINavigationController (lets call this "nav1") and this is the bit that you're OK with.
However, you also want a view that will have a static navigation bar. i.e. as far as nav1 is concerned this is only a single part of the navigation through the app. It also wants to have two potential views in there. (the map and the table view) and it will have a static bar along the bottom too (in IB this is a ToolBar I think). Lets call this the "mapAndTableViewController".
You haven't said exactly how this works but you don't want swipe gestures between them. So I'm guessing you will have a button or something to swap between them?
Something like this...
http://www.youtube.com/watch?v=eg6vWGh67zk&feature=youtube_gdata_player
The way I've done this is to use a single view controller with a scroll view. On the scrollview set scrolling disabled and set paging enabled. This sounds odd but this removes the touch scrolling from the scrollview while still allowing code access.
Now, in the mapAndTableViewController you populate the left and the right hand side of the scroll view.
What you do here is now take the two view controllers... mapViewController and yourTableViewController and instantiate them. Then add the views of these controllers in to the scrollview left and right sides accordingly.
Essentially you will have THREE view controllers. One for the scroll view, one for the map view and one for the table view.
Without any further explanation from you I can't really help beyond this as I don't fully understand what it is you're trying to achieve.
Hope this helps...

Using SwipeGester to swap views(of the same instance) - screenshot inside

Here is a screenshot of a view that I have right on my device.
The design issue that I am having here is that the top part of the screen is always going to be static - as far as its placement. The rest of the screen are a row of buttons added to this view programmatically. The arrows represent the idea that you could swipe in 4 directions(from top, from bottom, from left and from right) which would animate a new view onto the screen. This view is the same instance as the view before it. In fact all these views are the same instance but the buttons will be different.( i dont want to get too specific here.)
My design right now calls for pre-loading the views ahead of time. The data for each button for each view will be in core data. I will not know ahead of time how many views there are. One view might just have a view to the right that you can swipe in from the right and that view might have a top and bottom arrow - that would allow you to swipe from bottom or top that would be another view(same UIView subclass). So basically a tree of views.
I guess I am trying to figure out my options. A NavigationController is not really what i want because i have no need for a navigation bar, although in my mind it makes sense that i would have an array of view controllers here each with its view property pointing to each view that is allocated and then as i swipe i would bring in the appropriate view by using the view controller index.(through some animation code)
Another possible option would be UIScrollView but that seems cumbersome and may not be what i would really want.
One of the easiest setups would be to create a XIB file that would consist the top part of the screen and on the bottom an empty UIView that i would programmatically populate with the buttons(and their unique data). The problem that I am havign with this is, is how would i swap the views this way. I guess i could make the rootViewcontroller the first viewcontroller instance with the first view and then swap them.
I guess I am wanting to see if anyone had any questions or suggestions to come up with the easiest(most modular) approach to swiping in different views. Is using an array of view controllers the way to go?
A couple of thoughts:
This screams custom container view controller to me (if iOS 5 and above). See Creating Custom Container View Controllers in the View Controller Programming Guide for iOS.
You talked about using UISwipeGestureRecognizer. You could always contemplate UIPanGestureRecognizer, too. It's nice to have continuous gestures. Think about reading a book where the page swipe tracks your finger, but you can stop and go back, mid gesture. Sure, start with swipe gestures for now, but if your UX lends itself to it, you can always contemplate continuous gestures in the future.
You said that you're planning on "pre-loading the views ahead of time". Generally, given the limited memory capacity of mobile devices, you'd want to be more conservative than that. Maybe load the current view, and the four ones that you're likely to go to in each of the four directions (so that you can present them instantaneously), but leave it at that. Once you go to one of the four possible destinations, then go ahead and release the ones that are not reachable from the current one and tee up the ones that are.
One Xib is enough for you (for this part of your app anyway).
Don't use a UINavigation Controller. The NavController metaphor is one of a stack of cards. You don't have that data structure.
The general idea is one ViewController for one screenful of stuff. If you feel the need for two viewControllers (one for the top part, one for the bottom part) then you are going to have to look at custom container controllers, to ensure that the contained controllers receive their instance methods correctly (viewDidLoad, viewWillAppear, etc). An example container controller managing a pair of viewControllers is the iPad splitViewController. But I don't think you need to do this.
I suggest placing a scrollView on the lower half of the screen and using that to manage your data views. If the upper part of the screen also needs to change (under other conditions) you could even have two scrollViews, one up top, the other below. They can be paged, and contain views that are the exact size of the respective screen portion. They can share their single containing viewController as a common location for their delegate methods.
I can't really help you with more detail, as I don't have a precise enough idea what you want to achieve. Perhaps you should try and implement it one of these ways and come back here with more questions as your ideas become concrete. Start out with the simplest idea (eg scrollView inside a single viewController), only chuck it out when you find you have to break it!
update
following your comments, I do think a scrollView might work for you. I think that managing a stack of view controllers with a custom container controller (as Rob suggests) could get overcomplicated. You will have to create your own custom container controller, the pre-existing ones such as UINavigationController are not appropriate for your data strucure (from what I can gather anyway).
You won't need to manage tons of UIViews, in fact you only need 5 - one for the onscreen portion of the scrollView, one for the screen immediately left and right, and similarly for the immediate one above and below. You can reuse these views as you swipe, much the way that tableViews reuse their cells. The rest of it will be about manipulating your data so the right content is arranged in the views as they come onscreen.
See my answer to this question for some more ideas on this: UICollectionView horizontal continuous loop

Resources