Tableview Complessità UiDesign

Question

Qualcuno può guidarmi nell'implementare questa UI Design per un UITableView. Ho una vista tabella con celle colorate diverse con alcune etichette all'interno di ogni cella.

Quando l'utente scorre la vista tabella l'etichetta sulla cella colorata dovrebbe tornare alla barra inferiore che si trova nella parte inferiore dello schermo con due linee, ma il colore di sfondo della barra inferiore dovrebbe essere lo stesso di il colore della cella selezionata.

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

Answer 1

Spero che il risultato che ottengo dal mio codice sia quello che ci si aspetta.

Il risultato è come mostrato di seguito.

Se il risultato è quello atteso, si prega di seguire i passaggi annotati: -

FASE 1: Impostazione del UIView.

Ho usato l'approccio storyboard per progettare questa app. Aggiungi un UIView in alto e anche in basso. Tra di loro aggiungere un UITableView.

Ciò determinerà il seguente UIView. Dal momento che sto usando un approccio storyboard, posso aggiungere una mia cella personalizzata direttamente a UITableView.

Nota: è necessario impostare "Identificatore" per la cella da riutilizzare nel codice. Per questo per favore vai ad attribuire Inspector e imposta una stringa al campo "Identifier". diciamo che l'identificatore è "CellID", che userete nel codice.

Una volta che l'UIView è configurato, si prega di creare un IBOutlet in fondoView e contrassegnare il delegato, l'origine dati di UITableView sul ViewController.

FASE 2 codificazione

Ho usato NSArray di oggetti UIColor, un array di colore di sfondo selezionata ed altro per il normale colore della cella sfondo.

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

Metodi Tabella

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