Tabellenansicht UiDesign Komplexität

Question

Kann mich jemand bei der Implementierung dieses UI-Design für ein UITableView führen. Ich habe eine Tabellenansicht mit verschiedenen farbigen Zellen mit einigen Beschriftungen in jeder Zelle.

Wenn der Benutzer die Tabellenansicht scrollt, sollte die Beschriftung der farbigen Zelle in die untere Leiste zurückkehren, die am unteren Rand des Bildschirms mit zwei Zeilen platziert wird. Die Hintergrundfarbe der unteren Leiste sollte jedoch dieselbe sein die ausgewählte Zellenfarbe.

Answer 1

Ich hoffe, das Ergebnis, das ich von meinem Code bekomme, ist derjenige, den Sie erwarten.

Ergebnis sieht wie folgt aus.

Wenn das Ergebnis der man erwartet, folgen Sie bitte beachten, die Stufen hinunter: -

Schritt 1: die UIView einrichten.

Ich habe Storyboard-Ansatz verwendet, um diese App zu entwerfen. Fügen Sie oben und unten eine UIView hinzu. Zwischen ihnen fügen Sie eine UITableView hinzu.

Dies führt zu der folgenden UIView. Da ich einen Storyboard-Ansatz verwende, kann ich eine benutzerdefinierte Zelle direkt zu einem UITableView hinzufügen.

Hinweis: Sie müssen den "Identifier" für die Zelle festlegen, die in Ihrem Code wiederverwendet werden soll. Dazu gehen Sie bitte zu Inspector, und setzen Sie eine Zeichenfolge auf "Identifier" -Feld. sagen wir, Bezeichner ist "CellID", die Sie im Code verwenden werden.

Sobald das UIView eingerichtet ist, erstellen Sie ein IBOutlet in der bottomView und markieren Sie die Delegate, Datenquelle von UITableView zum ViewController.

SCHRITT 2 Codierung

Ich habe NSArray von UIColor Objekten verwendet wird, ein Array für ausgewählte Hintergrundfarbe und andere für die normale Hintergrundfarbe der Zelle.

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

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