mobile conf

32
@dchohfi 1 UITableView

Upload: diego-chohfi

Post on 15-May-2015

183 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Mobile conf

@dchohfi1

UITableView

Page 2: Mobile conf

@dchohfi2

Die!o Chohfi TuriniInstutor na Caelum

Desenvolvedor na MakeYou

@dchohfi

Page 3: Mobile conf

@dchohfi3

BusaoSPEpicLyrics

Page 4: Mobile conf

@dchohfi4

UITableViewUITableViewStylePlain UITableViewStyleGrouped

Page 5: Mobile conf

@dchohfi5

UITableViewUITableViewStylePlain

muito rápido

customizável

UIScrollView

Page 6: Mobile conf

@dchohfi6

section

} rows

section

} rows

}NSIndexPath

}NSIndexPath

Page 7: Mobile conf

@dchohfi7

UITableViewCell

Header (UIView)

Tudo é classe! Lembre-se que é orientado a objetos!

Page 8: Mobile conf

@dchohfi8

NSIndexPath

informação

UITableViewCell

UITableViewCellStyle

initWithStyle:reuseIdentifier:

Page 9: Mobile conf

@dchohfi9

<UITableViewDataSource>

UITableView

@interface DCViewController : UIViewController <UITableViewDataSource>

self.tableView.dataSource = self;

Page 10: Mobile conf

@dchohfi10

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section;

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath;

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView;

Page 11: Mobile conf

@dchohfi11

100 linhas = 100 UITableViewCellUITableViewCell *cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle

reuseIdentifier:@"Cell"];

Page 12: Mobile conf

@dchohfi12

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];

dequeueReusableCellWithIdentifier:

if(!cell){ cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"];}

Page 13: Mobile conf

@dchohfi13

Ok, mas como sair disso:

Page 14: Mobile conf

@dchohfi14

Pra isso:

Page 15: Mobile conf

@dchohfi15

Page 16: Mobile conf

@dchohfi16

Primeiro de tudo: precisamos aprender a customizar uma célula

@interface DCCustomCell : UITableViewCell

@end

Page 17: Mobile conf

@dchohfi17

Podemos até criar um XIB pra ela :Ddesenhamos 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

Page 18: Mobile conf

@dchohfi18

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

Page 19: Mobile conf

@dchohfi19

Page 20: Mobile conf

@dchohfi20

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..

Page 21: Mobile conf

@dchohfi21

open source FTW!

Page 22: Mobile conf

@dchohfi22

SDWebIma!e

Page 23: Mobile conf

@dchohfi23

Muito simples!

[self.avatar setImageWithURL:[NSURL URLWithString:user[@"profile_image_url"]]];

Page 24: Mobile conf

@dchohfi24

Mas, ainda temos problema de performance

cada subview é desenhada separadamente

e a!ora?

temos que desenhar tudo de uma vez! sem xib :(

Page 25: Mobile conf

@dchohfi25

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;

Page 26: Mobile conf

@dchohfi26

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

Page 27: Mobile conf

@dchohfi27

Page 28: Mobile conf

@dchohfi28

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

Page 29: Mobile conf

@dchohfi29

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

Page 30: Mobile conf

@dchohfi30

CUIDADO MANO!

Page 31: Mobile conf

@dchohfi31

10% de desconto nos livros da

Cupom: MOBILECONF no site

10% de desconto nos cursos da Caelum também \o/

Page 32: Mobile conf

@dchohfi32

valeu galera :D