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.
Related
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?
All my views/pages in apps so far have been full screen UIViewControllers that i push and pop from the stack.
I see some apps create a new view/window that appears about the 1/3 the size of the full screen on an iPad, containing tables of items to select or other UI elements. They are commonly used to allow users to filter the current view they were on.
Seeing them in apps, I guess that they are just adding a UIView to there current screen and change its frame depending on where on the screen they want it to appear.
Or am I wrong? Is there another/better way to do this?
I guess you are talking about UIPopovercontroller. There are several tutorials to build the same.check this. Hope that helps you.
It's a little unclear from your question what the view looks like.
If the view is "attached" to a UI element (has a little triangular arrow connecting it to, e.g., a button) and goes away if you tap outside it, then it's a view presented from a UIPopoverController.
If the view overlays everything and dims the content behind it, is likely a model view controller presented with a presentation style of ether page sheet or form sheet.
Both are common and easy to set up. See the class documentation I have linked.
In most cases, these are probably normal modal view controllers whose modalPresentationStyle property is set to either UIModalPresentationPageSheet or UIModalPresentationFormSheet.
Yes you can make your own UIViews and just add them as subviews. Another option for iPads specifically is with the UIPopoverController class.
I am doing a lot of researching lately about how to get a different looking with nice effects UITabBar on my iPhone app, but unfortunately I am only finding things on how to replace background color etc.
Well, I've checked out this app called Momento which is pretty cool and presents a very slick tabBar:
So there are a couple of elements here I would like to ask you guys if you could help me by giving me the right directions on how to get a similar effect :)
Arrow above items: as you can see this app has this animated arrow that runs above the selected item with a very smooth animation.
Selected Stated of the item's image is not that blue-ish default one neither the default state which displays in a different shade of brown and gray version.
nice Items separators with beveled vertical lines.
different background image for the tabBar
different height for the tabBar
At this point after some research I am able to set the height and background image by subclassing UITabBarController but I'm still not sure on how to accomplish the other items specially the first one related to the nice arrow effect.
How do I do this? Please clarify what can or can't be done by subclassing the UITabBarController and specially if can be done in Interface Builder.
There's a project on github called BCTabBarController that aims to mimic the tab bar used in Twitter for iPhone. It's got some of the things you're looking for, and should give a great starting point.
Both of these are good answers, but both libraries have problems: BCTabBarController doesn't know how to create the "blue" highlighted version of a tab bar icon; and iDevRecipies doesn't send events to child viewcontrollers nor resize the navigation bar on rotate.
Be warned: custom nav bars are a lot of trial-and-error debugging (as I have found).
Simply use a UIView with TabBar width and height.Add custom background image and custom buttons on the view.Set the fileowner of the view as AppDelegate.Now you can simply connect the IBActions with the buttons.The Custom view can be placed over the tabbar by addSubView to the TabBar controller's view.You can switch between viewcontrollers by using the setSelectedIndex method of tableviewcontroller in the button action.
Just curious if the tab bar UI element in screenshots is some built in class or customized.
If it is customized, then please give me a hint on what classes I might check to have something like that.
The first screenshot is initial tab bar. When I tap on the last icon the tab bar smoothly(animated) resize itself as on second screenshot. If I press the edit button the icons are shaking(as on iPhone home) and I'm able to arrange them.
first
tab bar http://img686.imageshack.us/img686/3899/photo2aw.jpg
second
more buttons http://img38.imageshack.us/img38/5673/photo3kq.jpg
The tabbar in the top image could just be a standard tabbar with a non-standard color scheme.
The bottom image is a custom element most likely implemented in an UIActionSheet.
Gotta say, this is a butt ugly UI using non-standard (and therefore confusing) elements. I wouldn't suggest trying to emulate it.
Looks like it's custom. You might just want to look at subclassing UIView and putting a bunch of buttons it stored in a NSArray. That way, when you re-arange them, you just have to move the objects to a new position in the array.
You should be able to achieve the shaking by using simple UIView animations.
I want to add some custom buttons and realize the same effect like the iPhone's home screen. What I can think of is to calculate the position of each button and add them to the view. Are there any other ways to do this? e.g. add buttons to the tableview
Check TTLauncherView from Three20,
I realized the same view of the thumbnails in the photo app (which in principle differs only because of the background color and the rounded effect of the buttons) using a custom cell (with 4 UIButtons inside) in a normal tableview.
In my case, this is because I need to scroll up and down, in your specific case there should be a way to "lock" the table from scrolling. By the way, for this reason, it could be simpler to design the custom view in the interface builder, it is very quick to design such a view, and then create a custom controller to provide simple methods to assign icons and actions to the UIButtons dynamically.
You could also look at the Three20 libraries as already suggested, it is already implemented, but you app will easily be rejected by Apple if you do so.