iPhone: Add UIButton's horizontally with scrollbar provision in a View or TableView?

Question

I am developing an iPhone application where i need to show UIButtons with back images horizontally(each row two buttons with back images) with scrollbar provision in a View. I have a tabbar application created. Please refer the attached sample image. How can i develop such screen? Do i need create tableview with just ONE row, where i can add UIButtons with back images horizontally (or) How can i achieve it easily? Is there a sample program available? Note: When clicking on button, i also need to know which button is clicked. I have actions for all buttons..

Please help!

UPDATED:

I'm able to achieve the buttons with images horizontally (in two button in a row). My problem is, how can i tag it properly, so that i can action it properly.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {



UITableViewCell *cell=[[UITableViewCell alloc]init];
    static NSString *CellIdentifier1 = @"Cell";
    cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier1];
//    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:CellIdentifier1] autorelease];
    //}

tableView.separatorStyle=UITableViewCellSeparatorStyleNone;
        cell.backgroundColor = [UIColor clearColor];

    UIButton *btn1 = [[UIButton alloc] initWithFrame:CGRectMake(11.0, 6.0, 80.0, 65.0)];
    //UIImageView *imageView = [UIImage imageNamed:@"avatar.png"];
    btn1.enabled = YES;
    // btn1.tag = ?????;   // HOW can it tag it properly.
    [btn1 setBackgroundImage:[UIImage imageNamed:@"image1.png"] forState:UIControlStateNormal];
    [btn1 addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
    [cell.contentView addSubview:btn1];


    UIButton *btn2 = [[UIButton alloc] initWithFrame:CGRectMake(180.0, 6.0, 80.0, 65.0)];        
    [btn2 addTarget:self action:@selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside];
    // btn2.tag = ?????;   // HOW can it tag it properly as it is in horizontal position.
    [btn2 setImage:[UIImage imageNamed:@"image2.png"] forState:UIControlStateNormal];        
    [cell.contentView addSubview:btn2];

}

-(IBAction) buttonPressed: (id) sender
{
    UIButton *button = (UIButton *)sender;
    NSLog(@"Btn Tag: %d", [sender tag]);

}

Answer 1

I think what you want to do is open up the nib (.xib) file and add four UIButtons by dragging them onto your view. You can then add background images to them (by first adding the images to your project , File->Add Files To Project and then setting the various states (selected, normal, disabled, highlighted) for your UIButtons. If they are calling different IBActions, then you already know which button was pressed. If not, you can set a tag (like 1 or 2 or 3 or 4) within Interface Builder for each button. Then in your IBAction, check to see if sender.tag == 1, 2, 3 or 4 in order to determine which button was clicked.

Answer 2

You should check out the open source project by Kirby Turner, KTPhotoBrowser. Originally designed for photos, but the thumbnails are buttons which have an image background, and show in a grid formation.

Answer 3

two way to do this you can put a table view and a scroll view but on scroll view you have to maintain the size and the area the scroll view consumed by buttons.But in table view your work will be easy you can just assing a button on cell content and assign the tag indexpath.row to buttons and just hide the table cell's line it will looks alike a scroll view.i hope it will help

Answer 4

You have to do in this way firstly give the table view color or background you want to give and remove the lines of the table view by this and this will give a feel that you are on a view not on a table view

TableView.separatorStyle=UITableViewCellSeparatorStyleNone;

and after that clear the cell by using

cell.backgroundColor = [UIColor clearColor];

and now the main things you need to create the table in this way

 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

NSString *CellIdentifier = [NSString stringWithFormat:@"identifier_%d", indexPath.row];
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
//if (cell == nil)
if (cell == nil)
{
    cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] ;
UIButton *contactUsBtn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        contactUsBtn.frame = CGRectMake(220, 10, 20, 20);
        contactUsBtn.tag = indexPath.row;
        [contactUsBtn setBackgroundImage:[UIImage imageNamed:@"TroubleImg.png"] forState:UIControlStateNormal];
        [contactUsBtn addTarget:self action:@selector(contactUsBtnAction:) forControlEvents:UIControlEventTouchUpInside];
        [cell.contentView addSubview:contactUsBtn];

}
     return cell;
}

and the selector will like this

-(void)contactUsBtnAction:(UIButton*)sender
{
    UIButton *Button = (UIButton *)sender;
    NSLog(@"Selected button tag is %d", Button.tag);


}

and also check the function

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
    NSLog(@"index path %d",indexPath.row);
    [tableView deselectRowAtIndexPath:indexPath animated:YES];

}

i think that will much more help you .

Answer 5

NOW you have to do on this way at least you will know how much will be the button the work will be easy . in my code i assume that i have 100 buttons so firstly don't use the static indentifier in table view cells use the code like this way .

NSString *CellIdentifier = [NSString stringWithFormat:@"identifier_%d", indexPath.row]; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; //if (cell == nil) if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] ;

// now i assume the button are 100 so i assing the indexrow to first button and indexrow+100 tag to another button and code is like this way the button will be global or local depends upon you

and the function called by button on their clicking is as UIButton *Button = (UIButton *)sender; NSLog(@"Selected button tag is %d", Button.tag);

the tag which will print the value in 3 digit is a right hand button and other one is left handed but i assume only are 100 button are there so check out with your logic .

Thanks,