I would like to know how to create a custom iPhone control from scratch, or using an existing library or framework.
I have seen the three20 library, aswell as tapku and touch customs which are nice for specialised iOS controls such as table view etc but I'm talking about making totally custom, interactive controls here.
Lets say I wanted to make a dial control similar to the one from this app: http://store.apple.com/us/product/H2654LL/A.
Where would I start?
Would I subclass UIView and customize it?
Would I use quartz 2d?
Would I use OpenGL ES to draw something like this to the screen?
Can I still use IB to design/layout my custom view?
I'm just a bit confused which way to go here.
Yes - this question has been asked and answered a few times before, but I am yet to find a satisfactory answer which addresses the above points.
What to subclass
Instead of UIView you would probably want to subclass UIControl. This class has functionality for the Target/Action pattern build in which you can use to respond to actions generated by your custom control. Most elements on UIKit like buttons and sliders inherit from UIControl for this specific reason.
Visualizing your subclass
Drawing really depends on what you want to achieve and what parts you want to animate. You can use images, draw using quartz or OpenGL depending on what you need or what you prefer. Just use the technique to achieve the desired effect in the most simplistic way. Multiple images can be used to handle different states (pressed, etc) or be used for a sprite animation. CALayers are nice to easily rotate or move.
No matter what technology you use, you would probably use incoming touch events to control the animation. In case of a dial control you would control the amount of rotation based on y coordinate movement for example.
To illustrate: I for example have used images if my control only needed to change when pressed for example: just swap the images. I also like to use CALayer a lot which gives you easy ways to generate borders, masks, gradients and a corner radius, all easily animated too.
Using in Interface Builder
With Cocoa on the desktop it was possible to build custom IB palettes for custom controls. iOS never had this functionality and I don't thing the IB plugins are available for Xcode 4.
So the only way to handle custom subclasses currently is by using a UIView in IB and setting the 'Custom class' field in the Identity Inspector to the name of your custom class. This way you have a view you can layout and size. In Interface Builder it's just a rectangle, when running your app the XIB will actually deserialize that view to your custom class.
When using a UIControl you get the target/action mechanisms for free. So you can wire up your touch events to any object in IB just like with any other standard UIKit control.
One thing to note: if you have custom - initWith....: selectors, those will not be called. Your class is deserialized from the XIB so you should use - initWithCoder:(NSCoder *)aDecoder; as initialization.
Also there are quite few custom controls on http://www.cocoacontrols.com/platforms/ios/controls. They are open source hence you can download source and play with them.
Related
I'm wondering what the best way is to do a split NSToolbarItem like Xcode does. I've read the documentation, but can't figure out a way to do this. Any ideas?
It's a custom control. Basically it's a custom NSView, drawing a background the same as a button/popup, draws the "selection" on both sides, handles mouse events and displays one of two menus based on which side was clicked. It's not difficult, but it's not a trivial amount of code to whip up and share either. Just look at any examples of making any kind of clickable custom view and you'll be on your way.
https://developer.apple.com/library/archive/documentation/Cocoa/Conceptual/CocoaViewsGuide/SubclassingNSView/SubclassingNSView.html
My app is behaving sluggishly. If i pop up a UIActionSheet, for example, instead of rolling in smoothly, it stutters in over about 5 frames. I know ideally you should have as little amount of views on screen as possible, but that's what I've got anyway.
Any suggestions for speeding it up?
EDIT:
On my view i have:
Custom navigation bar in place of the regular one. It's a UIImageView, using an image file. It has a quartzcore shadow. It contains 3 buttons. 2 of these buttons have 2 UIImages each, for normal and highlighted, generated from code when the view is shown. The other button uses an image file for normal and for highlighted.
An image file for a background lies under that. On top of the background is a UITableView. By default, it doesn't have any cells (the user adds them). We'll ignore the cell, since it's slugging regardless of their being there or not.
The header of the tableview contains some labels, and an editable uitextview. The size of the header changes as more lines are added to the textview. It also has a background image, which is transparent to allow you to see the view's background image behind it. It's loaded from a file, and a texture image on top of that is also loaded from a file.
The footer is simply a background image loaded from a file with the same texture on top.
Andrew, I'm afraid you haven't been quite specific enough to isolate the exact problem. However there are a couple of things I have picked out. Firstly, check your table view is set to be opaque. Also try to design your app so your table cells can be opaque. I'm assuming your design will allow this. You need to really know how to optimise view rendering performance if you want your table and it's cells to appear translucent over other content and it may be you would need to develop your own custom specialised alternative to UITableView if that is something you really need to know (can be done but quite advanced stuff).
Also you mention using Quartz shadow. You should be able to use UIKit for drawing shadows around images, unless you have some specialist requirement. Are you sure you need to use Quartz for what you want to do? Apologies if you already know this, but if you are fairly new to iOS development and have been looking up how to do shadows, you may have found the Quartz API's for doing that and assumed that is the solution, when (depending on what you need) you will probably be better off staying with UIKit. As a general rule of thumb, only use Quartz if you are sure you can't do what you want to do with just the UIKit API's.
Another thing to check. If you are using Quartz, then you are probably getting getting the graphics context for the UIImage view and drawing on the views context in drawRect: depending on how your view hierarchy is configured, and if you have your navigation bar view set to be transparent over the top of the UITableView, then your custom drawRect implementation may be getting called unnecessarily with every animation frame and this would be a big drain on performance.
Given the level of information you have given I'm having to guess a bit and can't give a precise answer. However for a definitive understanding of how to optimise UIView performance I recommend checking out this video (though you will need an Apple Developer account to be able to access it):
https://developer.apple.com/videos/wwdc/2011/
Session 121 – Understanding UIKit Rendering
Hope this helps. Paul.
I'm building an iOS application that will be drawing diagrams for the user to see and manipulate (move, add, remove elements) and I'm having trouble choosing how to implement the actual rendering.
I find the default cocoa-touch controls to be too limited for this purpose yet graphics frameworks such as Quartz/OpenGL ES/Cocos2D seem a bit overkill.
Can anyone suggest an approach to this situation or perhaps a library better suited to my needs?
Thank you.
You can have each drawn object (box, association) be a custom UIView subclass added as a separate subview of your main view. Each subview can catch events from finger touches.
Apple's Touches sample code shows how to receive events on subviews and move them in response to dragging motions.
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 the iPhone platform, so I'm wondering what the best way to switch between OpenGL rendering and a UIView might be?
Any comments much appreciated!
There's no need to switch modes at all. OpenGL ES rendering on the iPhone is done in a CAEAGLLayer Core Animation layer. This can be used as the base layer for a UIView, which means that you can combine all the UIView layout and touch handling with your 3-D rendering. This UIView can be fullscreen or placed anywhere on the display. UIViews also can be made subviews of your 3-D view, therefore they can appear above your rendering.
The OpenGL ES Application Xcode template gives you an OpenGL layer within a UIView instance and is a good place to start. For a more complex example, I can direct you to the source code for Molecules, my 3-D molecular viewer. In that application, I use a lot of the view functionality for touch detection and place an info button in the lower right as a subview. I even replace that view with another to produce a flip animation when going to the application's settings.