This might be trivial for some of you, but I have two screenshots from the Lose It! app in which I'm curious how two different screens were put together.
The first:
That middle graph which shows the statistics chart. Is that a custom image being drawn on top of with Core Graphics / Quartz to achieve the desired numbers? Is the yellow line that's being dynamically allocated all the work of Quartz?
And second:
This one might be a bit easier, but the whole bar which looks like a native UIKit widget, which contains [Budget, Food, Exercise, Net, Under]. There appears to be a drop shadow above it. Are they doing a drop shadow on the UINavigationBar? Is the menu below it just a UIImage that a designer was able to craft to look like the UINavigationBar?
If there's a blog out there which teaches UI tricks such as these, I'd love to read more.
1) Yes, it's likely a view that uses the chart as a background and then uses core graphics to render the line,
2) This could be a single view divided into four sections. Each section has two lines of text drawn with different colors. It's possible that each section may be a view that encapsulates this behavior.
I'm not aware of any blog that teaches these "tricks". It's really a case of understanding what functionality is available and then using it creatively to develop your UI.
For example we know it's possible to;
Draw images at different sizes/positions.
Draw text in different fonts, sizes, colors, alignment
Draw primitives
Really, when you have those you can create pretty much anything.
I think there's an SDK sample that demonstrates using custom views to create a fancy timezone style applications. That might be one worth checking out.
Update: found it, it's here.
Related
well... I have searched for a while on topics of coding given GUI elements by designer in photoshop format. But I have a really hard time getting it together. Just for an example. When I would like to make an app with only a simple LCD-Display with a timer, counting down, how would I start there..... Don't get me wrong, I am aware of doing the code behind the scenes to make the timer count etc.
But what about setting up a nice looking gui with glossy display effect? What is a "correct way" to implement such a gui? Taking a Photoshop file showing a glossy display and setting a UILabel on that? or coding the gloss effect programmatically?
This is just one example... hm... I do not find good ressources for getting a start on such a topic. I would be really gladful if you could give me a helping hand for a start.
In the typical app development cycle, you would have the graphics people delivering graphics to the programming people, in the form of PNG files.
However, it is very well possible to render all kinds of things on the fly on the device. The blue shade on the tab bar icons in any app using UITabBarController is a clear example: the programmer puts in a PNG with just the alpha channel, and the system renders the blue shading.
Using Quartz Core (look for CGContext in the documentation) you can draw lines and text, and apply all kinds of transformations, gradients, clipping paths, etc. Using this you can create your own styled subclasses of UIView and such.
The PNG approach is generally the easier way.
All you ios architects out there, please help me choose architecture/technology for the following iphone/ipad app.
The app itself is a financial app, but we want more of a game look-and-feel of the app, so we probably don't want to use the builtin looks of the cocoa widgets. The elements on the screen will probably be some kind of blob-shaped images.
The app will essentially have five "blob"-shaped areas, spread out evenly across the screen. One of the blobs will be centered and larger than the other ones. Within each blob there will be clickable areas which will pop up "details" and menu-action blobs. These blobs are also graphics objects and must not take over the whole screen. The blobs should animate nicely when popping up. The graphics elements will have a couple of lines of text, which are generated, so the overlaying text itself cannot be part of the static background-image.
The main user interaction will be swiping within the center blob, displaying summaries of the items that are conceptually contained within the blobs underlying data store. Now and then, the user will drag and drop the item to one of the other blobs. While dragging, the item should be traced by a line and when dropping on the other blob, the item should be animated to look like it's being "sucked into" the blob.
Now, what kind of technique would you suggest for this app? Is Cocoa suitable in this scenario? Should I use a game framework like Cocos2D? All kinds of suggestions including example code snippets are most welcome.
I realize that this question might not be as straightforward and to the point as questions generally are on SO, but I hope your answers will come to use by more people than me. Thanks!
EDIT (MY SOLUTION):
I eventually ended up doing everything in UIKit, which was a lot easier than I expected.
Briefly described I used UIButtons with Custom style and an image background, which gave me full control over the visual appearance of the "items". I also found it very useful to manipulate the underlying CALayer of many of my other UIViews. It is often easier than drawing things from scratch using Core Graphics programming.
Another thing that was useful were the UIGestureRecognizer:s. I found them useful for both handling "real" gestures like swiping, longpress etc, but also for handling normal "tap" for UIView classes that aren't subclasses of UIControl. Two examples are UIImage, UILabel and UIView itself. That way I could handle taps for these simple classes. I could for example use a normal UIView, modify it's CALayer to change the look of it completely and still handle taps. Using this technique, I didn't have to subclass any views at all in my app.
The animations were pretty easy too, even though I had to use a non-public method to use "suck" animation, so my app will never pass App Store moderation. It was just a prototype anyway so I don't care.
When this app will be for real, I will probably implement it in HTML5/JavaScript wrapped by Phonegap. The reason for this is mainly reuse of existing mobile web services and also for code reuse across platforms. It will probably also be easier to hook into the existing security solution when using a webapp.
Cocos2d is great if you need to move elements around really fast as it is a layer on top of OpenGLES. I think from what you have said the UIKit will be fine, you get nice animation support, you can do some nice things with UIScrollViews to handle moving elements around etc.
If you need more detailed graphics support and lots of moving elements, particle effects etc then by all means go for Cocos2D but be aware that in Cocos2d the application works more on a scheduled update method, i.e. you get notified every 1/60th of a second to move stuff draw stuff etc, whereas with normal UIKit approach it is more event drive, i.e. I click a button and show a view etc.
I'm pretty new to iphone development, so this is more of a high-level question. The simplest description of what I am looking to do is create a zoomable/panable field on which I can place a bunch of circle objects. The number of these circles is likely to be in the hundreds, and ideally when the user zooms in close enough, more information can be displayed. From stuff I've read, it seems like UIScrollView provides the simplest way of making a zoomable/panable view but I'm not sure it's the best way to handle a view that includes a hundred graphic objects. I'm trying to figure out if I should progress further down that path or look into things like CALayers, Core Graphics, etc. Any guidance or advice would be greatly appreciated. Thanks in advance,
Roman
I suggest you to use UIScrollView, because it will save a lot of time for handling proper zooming/scrolling. So the workflow is next:
1. Zoom you scroll view
2. In delegate's callback scrollViewDidEndZooming:withView:atScale: you can obtain the scale and determine the level of detail that you need.
3. redraw the visible region (using Core Graphics) with appropriate level of detail (number of circles etc.)
So you should use the mix of Core Graphics and UIKit.
Suppose I was writing a game which involved a relatively complex geometric game board. Something like a dartboard.
I would want a view to display the game state. What is the best way to implement that view?
For example, should I draw the board off line in something like photoshop, add it as a resource, and then show it using a UIImageView? Or should I use drawing primitives and essentially draw the board programmatically?
What are the trade-offs?
If I do use an image, what format should I prefer? .png, .tiff, .gif, .jpg?
Thanks,
John
If you decide to go the image route you should use png. Displaying any other format you pay a performance hit (as mentioned in the comment).
To decide between building photoshop vs drawing via code you need to decide how much time you want to put into learning Quartz/CoreGraphics. Apple's docs:
http://developer.apple.com/library/mac/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/Introduction/Introduction.html
If you already know Photoshop then building the graphic there is probably much easier, if you don't then learning Quartz is prob a less steep learning curve than Photoshop...
If it's a simple board, it's easy enough to draw it into the view, which gives you the possibility of easily manipulating it in interesting ways. Drawing in a view is done with a set of postscript like primitives.
For something more fancy, photoshop might be the way to go.
PNGs are preferred.
I have an image with picture of a person and I want to let the user to pick some area of the person and change the color. But how can I best create a multi-mask image?
E.g. should the user be able the change the color for a leg or a hand.
I am using Titanium Appcelerator, and right now I had a solution with buttons placed over the image, which is not a pretty and accepted solution.
The Kitchensink example, has only one area which can be changed.
The only solution I found for working with sections of an image is to divide the image into different views then use a vertical or horizontal view to glue them together. Sounds like you took a similar approach using buttons.
Another option might be to use one of the jQuery image libraries within the webview. This most likely will have a performance penalty though.