iOS Select Combo Box iOS7 compatible

iOS Select Combo Box iOS7 compatible

An extendable and configurable select combo box for iOS app interfaces that saves you the work of creating and maintaining one yourself.

One thing that I miss often when writing iOS applications is the select box.

There are several ways to get a similar interface: using a UIButton that shows a UIView with a UIPickerView, or having a table calling another table, etc.

Both are a little bit complicated to implement (you need to create two different views & delegates for that, must be a delegate of the table or pickerView to provide them the needed datasource, etc).

This solution provides:

  • A color & round corners customizable button, showing first a custom text (or the selected value when at least one value has been chosen).
  • A color customizable second view with a table inside, allowing the user to select a value.
  • A value list able to show names, or title & subtitle, and include or not an icon.
  • A delegate to get the selected row & value OR
  • A method to know the last selected row (if you don't want to take care of the selection immediately after, but while saving a whole setting page for example)
  • A component able to act even inside a cell of a UITableView
  • A simple setter that accepts an array of NSStrings to be displayed
  • A pretty cool design
  • And as usual, a universal (iPad & iPhone) demo program showing you everything...
Hide

Installation

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

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 :

alt text

2) Change its class from UIView to LTSelectView :

alt text

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

alt text

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

Hide

Methods

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 :

alt text

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).

Hide

Delegates

- (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).

You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

2 licenses, starting from From » $39.99 14 day money-back guarantee View Licenses
or Get a quote

for customization or integration services

  • Great control, simple to use, extremely useful !!!
    T Td
    2 years ago, 0 comments
    Was this helpful?
    Flag 1 of 1 people found this review helpful
  • Very straight forward to use, well documented source code. Easy to customize the look without having to modify the code. Great Job!
    BS Bernard Simmons
    10 months ago, 0 comments
    Was this helpful?
    Flag
  • It's very nicely done.
    RG Ryan Gomes
    2 years ago, 0 comments
    Was this helpful?
    Flag
Post a comment

Or enter your name and Email
  • A Alain License holderDeveloper License 2 months ago
    Hello Laurent, I think there are at lest 2 missing features in your LTSelectView: 1. I think it's quite cool to have access to the list of elements built in the LTSelectView, at least to get the count of items. So I added the following getter: - (id)elements { return elements; } Then, I'm very surprised that setCurrentSelectedItem doesn't update the text accordingly in the button and doesn't call the selectedItem callback. So I modified the method like below: - (void)setCurrentSelectedItem:(int)selectedItem { NSString *value; if ([[elements objectAtIndex:selectedItem] isKindOfClass:[NSString class]]) value = [elements objectAtIndex:selectedItem]; else if ([[elements objectAtIndex:selectedItem] isKindOfClass:[NSDictionary class]]) value = [[elements objectAtIndex:selectedItem] objectForKey:@"title"]; if (parent != nil && [parent respondsToSelector:@selector(selectedItem:withValue:fromSelect:)]) [parent selectedItem:selectedItem withValue:value fromSelect:self]; [self setSelectText:value]; currentSelectedItem = selectedItem; } Regards, Alain
  • A Alain License holderDeveloper License 3 months ago
    Hello, In your quick explanation description, what is the appearance of the button after selecting the line 1 with the image? Alain
    • Laurent Taupin Developer 3 months ago
      Hello Alain, Its background changes to a color you can set using the following method : - (void)setSelectMenuTableSelectedBackgroundColor:(UIColor *)color; Cheers.
    • A Alain License holderDeveloper License 3 months ago
      Hello Laurent, In fact I wanted to know if the button gets only the text from the selected item line or the text and the image. Regards,
  • T Td License holderApplication License 1 year ago
    I would like to have a method that would inform me when a ComboBox is opened.