How to Create Slide Up From Bottom Menu With Overlay Swift - swift

I'm building an iPhone app in Swift. I would like my users to have a menu slide up from the bottom when they tap a button on the table view. Instagram has a very good example of what I am trying to do:
You see how when the user taps the button, the menu slides up from the bottom, and the rest of the table view has a black overlay with a low alpha (it's see through)? This is what I would like to implement, but I have no idea how to do it. Do I add two views to my table view, one for the overlay, and one for the menu, and animate them to appear on the button tap? How would I get the views to "Float" above the table view? Or, do I need to add another View Controller and have it partially transition with some sort of custom segue? I'm fairly new to programming so I'm not sure how to go about this. What do I do?

Do you mean just a UIAlertController? If so, refer to https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIAlertController_class/
Here's a tutorial on using a UIAlertController:
http://nshipster.com/uialertcontroller/

Related

UITableview with UIPageControl?

I am in the making of a restaurant "step by step" ordering app, where I want to list the menu (appetizers, main course etc) in a tableview with the ability to organize the menu contents with a UIPagecontrol. Something similar to the eat24 app way of doing it or how the weather forecast app is constructed.
I already have the tableview set up, now I just need to implement this, which I hope you will help me with or guide me in the right direction, for me to accomplish this :). Would I need to setup a tableview for each of the categories or would it be possible to just update one tableview with the needed information, by swiping to the left or use arrows in a toolbar in the picture? What would the best way to add a toolbar like the one picture (white ring), using the storyboard -> resize tableview and drag the image in or to set it up programmatically?
Option 1 - Updating your tableView
You may update your dataSource so it reflects the state of the "new" tableView. Than you call reloadSections:withRowAnimation: by using UITableViewRowAnimationRight or UITableViewRowAnimationLeft, depending of whats fitting at the moment. This will feel like scrolling to a new tableView. For swiping you could use a UISwipeGestureRecognizer.
Option 2 - Using a scrollView with multiple tableViews
If you want it a little bit easier just setup three tableViews and throw them in a UIScrollView with paging enabled.
PageControl
Of course you need to add and setup a UIPageControl, if you want to show those dots.
Regarding the UI:
You can setup everything in your Storyboard. The background, the arrow buttons, the UIPageControl, you can even add the UISwipeGestureRecognizer within the Storyboard.

How can I animate this custom view transition in my iPhone app?

This is a tricky question to explain, but basically I have an app with a home screen with a bunch of circular icons on it. When the user taps on an icon, it pushes a table view onto the navigation stack. When an icon is tapped on the home screen, I want the tapped icon to stay on top of the table view as it scrolls in, and then drop onto the table view in the cell that represents it. All the other icons, however, should stay below the incoming table view, like normal. Here's a quick diagram I whipped up...
I'm about to begin researching this, I just wanted to quickly post this question in case anyone has some ideas about how I can approach this. Thanks so much for your wisdom!
Oh thats soo easy!!!
I'll try to explain my solution:
You need two sets of icons.
One set lays on Home View, second is exact location, but as a subview on main window (by default - hidden)
Once You select a button, and want to push a list - You un-hide corresponding window subview icon, and with delay - animate / shrink it to tableView corresponding location.
Once animation is finished - hide icon (instant hide will not be noticeable, as this icon will be positioned/scaled to precisely reassemble icon in tableview), and move it to default position/scale (still hidden).
That's it.
This is pretty simple, and can be done without adding second instances of your buttons. You'll use the view hierarchies z-index for this.
When you add the table view as a subview of the main view don't use addSubview, use:
[self.view insertSubview:table belowSubview:button];
Button^ will represent the button that you want to stay on top, and for your other buttons, you just have to make sure that they are lower on the stack. This way, when the table flies in, it can keep going past the button but the button will stay above it.
You can also use:
[self.view insertSubview:table atIndex:5];
On all of these buttons and the table to have total control over each objects z-index.

Element on IOS Programming

Im kinda new to Stack Overflow so bear with me please. I am trying to design an iPhone app and I noticed a feature on Huffington Post app that I have been trying to replicate with a different style. I am confused on whether they are loading this as a html inside a webview, or if they are reproducing this programmatically on XCode.
I have looked at UI Picker and UI PopOverController and neither can replicate into that. Can someone give me some advise on what element I have to use in XCode?
Here are some attached screenshots
Based on what your screen shot looks like, here is my guess of what they did:
On the view which they bring up the "popover", they have a UITableView with custom UITableViewCell. At the right end of the UITableViewCell(the image with plus sign) is a button, and based on the position of the button, they can decide the position of the popover and direction of the arrow.
They used a custom popover control. Inside the popover, there is a UITableView take all the space.
If you wanna do the same thing, you will have to know
How to use custom UITableViewCell.
How to do popover on iPhone.
Delegation if you wanna the view underneath to react to what you click inside your popover.
I can provide more details if you need.

Can my custom tabbar be created like so for iPhone?

I have designed a custom tabbar and the developer says the design I created can't be done.
The screen is made up of a usual background with a tabbar. I'd like my tabbar to look a little different to the usual iPhone style. I would like at the bottom of the tabbar a grass illustration (transparent) and on top would sit all the separate buttons and on top of those would be the icons. All of these images (as seen in link below) are separate .png files.
When the user scrolls the content, it will scroll under the transparent grass. The buttons of course will be clickable and have a different view for an active state.
Please see the link below to see a mock-up of the image:
http://www.stuartkidd.com/dummy.jpg
I'd appreciate if the community could explain to me if this could be done and if so, how. I thought it would have something to do with 'creating a custom tabbar'.
And a further question, if it can be done, can also the tab buttons be horizontally
scrollable with a swipe action?
Thanks,
It all can be done but you are going against the Iphone UI guidelines. You won't be able to leverage the UITabbarView to do what you want so you'll basically have to write the whole thing from scratch. Your tab bar would be a scroll view with a row of buttons representing each tab. When a button is clicked you load in the appropriate view. The UITabBar controller gives you a lot of functionality for free and I suspect once you start working towards this you'll see exactly how much extra work this will end up costing you. Going against the way Apple does things can be a slippery slope.
Another idea might be to keep a hidden UITabBar to manage the tabs and call it from your custom tab bar. This would free you from a lot of the hassle of swapping views/controllers in and out.
You can create a row of custom buttons and have 2 subviews. One for the bottom navigation bar and one for the content view where you will be swapping your content based on what is pressed.
You can have a state which maintains what was clicked. Based on that you can set the button enabled state for every button in your bottom bar.
button.selected = YES
It will be easy to handle the touch up inside events and properly load appropriate views in and out of the bigger subview as they will be part of the same view controller.
I have implemented a similar functionality and it works well but still in process of submitting it to the app-store.

How can i make Twitter's row menu in iOS app?

Anybody can tell me how to make Twitter's row menu in iOS app like img below?
This menu appear when i touch down move finger to left (Touch in UITableCell of UITableView). Can i make row menu like it? Thanks :)
That is indeed just a UIView with a background image and some controls/views on it.
If you want to get a similar behavior in which you swipe over the cell to reveal that view, you could use the new iOS4 UIGestureRecognizer to look for a swipe over the cell. Once it detects a swipe you can use a view animation to slide the new view in.
Link: UIGestureRecognizer Class Reference
I found an example project make a "Swipe to Reveal Menu like Tweetie". Look at it if you want to build a Menu like Tweetie.
http://thermoglobalnuclearwar.com/opensource/
Looks like a normal view with a specific background image and some buttons laid out horizontally.