Neste artigo vamos ver como personalizar o componente ListView via código permitindo que efeitos avançados sejam obtidos.
Suporte ao aluno
Anotações
Favoritar
Concluído
5Gostei
Compartilhar
5Gostei
Favoritar
ArtigosDelphiPersonalização do ListView em aplicativos mobile
Por que eu devo ler este artigo:
O ListView é considerado o principal componente do FireMonkey para listagem de dados em aplicações mobile, porém ele não fornece muitas opções para a personalização avançada do componente em design time. Dessa forma, é necessário saber como manipular suas propriedades via código para obter efeitos avançados e que não estão disponíveis por meio da configuração de suas propriedades, como a adição de rótulos em tempo de execução ou a criação de ícones que representam o status de registros, por exemplo. Nesse contexto, é importante entender como criar classes específicas para a manipulação das informações de bases de dados, bem como relacioná-las às propriedades do ListView para obter efeitos interessantes e que melhoram o visual de um aplicativo mobile. Autores: Jones Granatyr, Aldo Marcelo Paim, Fabio Spak, Graziele Katlen e Fábio Alexandre Taffe
Um dos principais componentes do
FireMonkey para a construção de aplicativos móveis é o ListView, que tem a
função de listar registros em tela em formato de grade assim como o DBGrid em
aplicações desktop. Esse componente (o ListView) apresenta uma série de
propriedades que permitem sua personalização, bem como a adição de rótulos,
botões e imagens. Uma propriedade muito utilizada pelos desenvolvedores é a ItemAppearance, que disponibiliza uma
série de valores para o posicionamento dos componentes em tela. Por exemplo, é
possível configurar textos de cabeçalho agrupados, posicionamento de rótulos à
direita e abaixo do texto principal, botões com ações para outros
funcionamentos e pequenas imagens do tipo thumbnail.
Apesar de
existir uma série de configurações bastante diversificadas, essa propriedade é
estática e não permite uma personalização mais detalhada, como a configuração
exata das posições X e Y dos rótulos ou a adição de novos recursos. Neste
contexto, caso seja necessário personalizar ainda mais esse componente, é
preciso entender alguns de seus eventos.
Baseado
nisso, o objetivo do presente artigo é mostrar como construir um aplicativo no
Delphi 10 Seattle utilizando o ListView e a adição dinâmica de novos
componentes dentro de cada linha de dados. Será mostrado como carregar
registros de um arquivo XML por meio de um TClientDataSet
e do recurso de LiveBindings. O exemplo proposto lista informações sobre os
lutadores do UFC em um ListView, e adiciona nele, em tempo de execução, um novo
rótulo e três imagens representando dados armazenados no XML citado. Neste
exemplo em particular, utilizaremos o número de submissions, strikes e takedowns
de cada lutador e, ao invés de mostrar o valor numérico desses campos, os
substituiremos por uma imagem de status que representará essas informações. As
próximas seções mostram o desenvolvimento do aplicativo.
No UFC, a submissão ocorre quando
um lutador coloca seu adversário em uma posição dolorosa em que ele não pode se
mover ou escapar. Desse modo o lutador é obrigado a desistir ou a continuar
resistindo a dor. O strike acontece quando várias partes do corpo são
utilizadas para atacar ou pressionar o oponente, enquanto que takedown é fazer
com que o lutador seja lançado ao chão.
Criando
a interface gráfica e acessando os dados
O primeiro
procedimento para a construção do exemplo que envolve os lutadores do UFC é a
criação de uma nova aplicação multidispositivo no Delphi 10 Seattle (através do
menu File > New > Multi-Device Application)
com o layout em branco (Blank Application).
A Figura 1 apresenta o formulário
principal do aplicativo (frmUFC), no
qual se encontra uma TToolBar (tlbCabecalho)
e, dentro dela, um componente TLabel (lblTitulo)
com as seguintes propriedades relativas à aparência:
Align =
“Contents”
Text =
“Lutadores do UFC”
TextSettings
> Font > Size = “20”
TextSettings
> Font > Style > fsBold = “True”
TextSettings
> HorzAlign = “Center”
No restante do
formulário deve ser adicionado um TListView com a propriedade Align setada como Client para que o componente ocupe toda a área restante do
formulário. Além disso, o ListView deve ter a sua propriedade ItemAppearance > ItemAppearance mudada
para ListItemRighDetail para que seja
possível exibir, além do rótulo, um texto de detalhe.
Figura 1. Interface gráfica do
aplicativo.
A propriedade Align = “Contents”faz
o alinhamento de um componente com base em todo o container em que ele está
inserido. Por exemplo, caso exista um label à esquerda e se deseje adicionar
um título no centro utilizando outro label, esse segundo deve utilizar a
propriedade Contents para ser alinhado
no centro de todo o container. Caso seja definida a propriedade Client, por exemplo, o label será
alinhado somente no espaço vago entre os dois rótulos. Note que nesses casos,
como queremos que o conteúdo do texto fique alinhado no centro horizontal do
label, também é necessário que a propriedade TextSettings > HorzAlign seja configurada como Center.
Os dados que
serão utilizados para preencher o ListView serão prove ...
A DevMedia é uma escola de formação de programadores com mais de 20 anos de mercado. Já formamos mais de 100 mil programadores. A DevMedia ensina programação web, (desenvolvimento de site e aplicativos para celulares). A programação web é a área que mais contrata programadores em todo o mundo, sendo a maior porta de entrada para a área da tecnologia.
Por que a programação se tornou a profissão mais promissora da atualidade?
Nunca o mundo necessitou tanto de programadores como atualmente. Com a quarentena estabelecida pela Covid-19, lojas, restaurantes, escritórios e escolas, que tiveram suas atividades paralisadas, perceberam a urgente necessidade de adaptar seus negócios para o mundo digital.Em contrapartida as empresas de tecnologias, durante esse período, cresceram como nunca tanto em faturamento quanto em número de usuários.Com isso a necessidade de programadores cresceu muito. Empresas de grande e pequeno porte estão com vagas abertas e não conseguem contratar por falta de profissionais qualificados. No momento estima-se que o número de oportunidades no Brasil seja acima de 200 mil!
Como faço para começar a estudar?
Programação é um universo amplo, existem muitos caminhos e por isso é muito fácil se perder. Nosso conselho é: NÃO ESTUDE SOZINHO. Infelizmente 78% das pessoas que começam a estudar sozinhas desistem da profissão por não conseguirem aprender. Com uma boa orientação elas teriam conseguido!Se você tomou a decisão de entrar nesse mercado, faça um investimento no seu futuro e busque aprender com quem sabe. Isso vai triplicar suas chances de dominar a programação e conquistar uma vaga no mercado.
Em quanto tempo de estudo vou me tornar um programador?
O tempo depende, claro, da dedicação de cada estudante. A DevMedia ensina programação há 20 anos e com toda essa experiência montamos uma metodologia que tem como objetivo principal acelerar os seus estudos.Você terá um Plano de Estudo para te orientar em todos os passos do aprendizado. Desenvolverá diversos projetos reais para colocar em prática os conhecimentos e contará com o melhor suporte ao aluno da web. Todas as suas dúvidas serão respondidas de imediato.Seguindo nossa metodologia e se dedicando, entre 6 meses e um ano você já estará programando.
Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!
Ser programador é uma das maiores oportunidades que o Brasil oferece para quem não tem condições de fazer uma faculdade. Muitas empresas contratam sem fazer questão de diploma, o que importa para elas é que o candidato seja um bom técnico e consiga atender suas necessidades.Os salários iniciais para programadores são de R$2.500 mil, podendo chegar aos R$15 mil para aqueles que se dedicam.Com disciplina e um estudo correto, que não te faça perder tempo, é possível se tornar um programador em menos de um ano de estudo.Quando você já estiver empregado, aí sim você pode se aprimorar ainda mais fazendo uma faculdade na área.
O que eu irei aprender estudando pela DevMedia?
Nossas trilhas de estudo te permitem virar um programador Full Stack, que é aquele programador mais completo, ele domina o desenvolvimento Front-end, Back-end e Mobile.Você ficará apto para criar sistemas para computadores e aplicativos para celulares. Utilizamos como base a linguagem JavaScript que é a linguagem mais utilizada no mundo. Outra vantagem do JavaScript é a quantidade de oportunidades no mercado de trabalho. É sem dúvida a linguagem que mais possui vagas e a que mais dá oportunidade para os iniciantes.
Principais diferenciais da DevMedia
Suporte ao aluno - O aluno conta com a ajuda de professores para tirar dúvidas durante toda a jornada de ensino. As perguntas são respondidas em menos de uma hora por professores experientes e atuantes no mercado.Gamificação - A plataforma de ensino é divertida e motivante. É como se o aluno estivesse dentro de um game. Ele terá seu card pessoal, que poderá ser customizado utilizando as moedas que ele ganha quando acerta os exercícios. Ele poderá também trocar suas moedas por outros produtos dentro da plataforma. Além disso, seus acertos contam pontos no ranking mensal dos alunos. Tudo isso deixa os estudos mais leves e motivantes.Didática - A DevMedia já ensina programação há mais de 20 anos. Desenvolvemos ao longo desse tempo uma metodologia que ensina a programar de verdade, com menos aulas e mais prática, são dezenas de projetos e exercícios que desenvolvem a mente programadora no aluno.Projetos reais - Durante os estudos os alunos irão desenvolver dezenas de projetos em cada uma das carreira (front-end, back-end e mobile). Mas o principal é que os projetos da DevMedia não são “copia e cola” como se encontra por aí. Aqui o aluno vai desenvolver os projetos de forma autônoma, recebendo claro a nossa mentoria e suporte, mas o aluno terá condições para desenvolvê-los sozinho.Milhares de exercícios - Programação é prática, por isso a cada nova matéria o aluno passará por um bloco de exercícios para fixar o conteúdo e cada acerto será bonificado com pontos e moedas e valem uma posição no ranking dos alunos.
Qual o investimento financeiro que preciso fazer para me tornar um programador?
Na internet é possível encontrar cursos de todos os preços, desde 50,00 a R$15.000,00.Os cursos de 50,00 são cursos avulsos, que explicam apenas pedaços de uma determinada matéria. Para criar um conhecimento completo você precisaria comprar no mínimo de 15 a 20 cursos avulsos e correria o risco deles não se complementarem tão perfeitamente e seu conhecimento ficaria cheio de "buracos".Os cursos de R$15.000,00 não fazem nenhum sentido. Deixe para investir em cursos caros quando quiser se especializar. Por esse preço você pode inclusive estudar fora do pais. Na DevMedia, você terá um plano de estudo montado por quem já formou mais de 100 mil alunos, e já está nesse mercado há mais de 20 anos. Somos a única plataforma que oferece Suporte ao Aluno em tempo real e uma experiência de estudos gamificada para te manter motivado durante todo o período de estudo. E o melhor, nosso pagamento é recorrente, você não precisa usar o limite do seu cartão de crédito para investir no seu futuro. Aproveite para se matricular agora mesmo.
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com
vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa
bagagem consegui um estágio logo no início do meu primeiro
período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo. Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento! Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a
pena, pois a plataforma é bem intuitiva e muuuuito
didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito
obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento
front-end, tinha coisas que eu ainda não tinha visto. A
didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado,
adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É
um passo a passo incrível. Só não aprende quem não quer.
Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido
bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da
programação, irei assinar meu contrato como programador
graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana,
aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem
como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de
seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com
React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo
muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na
área.