iPhone Development: Create a grid of buttons using UIScrollView

/ Grid of images, ios, iPad, iPhone, UIImage, UIImageView, UIScrollView / By

Creating a grid of buttons or images in iPhone app is a common requirement now day’s. The problem I am talking about is shown in given below image

To achieve this requirement, we have various approaches
1) Use UITableView
2) Use UICollectionView
3) Create your own grid layout using UIImageView or UIButton(If you want to perform selection)

In this post, I am going to tell you how we can achieve the above requirement using the third technique.
We will use UIScrollView and UIButton’s in building or achieving above requirement and with the help of for loop will iterate through our grid.Below is the code that create a grid of 3 columns as shown in above picture

    
    int xPos = 0;
    int yPos = 0;
    int lineCount = 0;
    for (int i =1;i<13;i++)
    {
        if (lineCount==3)
        {
            lineCount=0;
            xPos=0;
            yPos=yPos+122;
        }
        UIButton *bt = [UIButton buttonWithType:UIButtonTypeCustom];
        [bt setImage:[UIImage imageNamed:[NSString stringWithFormat:@”dia_btncara%d.png”,i]] forState:UIControlStateNormal];
        [bt setImage:[UIImage imageNamed:[NSString stringWithFormat:@”dia_btncara%d_over.png”,i]] forState:UIControlStateHighlighted];
         [bt setImage:[UIImage imageNamed:[NSString stringWithFormat:@”dia_btncara%d_over.png”,i]] forState:UIControlStateSelected];
        bt.frame=CGRectMake(xPos, yPos, 107, 122);
        bt.tag = i;
        [bt addTarget:self action:@selector(emoctionSelected:) forControlEvents:UIControlEventTouchUpInside];
        xPos=xPos+107;
        [scroll addSubview:bt];
        lineCount = lineCount+1;
    }
    
    if ([[UIScreen mainScreen] bounds].size.height>480.0)
    {
        scroll.contentSize=CGSizeMake(320, 560);
    }
    else
    {
        scroll.contentSize=CGSizeMake(320, 660);


    }

Don’t worry, I am going to explain the above code though its self explanatory.First we tool three variables xPos = x positon of our button, yPos = y position of our button  and lineCount = count to check if we need to add new row.
In second step, we initiated our for loop ( because i need 4*3 grid so i set my limit to 13 in for loop), then i check if i already placed button to third column, I need to add new row that’s why i set new x position, y position and line count. Then we create our button programmatically  and gave him respective images for different states.We also assign tag to our button in order to check which button is pressed and give frames to it. Add target to the button and finally add it to our scrollView as a subview.
Lastly we set our scroll contentSize so that it can be scrollable.

Now in the end we will write down our button action and its done.

-(void)emoctionSelected:(id)sender
{
    UIButton *button = (UIButton *)sender;
    if ([button isSelected])
    {
        [button setSelected:NO];
   }
    else
    {
        [button setSelected:YES];
    }
}
In the above method i am changing button image on the tap.