Tutorial iOS: Criando um Header para UITableView com efeito de zoom

On 5 de novembro de 2014 by Rafael Lage

aaaaa1

Neste tutorial iremos criar um efeito de zoom no header de sua UITableView. Este efeito é muito utilizado em aplicativos de notícias   e traz mais fluidez e elegância ao seu app. Antes de mais nada já devemos ter a nossa UITableView criada, se você ainda não tem ou não sabe como criar uma utilize esse tutorial que já fizemos que ensina a criar uma simples UITableView(LINK AQUI). Se já está tudo no jeito siga os seguintes passos:

1 – Primeiramente adicione uma imagem ao projeto, você pode fazer isso arrastando uma imagem para dentro do projeto ou clicando com o botão direito do mouse em cima da pasta raiz de seu projeto e selecionando a opção “Add Files to <NOMEDOPROJETO>”.

2 – No ViewController de sua UITableView procure a classe viewDidLoad e adicione o seguinte código modificando o nome da imagem escolhida:

[sourcecode language=”java”]
– (void)viewDidLoad
{
[super viewDidLoad];

self.tableView.backgroundColor = [UIColor clearColor];

self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@&quot;imagem.jpg&quot;]];
self.imageView.frame = CGRectMake(0, 0, self.view.frame.size.width, HeaderHeight);
self.imageView.contentMode = UIViewContentModeScaleAspectFill;
self.imageView.clipsToBounds = YES;

UIView *tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, HeaderHeight)];
tableHeaderView.backgroundColor = [UIColor purpleColor];
[tableHeaderView addSubview:self.imageView];
self.tableView.tableHeaderView = tableHeaderView;
}
[/sourcecode]

3 – Ainda na mesma ViewController crie a seguinte função que será responsável pelo efeito:

[sourcecode language=”java”]
– (void) scrollViewDidScroll:(UIScrollView *)scrollView {&lt;/pre&gt;
CGFloat yPos = -scrollView.contentOffset.y;

if (yPos &gt; 0) {

CGRect imgRect = self.imageView.frame;

imgRect.origin.y = scrollView.contentOffset.y;

imgRect.size.height = HeaderHeight+yPos;

self.imageView.frame = imgRect;

}

}

[/sourcecode]

4– Por fim crie a seguinte macro que será responsável pelo altura do seu Header,
você pode cria-la logo após os imports de seu ViewController:

[sourcecode language=”java”]
#define HeaderHeight 200.0f
[/sourcecode]

5 – Pronto! Agora rode o seu projeto e teste, uma outra dica para seu aplicativo ficar mais bonito é personalizar as celulas de sua UITableView, como visto nesse tutorial(LINK AQUI). Abaixo um gif mostrando o resultado final:
header_zoom

Comments are closed.