Tableview UiDesign complexity

Question

Can any one guide me in implementing this UI Design for a UITableView. I have a table view with different colored cells with some labels within each cell.

When the user scrolls the table view the label on the colored cell should go back to the bottom bar which is placed at the bottom of the screen with two lines, but the bottom bar background color should change to be the same as the selected cell color.

i think the attached image will give you clear idea how it should be 

Answer 1

I hope result which I get from my code is the one which you are expecting.

Result looks like as shown below.

If the result is the expected one, please follow the steps noted down:-

STEP 1: Setting up the UIView.

I have used storyboard approach to design this app. Add a UIView at the top and as well at the bottom. Between them add a UITableView.

This will result in the following UIView. Since I am using a storyboard approach I can add a my custom cell directly to a UITableView.

Note: You will need to set the "Identifier" for the cell to be reused in your code. For this please go to attribute Inspector , and set a String to "Identifier" field. lets say identifier is "CellID", which you will be using in the code.

Once the UIView is setup, please make a IBOutlet to the bottomView and mark the delegate,datasource of UITableView to the ViewController.

STEP 2 Coding

I have used NSArray of UIColor objects, one array for selected Background colour and other for normal background colour of the cell.

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    /*
    Loading UIColor into NSArray.
    */

    colors=[NSArray arrayWithObjects:[UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:0.2],
        [UIColor colorWithRed:0.0 green:1.0 blue:0.0 alpha:0.2 ],
            [UIColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:0.2  ],[UIColor colorWithRed:1.0 green:1.0 blue:0.0 alpha:0.2], nil];

    selectionColors=[NSArray arrayWithObjects:[UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0],
            [UIColor colorWithRed:0.0 green:1.0 blue:0.0 alpha:1.0 ],
            [UIColor colorWithRed:0.0 green:0.0 blue:1.0 alpha:1.0  ],[UIColor colorWithRed:1.0 green:1.0 blue:0.0 alpha:1.0], nil];
}

Table Methods

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

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


-(void) tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    /*
     Setting up the background colours for selected and normal state
    */
    cell.backgroundColor=[colors objectAtIndex:(indexPath.section%4)];
    UIView *selectedBackgroudView=[[UIView alloc] init];
    [selectedBackgroudView setBackgroundColor:[selectionColors objectAtIndex:indexPath.section%4]];
    cell.selectedBackgroundView=selectedBackgroudView;
}

-(UITableViewCell*) tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    /*
     This cell Identifier must be the same which you have set in the storyboard file for a UITableViewCell
     */
    static NSString *cellIdentififer=@"CellID";
    UITableViewCell *cell=[tableView dequeueReusableCellWithIdentifier:cellIdentififer];
    return cell;
}


-(CGFloat) tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
    return 10.0;
}


-(UIView*) tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section{
    /*
      To have spacing for each section with height is 10.0
     */
    UIView *footerV=[[UIView alloc] init];
    return footerV;
}

-(void) tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{
    /*
      Setting up the shadow to the bottomView based on the selected cell, selected background colour.
     */
    UITableViewCell *cell=[tableView cellForRowAtIndexPath:indexPath];
    UIColor *color=cell.selectedBackgroundView.backgroundColor;;
    self.bottomView.backgroundColor=color;
    self.bottomView.layer.shadowColor=color.CGColor;
    self.bottomView.layer.shadowOpacity=0.9;
    self.bottomView.layer.shadowPath=[UIBezierPath bezierPathWithRect:CGRectMake(-10.0, -10.0, self.view.frame.size.width+20, 20)].CGPath;
}