Palestra sobre UITableView na MobileConf 2013

Focando em boas práticas e performance, customizando da melhor maneira possível.

Transcript

1. @dchohfi 1 UITableView
2. @dchohfi 2 Die o Chohfi Turini Instutor na Caelum Desenvolvedor na MakeYou @dchohfi
3. @dchohfi 3 BusaoSP EpicLyrics
4. @dchohfi 4 UITableView UITableViewStylePlain UITableViewStyleGrouped
5. @dchohfi 5 UITableView UITableViewStylePlain muito rápido customizável UIScrollView
6. @dchohfi 6 section } rows section } rows }NSIndexPath }NSIndexPath
7. @dchohfi 7 UITableViewCell Header (UIView) Tudo é classe! Lembre-se que é orientado a objetos!
8. @dchohfi 8 NSIndexPath informação UITableViewCell UITableViewCellStyle initWithStyle:reuseIdentifier:
9. @dchohfi 9 <UITableViewDataSource> UITableView @interface DCViewController : UIViewController <UITableViewDataSource> self.tableView.dataSource = self;
10. @dchohfi 10 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section; - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath; - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;
11. @dchohfi 11 100 linhas = 100 UITableViewCell UITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"];
12. @dchohfi 12 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"]; dequeueReusableCellWithIdentifier: if(!cell){ cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"]; }
13. @dchohfi 13 Ok, mas como sair disso:
14. @dchohfi 14 Pra isso:
15. @dchohfi 15
16. @dchohfi 16 Primeiro de tudo: precisamos aprender a customizar uma célula @interface DCCustomCell : UITableViewCell @end
17. @dchohfi 17 Podemos até criar um XIB pra ela :D desenhamos a tela alteramos a classe ta interface principal para a nossa customizada temos que LEMBRAR do identifier e para acessar os elementos visuais, criamos IBOutlet
18. @dchohfi 18 e a API evoluiu bastante :D - (void)registerNib:(UINib *)nib forCellReuseIdentifier:(NSString *)identifier iOS > 5 e podemos remover um if! \o/ UINib *customNib = [UINib nibWithNibName:@"DCCustomCell" bundle:[NSBundle mainBundle]]; [self.tableView registerNib:customNib forCellReuseIdentifier:@"DCCustomCell"]; - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { DCCustomCell *cell = (DCCustomCell *)[tableView dequeueReusableCellWithIdentifier:@"DCCustomCell"]; ri istramos o novo xib na tabela
19. @dchohfi 19
20. @dchohfi 20 A ora precisamos melhorar a performance. Primeira re ra: NUNCA FAÇA DOWNLOAD SÍNCRONO NSURL *avatarURL = [NSURL URLWithString:user[@"profile_image_url"]]; self.avatar.image = [UIImage imageWithData:[NSData dataWithContentsOfURL:avatarURL]]; a cada download da imagem, tudo trava, inclusive seu usuário..
21. @dchohfi 21 open source FTW!
22. @dchohfi 22 SDWebIma e
23. @dchohfi 23 Muito simples! [self.avatar setImageWithURL:[NSURL URLWithString:user[@"profile_image_url"]]];
24. @dchohfi 24 Mas, ainda temos problema de performance cada subview é desenhada separadamente e a ora? temos que desenhar tudo de uma vez! sem xib :(
25. @dchohfi 25 Podemos desenhar todos os conteúdos estáticos de uma vez só! NSString - (CGSize)drawAtPoint:(CGPoint)point forWidth:(CGFloat)width withFont:(UIFont *)font lineBreakMode:(NSLineBreakMode)lineBreakMode; - (void)drawRect:(CGRect)rect; quando a célula for desenhada UIImage - (void)drawInRect:(CGRect)rect;
26. @dchohfi 26 Porém sempre que o conteúdo da célula mudar, precisamos mandar ela se redesenhar. - (void) setTweetData: (NSDictionary *) tweet { self.twitterData = tweet; NSURL *userAvatarUrl = [NSURL URLWithString:self.twitterData[@"user"][@"profile_image_url"]]; [self.avatar setImageWithURL:userAvatarUrl]; [self setNeedsDisplay]; } setNeedsDisplay
27. @dchohfi 27
28. @dchohfi 28 E quando queremos celulas com alturas variaveis? podemos saber o tamanho de um texto, com uma fonte, de maneira simples: - (CGSize)sizeWithFont:(UIFont *)font constrainedToSize:(CGSize)size; a ora nós temos o controle :D - (CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath NSString
29. @dchohfi 29 Cuidados que precisamos tomar evitar desenhar elementos com coordenadas quebradas evitar desenhar todas as subviews, drawRect: FTW! reutilizar as celulas sempre que possível evitar sombras e bordas arredondas deixar tudo calculado antes
30. @dchohfi 30 CUIDADO MANO!
31. @dchohfi 31 10% de desconto nos livros da Cupom: MOBILECONF no site 10% de desconto nos cursos da Caelum também \o/
32. @dchohfi 32 valeu galera :D