customizing UISegmentedControl - swift

Trying to customize a UISegmentedControl to have the following designs:
However, there doesn't seem to be an easy way to customize the UISegmentedControl to look like this. When I set a background image as a gradient the title is removed, and if i set a title the image is removed. Nor am i sure how to use a divider image to make that middle portion. Is there a different way to do this ? (it doesn't have to be a UISegmentedControl if there is an easier way to do this without)

Related

custom UIToolbar without using background image

I want to make uitoolbar to have separation like this one. But i do not want to use it as background image.
any idea how to do it?
This one is only three section, and if it has four section of course the column will become have four section.
Thank you
You can use 3 buttons instead of toolbar and for separation you can adjust the frame of buttons accordingly. Give it a try. This will look like toolbar.

How to design rounded boxes and separators (like the App Settings view)?

I am wondering what is the good way to design interfaces such as the one in the Settings view on an application, for instance :
What I want to do is the nice round rectangle to separate categories and horizontal line separators between categories, I can have a label, text field, slider or any other control in each line...
Do we need to use an image in the background, that seems quite dirty to me, and I cant find any control in IB that seem to do the same kind of layout.
So, how is this done?
Thanks!
Use a UITableView and set it's style to UITableViewStyleGrouped. Remember that the standard UITableViewCell's will just let you show some text and you may need to create custom UITableViewCell's to achieve more (for example, a on-off switch).
If you wan't to customise it you can add a background image. To do this, place a UIImageView behind the UITableView and make sure you set the UITableView background colour to clear:
theTableView.backgroundColor = [UIColor clearColor];
To seperate the categories make use of the "sections".
Basically, you can use grouped table.You can have sections with different/same number of rows.

UITableView editing accessory view divider color

I have a UITableView with the editingAccessoryType set to UITableViewCellAccessoryDisclosureIndicator. The result is this:
alt text http://cl.ly/8e02045ab41ae71f6f64/content
It works, but I have a custom background, and therefore a custom separator color. However, the divider between the rearrange control and the accessory is set to the same standard table view separator color. Is there any way to change this?
You want to change the color of disclosure indicator and the rearrange control, I guess, but there is no documented way to do that.
In my opinion you should use the images for this. Have the images of desired color and paste them in place where you want to add them.
Hope this helps.
Thanks,
Madhup

iPhone: how to reduce UIBarButtonItemWidth?

I've created a UIBarButtonItem and then set self.navigationItem.rightBarButtonItem to the item.
However, setting the width property of the barButtonItem doesn't seem to have any effect on the width of the button (I'm trying to reduce the width of the barButton)
If I use a custom view for the UIBarButtonItem, I'm able to set the width of the view (and that in turn sets the width of the barButton)
However, I want to get the look and feel of the standard UIBarButtonItem.
Does anyone know how to reduce the width of the UIBarButtonItem without using a custom view ?
(alternately, does anyone know how to create a UIView or UIButton that looks like a UIBarButtonItem)
Looks like Apple really don't want it (Human Interface Guidelines). However there is a somewhat static solution if you use your own view for it:
Just use images instead... use grab to copy the images from IB at the widths you want.
Then they'll look exactly like the UIBarButtons
Apple shows you how to map two different images (and in this example functions as well) to the same button depending on the state... check out the "Add Music" sample code: http://developer.apple.com/iphone/library/samplecode/AddMusic/index.html
This is from TechGuru # http://discussions.apple.com/thread.jspa?messageID=9822548

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.