Search Posts in my Blog

Thursday 16 June 2011

Customized Drop-Down list in iPhone

Hi,
I have created a drop-down list in iPhone.
Steps to create:
1) Open Xcode, create new project
2) Add new SimpleTableViewController.h , SimpleTableViewController.m and tick on xib file also in project after creating the AppDelegate files.
3) In xib file drag an UIButton and an UITableView.
4) Place the UITableView below the button as if it will appear after clicking on the button

SimpleTableViewController.xib




SimpleTableViewController.h 



#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
@interface SimpleTableViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>{
IBOutlet UITableView *tblSimpleTable;
IBOutlet UIButton *btn;
IBOutlet UIImageView *i;
BOOL flag;
NSArray *arryData;
}
@property(nonatomic,retain)IBOutlet UITableView *tblSimpleTable;
@property(nonatomic,retain)IBOutlet UIButton *btn;
@property(nonatomic,retain)IBOutlet UIImageView *i;

-(IBAction)btnClicked;
@end



5) Make the connections in the .xib file accordingly



SimpleTableViewController.m 



#import "SimpleTableViewController.h"

@implementation SimpleTableViewController
@synthesize btn;
@synthesize tblSimpleTable;
@synthesize i;

-(IBAction)btnClicked{
if (flag==1) {
flag=0;
tblSimpleTable.hidden=NO;
i.hidden=YES;
}
else{
flag=1;
tblSimpleTable.hidden=YES;
i.hidden=NO;
}
}

// The designated initializer. Override to perform setup that is required before the view is loaded.
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
    if (self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]) {
        // Custom initialization

    }
    return self;
}

/*
// Implement loadView to create a view hierarchy programmatically, without using a nib.
- (void)loadView {
}
*/



// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
arryData = [[NSArray alloc] initWithObjects:@"iPhone",@"iPod",@"MacBook",@"MacBook Pro",nil];
//tblSimpleTable.frame =CGRectMake(10, 10, 300, 100);
flag=1;
tblSimpleTable.hidden=YES;
btn.layer.cornerRadius=8;
tblSimpleTable.layer.cornerRadius=8;
//i=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"arrow-down.png"]];
    [super viewDidLoad];
}



/*
// Override to allow orientations other than the default portrait orientation.
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
*/


- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning]; // Releases the view if it doesn't have a superview
    // Release anything that's not essential, such as cached data
}


- (void)dealloc {
    [super dealloc];
}

#pragma mark Table view methods

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
}


// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [arryData count];
}


// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    static NSString *CellIdentifier = @"Cell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];
    }
    
    // Set up the cell...
cell.textLabel.text = [arryData objectAtIndex:indexPath.row];
    return cell;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
}
@end



Now Build n Run n enjoy :)

Output:
Before clicking ->


After clicking ->

Download the source code HERE.


