Criar um Slide de Fotos - Programar para Android no Kodular

Aprenda a fazer um slide de fotos no kodular com botões de avançar e retroceder

 Nessa primeira parte faremos um slide com imagens de paisagens, essas imagens podem estar no armazenamento interno do celular, na internet ou nuvem. Mas para começar vamos adicionar imagens clicando no assets do kodular

Selecione imagens do seu gosto, pelo menos 10 imagens, você pode baixar imagens na internet, como de paisagens, por exemplo, ou quaisquer outras. Uma por uma, carregue todas no assets do kodular(Como na imagem acima).

Feito isso, agora vamos para parte da interface do aplicativo, o designe. Na paleta, ao lado esquerdo, selecione layouts, depois em geral arraste uma organização vertical para o projeto e preencha a tela horizontalmente e verticalmente com ele e põe o alinhamento, tanto horizontal como vertical no centro, depois, ainda em layouts, arraste uma cardview, onde ficará a nossa imagem. Ainda em layouts, arraste uma organização horizontal abaixo do cardview e preencha apenas a largura toda tela. Dentro dela coloque um botão, um espaço e outro botão, nessa sequência. O primeiro botão será o retroceder e o segundo o avançar, para voltar a imagem anterior e avançar para próxima imagem respectivamente.

Nos botões, você seleciona e apaga o texto e deixa vazio, pois usaremos imagens nesses botões e renomeie os botões para botão Retroceder e botão Avançar.

Nas propriedades dos botões, vá em imagem e use esta. Vou deixar ela disponível para download abaixo.

                                    Baixar imagem

Use a mesma imagem para os dois botões, mas no primeiro(Retroceder), você deve ir nas propriedades, clicar em avançado, e me ângulo de rotação mude para 180°. Após isso, selecione o espaço que está entre os botões e nas propriedades, preencha a tela horizontalmente, para afastar os botões um do outro, e por fim, selecione a organização
horizontal onde estão os botões e nas propriedades mude a largura para 80%, para melhorar a aparência. Essa horizontal deve ficar assim:

Agora nas paletas, arraste uma legenda(ou label) e põe acima do cardview( fora dele), nas propriedades, mude o texto para Slide de Fotos, mude o tamanho da fonte para 25, e a cor de fonte para cinza claro.

Agora vamos para a imagem, antes, selecione o cardview e nas propriedades, preencha a tela horizontalmente e na altura põe 60%, depois vá nas paletas e arraste o componente imagem(ou image) para dentro do cardview e nas propriedade preencha a tela horizontal e verticalmente e por fim selecione uma das imagens que vc carregou no assets.

Para ficar igual, selecione Screen1 e nas propriedades mude o a cor de fundo para preto e no cardview também mude a cor de fundo para preto, já na horizontal onde estão os botões, mude a cor de fundo para cinza claro .Seu projeto deve estar assim:

No kodular

No celular

Agora precisamos implementar os eventos de click nos botões retroceder e avançar.

Primeiramente, precisamos criar uma lista com as imagens para usa-las, para isso, vá para os blocos e pegue uma variável global e de o nome de imagens, depois vá em liste e pegue o bloco "Criar lista (ou make list)" e une a variável imagens. Esse make list vem com lugar para dois item, mas vc pode adicionar mais clicando na engrenagem, adicione exatamente o número de imagens que você tem e vai usar no slide, após isso preencha cada item com um campo de texto vazio, depois vc vai em assets e copia o nome das imagens uma por uma e cole no texto vazio da lista, lembre-se que o nome tem que ser exato.

No final a estrutura será semelhante a essa abaixo:

Agora no evento de click precisamos pegar a imagem atual do slide e ver se ela é a primeira imagem da lista ou não, porque se ela for a primeira não poderá retroceder, ao invés disso, passará para última imagem da lista.

Para isso, no botão retroceder pegamos o evento de click e nele adicionamos uma condição se/senão(ou if/else), e depois uma logica de comparação para ver se a imagem atual e igual a imagem do índice 1 da lista, se for vamos mudar a imagem do slide para a última da lista, para saber o último item da lista basta saber o tamanho da list, em lista temos um bloco chamado cumprimento da lista que verifica isso, então ajustamos a imagem do slide para, selecionamos um item da lista com a lista e o índice será o cumprimento desta mesma lista.

Já se não for o primeiro item da lista (Senão ou else), nós vamos ajustar a imagem para o índice anterior da lista, basta pegar o índice atual e diminuir por menos 1.

Veja o bloco completo abaixo:

Agora o botão adiantar é bem semelhante a este, bastando apenas inverter algumas lógicas.

Bem, o avançar fica como desafio para você, tente fazer com que o slide flua para a próxima imagem quando clicar no avançar tão bem como no retroceder.

Caso tenha alguma dúvida, assista este vídeo abaixo: