UITableViewCell action badge - iphone

Does anyone know how to implement an action badge, like the ones seen below with the price tags in them. The App Store has those too.
alt text http://m.macupdate.com/images/screens/uploaded/30815_scr.png

The easiest way is to set the accessoryView of a standard UITableViewCell to a UIView. You can just make them be standard UIButtons, set their background color and the label color and font.
If they're not meant to be interactive, then you can use a container UIView with a UIImageView in the background and a UILabel in the front added as subviews.
If you want to get fancy with it you'll have to subclass UITableViewCell and lay out the various bits yourself. It's not that difficult. The TableViewSuite sample code shows you how.

I am not sure there is anyway within the framework to create this type of button. You could fairly easily simulate it using your own custom images. What you want in this case is a stretchable image that does not distort as you resize the buttons.
Take a look at the following method on the UIImage class:
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight

Related

How can i customize UITableView for two columns that have different background colors?

I customized UITableView for two columns that have different background colors with background images.
I used three images, first image is top cell bg, second is middle cell bg and third is bottom cell bg for round border.
But the text contents in column can be multiline, and table must have round rect border.
See example image.
I tried customize cell for that. But first and round cells does not have rounded border.
See customized cell image. (It does not have rounded border.)
How can i customize UITableViewCell for implement like that image without using multiple background images?
Create Custom UITableViewCell and Make as Your wish and change size and use label for text.
You can simply use custom UITableViewCell
Check this tutorial:
http://www.appcoda.com/customize-table-view-cells-for-uitableview/
Hey please look at below scenario for more information.
check this screenshot.
And code style as like.
Two Imageview and two UIlabels are inside of every cell.
So need to create one custom cell and add in UITableView,
Please take a look on this Custom cell helpful link : Blog Link
Let me know if you need any more information relates to code.
You can create a custom class extending class UITableViewCell. Insert two image views in them using the required frame. Make them a property and then assign them the intended image or background color in method cellForRowAtIndexpath:.
If you require to give only different background colors and not image then no need to use UIImageView. A simple UIView will also do the task

Glossy button (similar to UISegmentedControl) in UITableViewCell

I have a grouped UITableView with a row per section. I would like the same effect as the UISegmentedControl button (glossy/3D-ish/Modern look). What's the best way to do this without tearing down my UITableView methods code?
Thanks
You don't need to tear down the tableView methods code...
Just have to customize your tableViewCells. Here you can seen how it should be done.
You'll need a glossy background Image or draw it yourself in code dynamically (not recommended)
You can customize UIButton and use it in your cells, or you can directly customize cell background view and text label to make it look like a button.
For customizing the background of the cell: Setting background image of custom table view cells
You may also consider using a simple, ready-to-use custom button component. It also provides a custom cell that you can easily use in your tableviews.
Looks like:

how do i fully customize a tableview

i want to customize my tableview, like the tipulator app for the iphone.
And heres my app:
Each UITableViewCell has a few subviews which you can replace with your own. They are:
UITableViewCell.imageView
UITableViewCell.contentView
UITableViewCell.backgroundView
UITableViewCell.accessoryView
As Gendolkari pointed out, Cocoa With Love has a great guide on custom UITableViews.
The theory is that you replace each of those views with an appropriate view to "skin" your UITableViewCells.
When replacing the background view, you check for the first and last cells when skinning the background view, otherwise you can use a "middle" background image. Implement it as a UIImageView. As far as the other views, use what you want.
Additionally, you can use a completely custom NIB file and load that in instead of the default styles provided by UIKit.
While the others are right in suggesting ways to subclass UITableView or its components, this screenshot doesn't look like it's showing a UITableView.
My guess is that they're just drawing custom images onto a background and checking certain areas for taps. What you should do is read up on the drawing methods as well as on intercepting taps and touches.
Here's a really good guide on custom styling for your table:
http://cocoawithlove.com/2009/04/easy-custom-uitableview-drawing.html
Create your own UITableViewCell, and use it, rather than a "generic" one.
You can do this directly in XCode with "File->New File" Then in "Cocoa Touch Class", choose "Objective-C Class" - and under the "Subclass" popup, select "UITableViewCell".
It well generate a XIB, which you can use in IB to customize the look.
Instantiate and pass-in there cells in your UITableView code, instead of the normal UITableViewCells.

Implementing "add photo" button similar to the iPhone contacts app

I was curious if anybody knew the process to create an "add photo" image tile similar to that in the iPhone contacts app. It seems to be on the same level as a UITableViewCell which is shortened (if this is the way it is done).
I've read a suggestion dealing with Headers or custom UITableViewCells but nothing definitive on how it was done. Any illustrative code snippets would be most welcome.
Thank you for any replies.
It's just a UIButton added to a UITableViewCell. You can simply use the addSubview method of the UITableViewCell to add a button to the cell.
It is a header. Most of the functionality is in the 'HeaderFooter' example from the apple developer site. In that example they use a UIImageView for the photo area, but you can implement it with a UIButton instead. If you do this, just set the text to 'Add Photo' when desired, with a blue bold font of about size 12. If you want to leave it as an imageView, you'll have to put a subview with the text on top of it.
The name part can easily be recreated with a UIButton with a PNG image of a detail disclosure icon set as the button Image. It really looks like a small UITabelViewCell.
If you really want you can use a tiny UITableViewCell instead of the PNG for to render the detail disclosure icon, but that's a heavier, more kludgy solution.

iPhone dev: adding an overlapping label to the image

I'm trying to figure out a best way to implement the picture-editing capability shown in the native address book app on iPhone.
On the built-in address book, this is how the picture looks like before editing:
qkpic.com/2f7d4 http://qkpic.com/2f7d4
And after clicking edit, notice how "Edit" overlay is added and the image becomes clickable:
qkpic.com/fb2f4 http://qkpic.com/fb2f4
What would be the best way to implement something like this? Should I make the image a button from the beginning and have tapping disabled at first? If so, what steps are required to add an overlay/label to the image (in above example, gray border + the text "Edit" is added)
The easiest way is to use Interface Builder, create a container view, then add a UIImageView and UILabel as subviews to it. You would position and style the text and the image but set the UILabel to hidden. Make the whole container view respond to touches. It's easy to do since UIView is derived from UIResponder so all you have to do is override touchesEnded. Whenever you want to change the text label, just set the UILabel to hidden=NO.
There's more to it, however. Notice how the image has rounded corners? You'll want to override the UIImageView's drawRect method to implement a custom drawing routine to do that. There's lots of sample code around and it wasn't part of your original question so I'll stop here.