Tableview UiDesign的复杂性

Question

任何人都可以指导我为UITableView实现此UI设计。我有一个带有不同颜色单元格的表视图，每个单元格中都有一些标签。

当用户滚动表格视图时，彩色单元格上的标签应返回底部栏，该栏位于屏幕底部，有两条线，但底栏背景颜色应更改为与选定的细胞颜色。

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

Answer 1

我希望从我的代码中获得的结果是您期望的结果。

结果如下所示。

如果结果是预期结果，请按照下面的步骤进行操作： -

第1步：设置UIView。

我使用故事板方法来设计这个应用程序。在顶部和底部添加UIView。在它们之间添加一个UITableView。

这将导致以下UIView。由于我使用的是故事板方法，因此我可以将自定义单元格直接添加到UITableView。

注意：您需要为代码中重用的单元格设置“标识符”。为此，请转到Inspector属性，并将String设置为“Identifier”字段。假设标识符是“CellID”，您将在代码中使用它。

一旦设置了UIView，请在底部视图中创建一个IBOutlet，并将UITableView的委托，数据源标记为ViewController。

第2步编码

我使用了UIColor对象的NSArray，一个数组用于选定的背景颜色，另一个数组用于单元格的正常背景颜色。

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