I'm new to iOS development and am trying to build something like the screen below:
If I was doing it in Android, I can easily build the above UI in a few minutes. However, I don't know how to go about it with iOS.
I understand that the whole ViewController can be embedded in a navigation controller, which produces the title bar above. What about the bottom part though? I'm thinking of using something like a grouped UITableView but I'm not sure, since every cell will have very different contents:
A search bar, perhaps a subclassed UISearchBar, which I also don't know how to customize--the Search button at the right is required but isn't in the default UISearchBar. When the user taps on it, the UISearchBar must be translated to the navigation bar, no need to display a UITableView of suggested results. I don't know how to do that, too.
A button that, when tapped, flies in a modal from the bottom (I imagine it to be another ViewController with a grouped UITableView), to allow the user to choose from defined locations. Once selected, the modal closes and the button text is replaced with the selected location. This sounds much easier to do.
A header ("Item categories") and the list of categories, which may change in number. If the parent isn't a grouped UITableView, I think this part can be a UILabel and a non-scrolling UITableView with a height that changes depending on how many cells it has. If there are plenty table cells that don't fit given the screen's height, everything below the navigation bar can be scrolled vertically. That, I also don't know how to do.
If anyone can just guide me to what native iOS components I can use to build the above screen, and maybe a couple of tutorials to the things I just said I don't know how to do, I'd appreciate it.
You said it right .All the basic info you need is with you.
To build a searchbar like that i dont think you have to subclass it.
Bottom comprises of tableview.
Actually these Questions are seperately available in SO itself.So search seperately for your needs and you can achieve whatever you want
One basic principle : You cant achive anything by just thinking.Trying and get to it and if you have any issues look forward at it.All the issues will have an answer on the way.
Lots of components you need there.. Search Bar, UIPickerView and UITableView. I would like to give you some pointers.
1) You can refer http://www.appcoda.com/how-to-add-search-bar-uitableview/ for Search bar
2) When clicking on the Button, you can bring up a UIPickerView instead of another controller. For that you can refer http://www.techotopia.com/index.php/An_iOS_5_iPhone_UIPickerView_Example
3) You can use a normal Tableview with a single section, configure the section header to display Item categories.
You are asking too much to ask how to do every component of your UI. I will just answer a little.
Yes, a grouped table view is a good design. I am using a grouped table view for varying types of input. I have an actual table, with rows that can be added, and deleted, and contain an editable text area. Then I have three groups that only really show one piece of content each: two are sliders and one is a switch.
For choosing the location, pushing another view controller on your navigation stack would be the more typical way to handle it. You will save some effort that way, with some buttons and behaviors built in, but a modal view controller is not much harder. I'm not sure if you can make a navigation view fly in vertically, but does your app have to be frame-for-frame identical to the android version?
Related
I have a problem where I have to create a view as similar as instagram's profile view. I have managed to get very close by digging into many solutions and I think I have found the best one for the purpose. I just need to get the final touch to resemble Instagram's profile view completely and I can't find the solution.
I leave the complete source code here so you can keep up with me: https://github.com/eduasinco/ProfileView
When you look at the project you will see a headerView on top of all other views, I have set the view of this header to be a PassthroughView which means that every action on that view will be ignored and pass to the next in the responder chain which in this case is one of the scroll views behind.
So far so good, nevertheless there is a small nuance, inside the header view there is a segmentControlView which is in charge of switching the pages, if you touch that segment control it will change pages just fine, the problem comes when you try to scroll the view from the segmentControlView it wont work. I would like to make this scroll behaviour happen as similar as Instagram's profile view.
To sum up, I would like to have a way to make segmentControlView work as it is doing now but also be able to scroll from it in the same way you can scroll when you are touching any other place inside the header view.
I have also tried all kinds of touch overriding but none of them works.
Any help will be appreciated
I am new-ish to iphone development and I am trying to figure out how I can fix a view after it has reached a the top of the screen when a user scrolls a window. Then the view would unlock when the window is scrolled down again to go back to its original position. Ive seen this on on a few apps like instagram (with the user name separators).
Does this design pattern have a specific name?
An example (not iPhone though) can be seen on http://mashable.com/ -- Look at "The New Stuff", "The Next Big Thing", and "What's Hot" bar. See how it locks as you scroll down
My solution for you is
create a UITableView
create a UIView separately which will be used as fixed table header
setup the table's tableHeaderView property to conform the UIView's frame
as UITableView is inherited from UIScrollView you can rely on scrollViewDidScroll method in which I properly adjust my fixed header as Y coordinate changes when scrolling the table.
There can be other similar solution for this too but a strenght of this particular solution is that you can manipulate the fixed header's gui element throughout the scrolling easily.
An example is always better than writing down the details so I created for you (and hopefully for others here at SO) a sample project (of course quick'n dirty), which you can find here at github:
https://github.com/codedad/SO_Fixed_TableHeader_iOS
If I'm correct, you're trying to achieve something like the UITableView in the Contacts app?
It uses the sections of the UITableView for the sorted letters and displays them always on top.
Have a look a this question and create custom section headers.
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.
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.
I have an iPhone application which is, in essence, a list. There is a UINavigationBar at the top, and then there is a UITableView which holds the list. I'd like to have an option in some way or another of allowing the user to sort the list in different ways. So, in my mind, I picture having a NavigationItem on the UINavigationBar that, when touched, a little pop up dialogue comes up. You select the "sort" you want, a check mark appears next to it, and the dialogue goes away.
I'm not really sure how to do this. I tried creating a UIView, adding a UIViewController onto it (which held this list of different "sort" parameters (ex. sort alphabetically, sort by date, etc) in a UITableView. But the UITableView isn't responding to any touches, and I'm not sure why.
Does anyone have an idea for using Apples wonderful interface for having an option like this? I can't use a UISegmentedControl below the UINavigationBar, because there are 5 possible options, and I can't fit all that in a single UISegmentedControl.
This sounds like a job for the UIPickerView. You could just slide one up from the bottom of the view whenever that button is pressed. I've done this in the past and it works well.
You won't get a checkmark, but if you want a pop-up I suggest using a UIAlertView.
Have you looked into UIActionSheet at all? https://developer.apple.com/documentation/uikit/uiactionsheet
It seems like it might be a good fit for this approach. The action sheet will be a bit tall since you will have 5-6 buttons in it, but it should get the job done and they are really easy to implement.
The way you are approaching it with displaying another view with its own UITableView in it would work also, but it doesn't seem like the best approach to me. Granted, if you are set on going with that approach, provide us with some code so we can try to figure out why the UITableView isn't responding to touches.