I am making a weather app with left, right gesture controls. Meaning a user could have multiple cities whose weather they want to check by swiping left/right on the screen. See screenshots of a sample app that I would like to mimic behavior of.
I have two questions.
How in the world are they showing the transition between two views in the second screenshot? I tried to replicate the same behavior in Xcode - storyboard. I created two view controllers, one with red background and other with green. I dragged and dropped swipe gesture recognizers on the red one and related the gesture to view controller to the other one using Modal. But only default transitions I see are flip horizontal/vertical, cross dissolve, partial curl. Nothing like what they have going on. So how are they doing that? Changing to Push doesn't do anything.
If I use storyboard then I am limiting the cities user can enter. Meaning if I have two view controllers then view controller 1 will show weather for city 1, view controller 2 will show weather for city 2. Basically swipes are limited to how many controllers I have defined. (one for each city). Is there a way I can make this dynamic? Users can have N-number of cities and N-number of swipes. Similar behavior to weather app that comes built in with every iPhone.
If you are letting the user enter their own cities, you should only create one UIViewControllerthat handles a single city. Then you just need to create a UIScrollView with paging enabled (here's a tutorial) and then hide the page scroll indicator like Solar does. Create several instances of you UIViewController and add their views to your UIScrollView.
Solar fades in the view of the controller that is becoming visible while fading out the one that is being hidden. This is done using the UIScrollViewDelegate methods, that allow you to know when the scroll view is being dragged.
Related
I would like to have a similar navigation structure to the built-in Workout app in watchOS. I have a list of tennis rules formats, analogous to workout types in the Workout app. Tapping one starts a match in a new interface controller. In WatchKit, as far as I know, I can only push an interface controller or present one. Both approaches risk the user canceling the match earlier from the top left chevron or tapping the status bar in a presented modally.
The workout does not have that limitation during a workout session, instead, the user ends the workout from switching pages in its page-based navigation. Does SwiftUI with its fully programmatic way of watchOS app development allow for accomplishing this?
Below is the initial view of the Workout app
Selecting a workout switches to a screen where the top left title isn't tappable, which is what I'd like to accomplish (the initial view is completely hidden and does not show when you swipe between the three pages)
Maybe you need to modify your view with:
.navigationBarBackButtonHidden(true)
Did you try that?
I think you need to take a look at reloadRootPageControllers()
See https://developer.apple.com/documentation/watchkit/wkinterfacecontroller/2868441-reloadrootpagecontrollers
The basic idea appears to be that you are replacing the current interface controllers with the named ones listed in this method.
WKInterfaceController.reloadRootPageControllers(withNames: ["workout","nowPlaying"], contexts: [workoutToRecord], orientation: WKPageOrientation.horizontal, pageIndex: 0)
In my Interval Training app I call this method once a user has selected their workout. and this interface is then replaced with workout interface and now playing page.
You will note that there is no back button for them to accidentally return to the workout select screen.
Hope that helps.
I am trying to create an app that swipes over through multiple view controllers on a UIScrollView - similar to how one would see different windows in the safari app, but instead of tapping a button to move between them, I am swiping the scroll view.
Now, I will be getting notifications when any of the data in a particular view is to be updated with some json. Should I be updating the view that aren't showing (but are on the scroll view), or should I wait until the user scrolls to that view?
I am very concerned about performance here. Hopefully I am being clear in the question.
Thanks!
You should update the views next to the view that you are viewing I would say. And when you switch (scroll) to another view, then update the views next to that view. (Assuming you have received new JSON data)
I'm looking to create a UI similar to that of the Maps application just to try out some odds and ends and brush up on my knowledge of interface builder.
What i'm struggling to discern at the moment is how the Maps application handles the interactions between the toolbar and the navigation controller and which UI elements are needed to mimic the interface. I'm guessing that the Maps app only has one view controller which kind of negates the need for a navigation controller so i'm not sure if i'm using the right application template currently but i'll come back to that one later.
To give you an idea of what I'm looking to copy, if you search for directions between two locations and then hit route, the navigation controller changes from:
[Clear] Directions [Cancel]
to:
[Edit] {car | train | walk} [Start]
That's all fine so far, nothing out of the ordinary from what i'm used to doing. What is confusing me however is the semi transparent view underneath the navigation controller that displays the total distance and time (or other information depending on the search method). What is the UI element? Is it simply a toolbar tacked on to the main view? How would I go about adding this to my app, is it part of the view, or part of the navigation controller?
Also, in a similar vein... Clicking the "Search" segment in the toolbar displays the search field at the top of the app. Is this in the navigation controller, or is the navigation controller hidden whilst the search field is displayed? Again, clicking "Directions" displays the search field but this time with an additional search field and a button to switch the order of the fields. How is this achieved?
I'm not so good with the terminology so excuse me if i've mixed up some terms. I'm just trying to get to grips with the UI elements as i've spent most of my time learning OpenGL so it's all a bit new to me still. If anyone can point out the right UI elements used in the Maps application, that would be greatly appreciated!
Many thanks for reading.
Edit: I've uploaded an image to illustrate the UI elements i'm querying in this question.
I have no inside information, so I'm speculating on how I'd do it.
I'd use a UIToolBar for both the top and bottom bars, not a navigation bar. You can put a tool bar anywhere as they're just a subclass of UIView.
The semi transparent view underneath the navigation controller is likely just a custom view on top of the map view. Again, just a subclass of UIView.
The items in both toolbars would call methods in the view controller that could change the contents of either tool bar or hide or show other views.
For example, the Search button might call a showSearchToolbar: method, while the Directions calls a showDirectionsToolBar: method. Both methods would just change the contents of the top tool bar and hide or show the view beneath the top tool bar.
Check out the UICatalog example code from Apple to see how to dynamically change the contents of the tool bar.
i want to create exact screen like above... should display horizontal scroll options below the product(mobile) image.
and the screen should have swipe feature when swipe to left it shows next product(mobile)
how to design this? which controller to use
can i use tab view for horizontal menu??
please give some examples and ideas.....
It looks like you need a UITabViewController to manage the different sections.
The UITabViewController manages a bunch of view controllers (one for every tab). One of those will be a UIViewController managing a UIScrollView.
Have a look at th e apple documentation for both those controllers and the UIScrollView. Scroll view has a property to activate paging.
I have looked at the PageControl example from Apple and have an architectural requirement difference. In the example the scroll view and page control objects are at the app delegate level. This means the scroll view and page control appears on every view of the application.
However, I have a "settings" view toggled from an info button (for now) that should not have these controls displayed. Therefore, I need to move my scroll view, page control, and view controllers objects down a layer and I'm struggling with how to best do this.
For example, the primary application view consists of metals (periodic elements). From this view I need a scroll view, page control, and info button on every view descending from here. Each metal will have it's own subclass where different images, calculations, etc will be displayed but I believe I need each of these subclassed elements to share the same scroll view, page control, and viewControllers array, right? Do I need a singleton?
What you are describing is kind of like how the native Weather application works. Each time you swipe, the info light is rendered as part of the page you are viewing. However, no matter what info light you tap, when it flips over you still get the same settings. Obviously this is how Apple thinks the UI should work because they did it that way. There is no reason you can't do the same.
In this situation, you don't need to create a singleton, you can use [UIApplication sharedApplication] as your singleton to get to your custom application delegate via the delegate property.
Look at Crème where I do exactly what you describe. The main view is scrollview+pagecontrol. Upon triggering the app into settings mode, the settings panel comes up that does not have a page control.
The solution is simply that you have a simple top-level UIViewController, and you make both the scrollview and pageview children of that viewcontroller. And for settings, you animate the modal settings dialog with a flip animation into the top-level UIViewController.