UISegmentedControl with Badge or Highlighting - iphone

Occasionally I want to highlight one of segments of a UISegmentedControl, i.e. the third title is "News" and I want to draw user's attention to it. Ideally with a red badge with a number as on the UITabBar - any idea how to achieve this? Feel free to share other ideas as well. I thought about adding the badge as an image just on top of it, but maybe there is some better way.

I wouldn't have thought there is a better way to be honest.
The easiest way will be (probably) to subclass uisegmentedcontrol and add a badge label to it. Or something similar. (subclass uiview add a uisegmentedcontrol to it and add a badge label to it).

Related

Updatable, custom view on a UIToolbar

I want to make a small area to present some information in the middle of a UIToolbar and was wondering what the best way to do this is.
I need to show some text and a graphic, both of which need to be updated (around every 3 seconds) as new information arrives. The graphic is similar to the iPhone signal strength indicator, so it can be either custom drawn or selected from one of 3 graphics (low, medium, high strength).
I'll probably use initWithCustomView: to create a UIBarButtonItem, although I would like the view to be clickable (to allow the user to change the information shown).
What's the best way to make that view? Can I use a NIB, or do I need to do custom drawing in the view? What's the best way to update the buttons? I'm assuming that I'll have to remake the toolbarItems array each time and set it when the information changes. Is there a cleaner way to do this? Thanks.
Using initWithCustomView: sounds like a good way to go. You can create your custom view any way you want: with a NIB, by drawing it, even using images. It can also have its own subviews. It can be any object that inherits from UIView. (So, if you wanted, you could even make it actionable by using a UIButton, a custom UIControl, or a custom UIView with a gesture recognizer attached.)
You shouldn't have to remake toolbarItems (or, for that matter, do anything with it after you've added all your button items) if you just keep a pointer to your custom view UIBarButtonItem. It could be an instance variable. Then, to update the custom view, you could access it as you would any other view. I've never actually tried this, but I can't see any problem with doing it.
You sound like you had it mostly figured out. Hope this is helpful.
I needed the same solution and was hoping for some code examples from you. So I ended up doing it all in IB and the steps are here as follows:
Create UItoolbar in IB with no Items. (A Bar Button Item will be added again once you add the UIView)
Add UIView as subview of UIToolbar
Add UILabels to subview of UIView that is already a subview of the UIToolbar.
Create IBOutlets from UIToolbar, UIView and each UILabel and then you can reference the labels in your app.
I did set the backgrounds to clearColor so the text appears on top of UIToolbar without any box or borders.
And the text updates dynamically which was the desired outcome.
Hope this helps someone as this has been eluding me for a while.

iPhone application - pop up dialogue - sort of

I have an iPhone application which is, in essence, a list. There is a UINavigationBar at the top, and then there is a UITableView which holds the list. I'd like to have an option in some way or another of allowing the user to sort the list in different ways. So, in my mind, I picture having a NavigationItem on the UINavigationBar that, when touched, a little pop up dialogue comes up. You select the "sort" you want, a check mark appears next to it, and the dialogue goes away.
I'm not really sure how to do this. I tried creating a UIView, adding a UIViewController onto it (which held this list of different "sort" parameters (ex. sort alphabetically, sort by date, etc) in a UITableView. But the UITableView isn't responding to any touches, and I'm not sure why.
Does anyone have an idea for using Apples wonderful interface for having an option like this? I can't use a UISegmentedControl below the UINavigationBar, because there are 5 possible options, and I can't fit all that in a single UISegmentedControl.
This sounds like a job for the UIPickerView. You could just slide one up from the bottom of the view whenever that button is pressed. I've done this in the past and it works well.
You won't get a checkmark, but if you want a pop-up I suggest using a UIAlertView.
Have you looked into UIActionSheet at all? https://developer.apple.com/documentation/uikit/uiactionsheet
It seems like it might be a good fit for this approach. The action sheet will be a bit tall since you will have 5-6 buttons in it, but it should get the job done and they are really easy to implement.
The way you are approaching it with displaying another view with its own UITableView in it would work also, but it doesn't seem like the best approach to me. Granted, if you are set on going with that approach, provide us with some code so we can try to figure out why the UITableView isn't responding to touches.

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.

UISegmentedControl with badge number

Just like the tabbar, I want to show badge on UISegmentedControl. As I cant see any predefined methods for UISegmentedControl just like available for UITabBar.
I thought about adding the badge as an image just on top of it, but maybe there is some better way.
Here is a little third party library I've used to draw badges on various things. It's pretty nice. For example, changing the color of the badge to match my design was trivial.
Once you bring this class into your project and include it into your view controller, you go:
CustomBadge *customBadge1 = [CustomBadge customBadgeWithString:#"Badge 1"];
...and then add customBadge1 as a subview of whatever thing you're badging.
I had this problem today, so I've put together a UISegmentedControl subclass which allows you to easily set badge numbers on each of the segments.
Using it's as easy as:
[segmentedControl setBadgeNumber:1 forSegmentAtIndex:0];
Screenshot, documentation and source code are at https://github.com/dave-thompson/MESegmentedControl .
There is no badge property or method - unlike the tab bar. If you want to do this you will just have to put a custom image over it. You could subclass the segmented control and create a function that does this for you.

Custom UIToolBar from Images

I need to create a UIToolbar object that uses an image for the background. Most of the buttons are images as well, and rectangular. One button, however, is round and overlaps the toolbar like the Start button on the Windows task bar. See below.
I know that I will need to subclass the UIToolbar to paint the image for the toolbar -- I think. If so, does anyone have example code showing how to do this?
Furthermore, does anyone have any ideas on how to implement the larger round button? I'm thinking of another custom subclass for this, but not sure if there might be an easier way.
I can have the art guys chop the image anyway needed, which I'm sure the round button will need to be chopped some how.
Any ideas or sample code?
alt text http://iphone.sophtware.com/toolbar.png
Maybe you'll find some inspiration at this tutorial : Recreating The Raised Center Tab Bar Button of Instagram, DailyBooth & Path
For the color, you can experiment with the tintColor property.
As for the rest, UIToolbar is not designed for this. You will need a custom component (probably based on UIView).
I think it is possible but hard.
Override the drawRect method of the toolbar to draw the whole image. Then add left and right buttons.
For the round button you can add one invisible button on the bottom middle of the View and another invisible button in the middle of toolbar. Of course, you can try to use the views instead of the buttons and track the user interaction manually.