25 comments:

  1. Excellent Rahul this is a real thought for customization........
    And this is for first time in my life I have posted a comment for someone.
    You are really great with your Skills.
    :)

    ReplyDelete
    Replies
    1. Hi Sapna,
      Thanks a ton for this... N i hope this helped many many developers..
      Thank you.. :)

      Delete
  2. Cool, man! Once you select the value, how do you get it to close up the table view and display the selected the value (instead of click)? I'm relatively new at this! Thank you!

    ReplyDelete
    Replies
    1. Hi,

      Please add the below code in method - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath

      //Code

      [btn setTitle:[arryData objectAtIndex:indexPath.row] forState:UIControlStateNormal];
      if (flag==1) {
      flag=0;
      tblSimpleTable.hidden=NO;
      [i setImage:[UIImage imageNamed:@"UpArrow.png"]];
      }
      else{
      flag=1;
      tblSimpleTable.hidden=YES;
      [i setImage:[UIImage imageNamed:@"downArrow.png"]];
      }

      //Code End

      This will give you the result what you are looking for.
      Revert back if this solves your problem or if any other queries

      Delete
    2. Thank you very much, Rahul. In my app, I need to implement many drop down boxes. I added multiple buttons, tableviews, arrays, etc. However, I'm not sure how to handle the tableview method portion. Any suggestions will be greatly appreciated!

      Delete
    3. Hi,
      You can go through the link below
      http://iphone-rahulvarma.blogspot.in/2012/03/uitableview-tutorial.html
      This is a simple UITableView Tutorial. AND
      To manage multiple UITableview's you can set tags to all the tableview in viewDidLoad method and then use in any function by comparing it with tags assigned to it. Or you can direclty compare with tableview obj_name.
      For eg:
      Suppose if you have two tableviews and you want to detect which tableview's cell is clicked.
      So in the tableview delegate function i.e. didSelectRowAtIndexPath ,
      you can compare the tableview with tags.
      if (tableView.tag == 1)
      {
      // table view 1 case
      }
      else
      {
      // table view 2 case
      }

      OR

      Compare with obj_name

      if (tableView == tableView1)
      {
      // table view 1 case
      }
      else
      {
      // table view 2 case
      }

      iHope this helped you. .

      Delete
    4. Rahul, that worked! I compared it with obj_name in the didSelectRowAtIndexPath, cellForRowAtIndexPath, numberOfRowsInSection, and I now have multiple drop down boxes! I have one more question. How do I go about in getting the value selected? I need to collect all the values from the drop downs and store it in a plist file. I've tried getting the button current title, but it is not working. Again, I very much appreciate all the assistance you have provided! THANK YOU!

      Delete
    5. You can use the following code to get title on button in NSString object

      NSString *str = btn_obj.titleLabel.text;

      To store it in a plist you can go through below link
      http://iphone-rahulvarma.blogspot.in/2012/03/read-and-write-data-from-plist-file.html

      iHope this helped you. :)

      Delete
    6. Hi Rahul,

      I'm able to read and write from/to the plist file. Thank you very much! I have one final question. I have 4 views in my app. 3 of the views contain fields that the user will select/enter info. The last view will contain an export function (write to plist). From the last view that contains the export function, I'm having problems accessing View 1's or View 2's data (text field values, drop down values, etc.) What is the correct syntax to do so? I've searched around a bit and have tried various solutions, but to no avail. Any suggestions will be greatly appreciated! Thank you!!!

      Delete
    7. Hi,
      Thats great to know that it all helped u. .
      To take any data from one View to another you can use "initWith" custom methods.
      Suppose you have two views . you have some value of label in View1 then while pushing to another view i.e. View 2, You need to call -(void)initWithLabelValue:(NSString*)val custom method while pushing to View2. The function is declared in View2 which acts as constructor for View2. Google out for custom init method. You ll find more info.
      iHope this helped you.

      Delete
  3. Really Rahul it helps me a lot , i really thank full to u for such a wonderful post.

    ReplyDelete
    Replies
    1. hey Jyotiraditya Thanks a ton .. N i hope this helped many many developers..
      Thank you.. :)

      Delete
  4. Hi Rahul It is looking good but i am unable to run your code please help me.

    ReplyDelete
  5. do u knw how to fetch a array data from an existing array on a different page in a picker view included in a different page

    ReplyDelete
  6. cool man thanks...

    ReplyDelete
  7. Hey Rahul. You posted very useful tutorial. Thanks :-)

    ReplyDelete
  8. This is great.. Now you can yourself customize ur set... Thanks for this but can you help me out of this
    I am Cyclist and I am looking for a Sportier armband for my iPhone 5S. I have tried online but the Armbands I got seems so childish and kiddish. I need something Authentic. One I came across like that is Sporty and Hot on http://www.rizeonlineshop.com but it was too cheap in price and I doubt that quality is compromised in this Arm Band. Is anyone there who has used this product??
    Please give me a proper guidance to use this and also list me some other sites who can provide me Sporty Arm Bands like on Rize Online.

    ReplyDelete
  9. hi thanks for this. but what else can i use instead of autorelease?my Xcode doesn't support auto release.
    the coding is below
    cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier] autorelease];

    ReplyDelete
  10. also the replacement for the code below:
    - (void)dealloc {
    [super dealloc];
    }
    I'm using Xcode6

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. friends i have tried the dropdown my doubt is that i coldn't add n numberof drop down menus and n number of drop down items in each i have posted my coding in stack over flow link is http://stackoverflow.com/questions/32486450/drop-down-menu-in-ios-using-objective-c if any body can answer please reply me i can send my drop down coding project to you.. Kindly contact me through 1990gopinath@gmail.com or even by phone 9500155672 It is a perfect drop down that works perfectly in a table view

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. The run destination iPhone 6 is not valid for Running the scheme 'SimpleTable'. when i run this code it shows this error...how to rectify it and do u have storyboard version of this?

    ReplyDelete
  15. you could have created a generic class with data source and delegate method. So it could be reusable

    ReplyDelete
  16. In dropbox,if we click the button some cells will appear then if we click any of the cell,then cell name will appear on the button,then how can post the button title to the server

    ReplyDelete