[MÚSICA] [MÚSICA] E aí pessoal, tudo bem? Nessa aula iremos ver como utilizar uma collection view para apresentar informações. Criaremos aplicativo com uma collection view que tenha dados dos instrutores desse programa integrado de Desenvolvimento iOS da Unicamp. Vamos iniciar criando novo projeto com a opção Single View Application. Escolha o nome de projeto e em Devices deixe Universal. Com o projeto criado vamos ao Storyboard. Adicione Collection View no view controller existente. Adicione Constraints. [SEM_ÁUDIO] No inspetor de atributos vamos deixar o layout padrão de flow. Scroll vertical, estilo branco. Agora selecione a collection view cell. Vamos colocar identificador, collection card. Ajuste o tamanho da célula para 300x150. [SEM_ÁUDIO] Adicione uma image view. Ajuste o tamanho para 150x150 para ocupar metade da célula. Adicione também duas labels na parte da direita. Ajustar o primeiro para o tamanho 25, centralizar mudar a cor. Ajustar a segunda para o tamanho 20 mudar para uma fonte fina, mudar a cor, centralizar. Vamos modificar a primeira para Nome e a segunda para Cargo. Agora vamos criar arquivo swift para essa célula. Novo Arquivo, Cocoa Touch Class, subclasse CollectionViewCell, vou chamar de CollectionViewCustomCell. No storyboard selecione a célula abra o inspetor de identidade, selecione o arquivo que criamos. Agora podemos fazer as conexões com código. Primeiro as da célula. Uma oulet para a imagem image card outro para o nome name card. Último para a posição, position card. [SEM_ÁUDIO] Para o view controller basta fazer uma outlet para collection view collection view. Vamos ao código. Adicione UICollectionViewDataSource e UICollectionViewDelegate. No arquivo disponibilizado para esse módulo você encontra imagens de cada dos instrutores: Eduardo, Rodrigo, Danilo, Juan e Márcio. Arraste as imagens para pasta xcassets. Agora vamos criar alguns dados para serem mostrados. Aqui temos 3 vetores de strings: collection names com o nome de cada instrutor, collection images, com o nomes das imagens que acabamos de adicionar collection positions, com o nome das posições de cada instrutor. Adicione esse view controller como data source e delegate do collectio view. Vamos adicionar as funções do collection view. A primeira é para informar o número de sessões do collection view. A segunda para informar o número de elementos que o collection view tem para cada seção. Por último devemos informar o que deve ser apresentado em cada célula do collection view. Para isso usamos o identificador que colocamos pelo storyboard e também dizemos que essa collection view cell é do tipo CollectionViewCustomCell que é aquela classe que criamos e conetamos os outlets. Para cada outlet atribuímos as informações que temos em nossos vetores de dados. Nome da pessoa, imagem da pessoa, cargo da pessoa. Antes de executar vamos adicionar uma função auxiliar. Quando atribuímos false a essa função escondemos aquela barra de status que aparece na parte superior do dispositivo. Agora podemos executar o nosso aplicativo. [SEM_ÁUDIO] Veja que todos os instrutores aparecem com uma imagem, nome e cargo. Para ver mais dados basta clicar e arrastar. [SEM_ÁUDIO] [SEM_ÁUDIO] [SEM_ÁUDIO] Na próxima aula você vai ver como criar uma view com barra de rolagem. Até lá!