This is a two part question.
Our iPhone application has a screen which needs to be customizable by users. It is a simple screen with 4-5 customizable slots. Users will be able to pick from list of wiglets/controls they would like to see in the view. They should be able to re-order the widgets and add/remove as they see fit.
Below is a UI mockup showing how a widget screen like this would work. The user would press and hold anywhere on the screen, and it would go into edit mode, similar to how deleting an app works. They then have the opportunity to remove an app from the dashboard and add new ones using a tray at the bottom.
Is this an appropriate way of handing this type of view on iPhone, if not where would be a good starting point? Any links or views/controls to look at would be appreciated.
Certainly, everything described here could be implemented from scratch using UIView as a base, but are there existing views available from Apple that could help me here?
UI Mockup
1 - Existing widget
2 - Empty spot available for widget
3 - Available widgets
I'd make each widget a customized UIView subclass, and just add them to the main view as subviews. As far as specific classes, you could use a customized UITableView (with custom UITableViewCells) for the widget drop area. The widget selection area you could easily implement with a custom UIView and four positioned UIViews. You could also consider AQGridView.
There aren't any standardized view classes that Apple provides for this.
Related
I am new to iPhone development. I am using Titanium for developing but I guess that hardly concerns my question.
What UI elements where used to develop the certain pages of livingsocial? There are hardly 5-6 windows in the whole app.
a) For eg: if you see the main page(daily deals,escapes,purchases,settings) - did they use a window with a black background image & then added tableview to it for the four options? each tableviewrow has different images. Is that how it could be done?
Also if you notice the four options are scrollable but the heading livingsocial stays static & looks different from the native UI. How was that done?
b) If you look at sign in page (in settings) - they have two textfields & a sign in button inside a window. For the last element (Don't have an account?), is that again a tableview inside a scrollableview?
It would be great if someone can give a general outline as to how they developed their app & what UI objects we used.
edit: please find the screen shots :
a)http://dl.dropbox.com/u/9556373/IMG_0616.PNG b)http://dl.dropbox.com/u/9556373/IMG_0620.PNG
a) For eg: if you see the main page(daily deals,escapes,purchases,settings) - did they use a window with a black background image & then added tableview to it for the four options? each tableviewrow has different images. Is that how it could be done?
Also if you notice the four options are scrollable but the heading livingsocial stays static & looks different from the native UI. How was that done?
That app uses a custom made UINavigationController (for the static bar at the top, that can accommodate the title of the view and different buttons depending on the view currently showing, namely a back button for returning to the main view) and UITableView with custom made cells.
b) If you look at sign in page (in settings) - they have two textfields & a sign in button inside a window. For the last element (Don't have an account?), is that again a tableview inside a scrollableview?
No, I think that's a UIButton, that just happens to look like an isolated cell. Also, that view doesn't look like its scrollable.
I'm not familiarized with Titanium, so I can't give you any directions there. But keep in mind that using custom controls usually takes more effort than simply using apple's own default.
In answer to your first question:
I'd use a tableview for that, with custom made cells to create that look. If it is not a main window on your tab you'll have to remove the 'back' button, otherwise it'll be fine.
In answer to your second question
The first 2 are textfields. The rest are all buttons (and the text above facebook button is a label).
If you're using titanium you could take a look at the kitchensink example.
Hope this helps!
Tjellekes
I have noticed that in some apps they use what appears to be the the native display screen for a contact, it shows the contact photo, name, phone numbers and options to text message and add to favourites.
But it also will have some customized fields in it also like missed calls or some other non native contact information,
Here is an example screen shot taken from the Viber application:
I am quite new to iPhone development and I was wondering if this screen is made available to developers so that a contacts information can be presented from within an application with custom fields or if it is not and has to be developed from scratch?
EDIT:
Thanks for the help, with it I have successfully recreated the screen in a static manner, I have one more question and that is how would I make the cell that has the outgoing calls in it react to dymanic data?
So for instance there could be 10 calls there, so how do I adjust the size of the cell on the fly? And also whats the best object to use to allow the calls to be displayed? At the moment I'm using a UITextView to display the static data but I dont think this will work for dynamic data?
I think the developer made this screen there self, it just an UITableView with some custom UITableViewcells.
You can use the UITableView haderView property to insert the the top view with the image.
The just add sections for all the white cells, make use the the tableview style is set to grouped.
The screenshot is probably showing a custom UI that is made to look similar to the standard one.
You can get a similar interface with some limited customization options with the ABPersonViewController class (in the AddressBookUI framework). It basically takes an address book entry (ABPerson, you can also create this from scratch) and allows you to specify which properties (phone numbers, email addresses...) to show.
You can also customize what happens when you tap on a property by implementing the personViewController:shouldPerformDefaultActionForPerson:property:identifier: method in the view controller's delegate.
The above screen can be created by using UITableView. Since u're new to iPhone..I would suggest you to first go through some basics.
For UITableView, Here's the Link..
UITableView Class Reference
Also look for UITableView Cell Formatting in google.
Hope dat helps... :)
happy coding
In my iPad application there are many buttons (around 50), and I want to make a group box which contain buttons arranged by category.
I am looking for something like a C# or .NET GroupBox/Panel.
There is no Group Box / Panel Box in iPhone.
You need to manage by your self.
Use the UITableView to put all the button in on category.
http://developer.apple.com/library/ios/#DOCUMENTATION/UIKit/Reference/UITableView_Class/Reference/Reference.html
It may be worthwhile to look into UIPopoverController views. These are the little popup views that appear when you click stuff. YOu could easily break your menu system into smaller parts with these.
You may draw a group panel by making two views. make a view of frame say 20,20,280,199 and then another one with frame 21,21,278,197. now put the 2nd view on the last one and change the color of last to some dark than later one. enjoy :)
remember that the should be in same hierarchy. that no one should be parent or child of any of these.
Folks,
coming from the Java/Swing world, I am sometimes puzzled by the UI programming on the iPhone. I've spent the last hours with Googling for information but it seems that I asked the wrong questions by thinking too much in Java. Could you please point me to resources to get more familiar with the GUI concepts to be able to achive the following functionality:
Basically, I want to create a vertically scrollable view that represents structured text (for example, a recipe). Each step consists of a title and a textual description. As I want to fold and unfold such steps, the title would be somehow interactive and by clicking it the description would be displayed or hidden.
In Java, I would create a component that renders one such section. The layout manager would compute the components preferred height (with or without description being displayed).
Then, in Java, I would create a panel with a vertical layout manager and sequentially add my components. This panel would be placed in a scroll pane; the scroll pane would ask the panel to layout itself and then show a viewport on it, if for example the height is bigger than the scroll pane's height.
What Java provides me is:
layouting of elements (computing their preferred height and width), thus no need to deal with coordinates and dimensions
dynamic creation of UIs by creating and adding components during runtime
What I understood on the iPhone:
I can dynamically add views as subview to a view, e.g. a scrollview by calling addSubview
I can even remove that stuff using removeFromSubview (as explained here Clear content of UIScrollView)
What I don't understand on the iPhone:
does one view always correspond to a visible screen (I did use tab and navbar navigation so far and there whenever I set a new view, it fills the current visible screen minus the space needed for the two bars)?
or is it possible to define a view that contains a label on top ("north") and a text in center; if so, could such a view automatically determine its height?
can I realize my example in a similar way like in Java or would I need to calculate all dimensions and coordinates of the individual components on my own? (This example seems to touch on that topic: iPhone scrollView add elements dynamically with id)
Alternatively, could I use a WebView and render my stuff as local HTML using JavaScript to show or hide nodes?
Thanks for any hint or link!
There are no layout managers in Cocoa, views are being reposition according to their struts and springs settings. For information on that read the documentation: http://developer.apple.com/library/ios/#documentation/DeveloperTools/Conceptual/IB_UserGuide/Layout/Layout.html
To create a "view that contains a label on top and a text in center" you create a view with subviews - one being a label at the top, second the textview in center. If you configure struts/springs for all of subviews properly, they will autoresize when the container view is resized.
You should also get accustomed to Interface Builder, creating views in code is real pain in the ass.
I'm building a GWT app where I want to be able to detect when a user releases a scroll bar on one of my ScrollPanels.
My use case is that the horizontal scroll bar represents time. Since it's impossible to represent the full range of scrollable time I want to just represent a small window of time with the scroll bar. When the user moves and releases the scroll bar I want to do a smooth recentering where the new center is the release point.
I can work out how to do this by building a custom scroll bar widget, but I wanted to check if I was missing some way to do it using a "native" scroll bar first.
You might be able to do it with a ScrollPanel and implementing your own ScrollHandler. Just use the addScrollHandler() method and you should be able to override whatever functionality you need.
However, I would suggest that you re-think your approach. What you seem to really want is a slider control for time, that kind of looks like a scroll bar. You should check out the Composite class and the Widget Gallery to see if there is some combination of Widgets that would suit what you need more. Failing that, I'd also look at SmartGWT. They have a very extensive library of GUI Widgets available, and you may find something you can use already there.