iOS Select Combo Box

To install the component into your project, simply add both LTSelectView.m & LTSelectView.h files into your list of files :

In the view where you need to use LTSelectView, add this line on your header file :

#import "LTSelectView.h"

Finally, you can create a select box using two different methods:

By code, using this kind of declaration :

LTSelectView *select = [[LTSelectView alloc] initWithFrame:CGRectMake(10,10,150,30)];

Using the NIB Editor :

1) add a UIView that will have the size you want for the button like this :

2) Change its class from UIView to LTSelectView :

Starting from now, your view will have the following look :

You'll now just have to attach it as an outlet and control it using the methods and delegates described in the above sections.

Following are described the methods that will allow you to set & personalize the component the way you want :

---

Colors

---

Quick explanation

This component is 100% full code designed. That means there's no image of any kind to create its look. This allow you to be able to personalize any color and styles by using the following methods. For a better understand, here is an explanation of the colorName variables used to design the SelectBox and its button :

Methods

- (void)setSelectBackgroundColor:(UIColor *)color;

Set the background "main color" of the button showing a select style. The gradient is created from this main color, using a color 50% higher for the top of the button and a color 50% lower for the bottom. When the button is touched, a "touched" effect is created by using a gradient with values from 30% higher to 60% lower than this main color.

- (void)setSelectTextColor:(UIColor *)color;

Set the color of the text used to show the first "Select" sentence or the selected value.

- (void)setSelectArrowColor:(UIColor *)color;

Set the color of the arrow located on the right of the button.

- (void)setSelectMenuBorderColor:(UIColor *)color;

Set the "main color" of the border of the value list. In the same way used for the button, a gradient is computed here from this main color using the same percentages as for the button.

- (void)setSelectMenuTableBackgroundColor:(UIColor *)color;

Set the background color of the table showing the value list.

- (void)setSelectMenuTableSelectedBackgroundColor:(UIColor *)color;

Set the background color of the selected cell inside the values table list.

- (void)setSelectMenuTableTextColor:(UIColor *)color;

Set the text color of the values shown inside the table.

- (void)setSelectMenuTableSubtitleTextColor:(UIColor *)color;

Set the text of the optional subtitle inside the table when you use the "complex" element list.

---

Fonts

---

- (void)setSelectTextFont:(UIFont *)font;

Set the font used by the text on the button.

- (void)setSelectMenuTextFont:(UIFont *)font;

Set the font used by the text of the values table list.

- (void)setSelectMenuSubtitleTextFont:(UIFont *)font;

Set the font used by the subtitle of the values table list when you use the "complex" element list.

---

FXs and Other

---

- (void)setShadowed:(BOOL)_shadowed;

If set to YES, then a small shadow is added to the button (available only from iOS 3.2)

- (void)setShowArrow:(BOOL)_showArrow;

If set to YES, then the arrow is shown on the right of the button.

- (void)setBorderRadius:(float)_radius;

Set the border corner radius of the button.

- (void)setSelectText:(NSString *)text;

Change the first text shown on the button. This text is changed by the selected value each time the user select a new value.

- (void)setParent:(NSObject *)_parent;

Set the parent view that will be called by the delegate method when the user choose a new value.

---

Items

---

Quick explanation

The item is an NSArray dynamically analyzed. Each object of the NSArray can be either an NSString or an NSDictionary that fit in certain conditions.

If the object is an NSString, then the cell is set to UITableViewCellStyleDefault otherwise it is set to UITableViewCellStyleSubtitle

If the object is an NSDictionary, it can contain the three following key/values (and at least the "title" one) :

• title : is the main title of the cell, it is an NSString
• subtitle : is the subtitle of the cell, it is an NSString. subtitle is optional
• icon : can be either an NSString or a UIImage. If the icon value is an NSString, then the component will use [UIImage imageNamed...] to load the image as an icon, otherwise if it is an UIImage, it will affect it to the standard UIImageView present on the cell.

So, if you use this code :

[mySelect setElements:[NSArray arrayWithObjects:@"Line 1",@"Line 2",@"Line 3",@"Line 4", nil]];

Then you'll obtain only a list of values.

And if you want to use a complex code like this :

[mySelect setElements:[NSArray arrayWithObjects:
                          [NSDictionary dictionaryWithObjectsAndKeys:@"Line 1",@"title",@"rainbow_cupcake.png",@"icon",nil],
                          [NSDictionary dictionaryWithObjectsAndKeys:@"Line 2",@"title",@"With a subtitle and no icon",@"subtitle",nil],
                          @"Line 3",
                          [NSDictionary dictionaryWithObjectsAndKeys:@"Line 4",@"title",@"Icon by Walaa AlBeiruti",@"subtitle",@"choco_cupcake.png",@"icon",nil],
                          @"Line 5",
                          [NSDictionary dictionaryWithObjectsAndKeys:@"Line 6",@"title",@"Icon by Walaa AlBeiruti",@"subtitle",[UIImage imageNamed:@"pinky_cupcake.png"],@"icon",nil],
                          @"Line 7",
                          @"Line 8",
                          @"Line 9", 
                          nil]];

You will obtain the same kind of list that you can see in the image describing the colors in the colors chapter.

Please take a look at our sample for a better understand.

Methods

- (void)setCurrentSelectedItem:(int)selectedItem;

Set the selected item index into the list of values.

- (int)currentSelectedItem;

Get the selected item index from the values.

- (void)setElements:(NSArray *)_elements;

Set the elements value. This NSArray MUST be an array of NSString or NSDictionary only (see the explanations in the beginning of this chapter).

- (void)clearElements;

Remove all values from the component. Note that when there's no values set on the component, a touch on the button will not show the list view.

- (void)addElement:(id)element;

Add a value to the end of the elements list. It MUST be an NSString or NSDictionary only (see the explanations in the beginning of this chapter).

- (void)selectedItem:(NSInteger)index withValue:(NSString *)value fromSelect:(id)sender;

This is the method to add to your view controller if you want to get informed by the change of the value selected by the user. Don't forget to set your view controller as a delegate of LTSelectView.

index will return the index of the elements that has been selected (0 is the first item, 1 the second, etc).

value is the value of the selected element

sender is the LTSelectView that is currently sending you this notification (this is to allow you to determinate the good one from multi selectView in the same viewController).