Geek asks and answers

UiDesign table complexity

enter image description hereCan someone help me in implementing this UI design for a UITableView. I have a tabular view with different colored cells with some labels in each cell.

When the user scrolls the table view, the label on the color cell should return to the bottom panel, which is located at the bottom of the screen with two lines, but the background color of the lower bar should change in the same way as the selected cell color.

i think the attached image will give you clear idea how it should be
+5
source share
1 answer

I hope the result that I get from my code is the one you expect.

The result is as shown below.

enter image description here

If the result is expected, follow these steps: -

1: UIView.

. UIView , . UITableView.

UIView. , UITableView.

. "" . Inspector String "". , "CellID", .

UIView , IBOutlet bottomView , UITableView ViewController.

enter image description here

2

NSArray UIColor, .

- (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];
}


-(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;
}
+2

More articles:


All Articles