ios - 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 ，并将字符串设置为“标识符”字段。假设标识符是“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;
}