Os componentes gráficos correspondem aos elementos que permitirão a interação do usuário com o sistema, quando falamos em GUI nos referimos às interfaces gráficas do usuário, portanto essas interfaces são construídas através de elementos gráficos como botões, menus, ícones, campos de texto, rótulos , etc. texto entre outros, uma GUI combina o design visual e os eventos associados a esse design, portanto, se adicionarmos um botão, devemos programar o evento associado a esse botão quando for pressionado por um usuário.
Conforme mencionado, vamos nos concentrar nos componentes gráficos que são usados a partir de arquivos XML, vamos ver algumas das propriedades mencionadas acima.
Propriedades básicas.
Vejamos algumas propriedades básicas utilizadas em componentes gráficos, estas podem ser aplicadas a qualquer componente independente do seu tipo, pois como mencionado todos os componentes são Views então compartilham as mesmas propriedades, algumas das mais utilizadas são:
android: id.
Propriedade muito importante porque permite definir um identificador para o controle, esta propriedade é atribuída a qualquer visão, por exemplo se for atribuída a um campo de entrada de dados, então isso será usado para capturar informações do usuário, por isso devemos usar um nome diferenciador e Claro.
A forma correta de gerar um identificador é a seguinte:
android:id="@+id/miCampoDeTexto"
O símbolo @+id/ significa que um novo identificador está sendo gerado, isso fará com que a classe R. do pacote gen do projeto, crie uma referência a esse objeto para que ele possa ser posteriormente manipulado pelo código.
No exemplo, o identificador “meuTextField” para o componente.
android:layout_width.
Define a largura associada à vista, é uma propriedade obrigatória e o seu valor pode ser definido em valores absolutos ou pela indicação de um dos dois valores seguintes:
-
wrap_content (Ocupa o espaço de acordo com o seu conteúdo)
-
match_parent (Ocupa todo o espaço disponível)
Exemplo:
android:layout_width="match_parent"qualquerandroid:layout_width="290dp"
android:layout_height.
Define a altura associada à vista, é uma propriedade obrigatória e o seu valor pode ser definido em valores absolutos ou indicando um dos dois seguintes valores:
-
wrap_content (Ocupa o espaço de acordo com o seu conteúdo)
-
match_parent (Ocupa todo o espaço disponível)
Exemplo:
android:layout_height="wrap_content"qualquerandroid:layout_height="58dp"
android:layout_margin.
Define uma margem para o componente, permitindo estabelecer um espaço acima, abaixo e nas suas laterais, como variantes caso queira dar espaços independentes, pode ser feito usando as propriedades marginLeft, marginRight, marginTop ou marginBottom (ou all)
Exemplo: android:layout_margin="20dp" | android:layout_marginTop="20dp" | android:layout_marginLeft="20dp" | android:layout_marginRight="20dp" | android:layout_marginBottom="20dp"
android: dica.
Esta propriedade permite que um texto seja exibido no controle como uma ajuda enquanto o usuário ainda não digitou informações. (Preferível sobre a propriedade de texto)
Exemplo: android:hint="Ingrese el nombre"
android:inputType.
Ele determina o tipo de entrada que será permitido para a caixa de texto, isso permite algum tipo de validação dos dados e também informa ao sistema operacional que tipo de teclado (virtual) deve ser usado.
Entre as opções que podemos associar a este imóvel encontram-se algumas como:
- Texto
- número
- textura
- Senha de texto
- telefone
- encontro
- TextoEmailAddress
Existem muitas outras opções que podem ser usadas dependendo da necessidade.
Exemplo: android:inputType="number" | android:inputType="textEmailAddress"
android:textSize.
Define um tamanho para o texto a ser exibido na tela, as unidades de medida devem ser levadas em consideração onde sp é usado para textos
Exemplo: android:textSize="25sp"
android:estilotexto.
Define um estilo para o texto, podendo definir o texto como normal, negrito, itálico (ou ambos).
Exemplo: android:textStyle="bold" | android:textStyle="italic" | android:textStyle="bold|italic"
android:textColor.
Define uma cor para o texto, podendo adicionar uma cor do arquivo de propriedades “cores” ou um valor hexadecimal
Exemplo: android:textColor="@color/teal_700" | android:textColor="#9C27B0"
android:backgroundTint.
Define uma cor de fundo para o componente, também pode pegar a cor das propriedades “cores” ou um valor hexadecimal
Exemplo: android:backgroundTint="@color/teal_200" | android:backgroundTint="#FF5722"
android:texto.
Define o conteúdo textual associado à exibição. Embora seu valor possa ser atribuído diretamente, é altamente recomendável usar o arquivo de strings disponível na pasta de recursos.
Exemplo: android:text="Bienvenidos" | android:text="@string/titulo"
Esta propriedade é comum em views que exibem texto na interface do dispositivo. A tela a seguir mostra o arquivo de recursos strings.xml onde são adicionados diferentes valores para os textos
e posteriormente esses valores são acessados a partir das views
Depois de limpar as propriedades anteriores, vamos ver quais são os componentes gráficos básicos
Botão.
Estes correspondem aos botões básicos que conhecemos, apenas apresenta um botão com o respetivo texto interno e uma margem definida.
O botão cumpriria a função básica de aguardar um evento quando for pressionado.
Botão Alternar
O tipo ToggleButton corresponde a um tipo de botão que pode ser mantido em 2 estados possíveis, pressionado ou não pressionado, para isso não apenas uma única propriedade de texto é definida, mas 2 dependendo do estado que ele possui no momento, usando as propriedades do android : textOn e android:textOff.
Assim como os botões tradicionais, o ToggleButton pode ser programado para responder ao evento click, mas provavelmente você só precisa saber em que estado ele está. Isso pode ser feito consultando o método isChecked(), que retorna o valor true no evento que é pressionado e falso caso contrário.
comuta
Este controle pode simular um switch muito semelhante ao funcionamento do ToggleButton, mas com uma aparência visual diferente.
Lembre-se de que dependendo da versão do Android que estamos usando, a aparência visual de nossos componentes pode mudar, nesse caso, o controle Switch para versões Android 5.0 e superiores ficaria assim:
ImageButton
Este tipo de botão permite vincular uma imagem a ele para ser mostrada ao usuário em vez de um texto como é comum, para isso podemos pegar a imagem das pastas /res/drawable e carregá-la usando a propriedade android:src , neste caso vamos usar uma imagem diretamente dos recursos do Android.
TextView
Estes correspondem aos rótulos de texto básicos que são mostrados aos usuários, estes em outros idiomas são conhecidos como rótulos e permitem exibir um texto associado à propriedade android:text, esses rótulos possuem outras propriedades que permitem manipular seu tamanho, cor de fundo, cor e tipo de fonte, estilo entre outros
Editar texto
A view Android EditText é equivalente ao ASP e C# Textbox ou ao JAVA JTextField, é um controle que permite a captura do texto digitado pelo usuário em tempo de execução.
caixa de seleção
O controle de caixa de seleção é usado para marcar ou desmarcar opções em um aplicativo. A forma de defini-lo na interface e as propriedades disponíveis para sua manipulação por código são análogas às comentadas no controle ToogleButton.
Este controle herda do controle TextView, então todas as opções de formatação já citadas para este controle também são válidas para o checkBox.
No código da aplicação você pode verificar se este controle está selecionado ou não através do método isChecked() que retorna o valor de verdadeiro se você foi selecionado ou falso caso contrário, você também pode usar o método setChecked(value) para definir um estado específico para o controle, onde value verdadeiro seria para selecionados e falso por não selecionado.
O evento que normalmente é programado para este controle e que é executado toda vez que seu estado muda (selecionado / não selecionado) é onCheckedChanged.
Botao de radio
Assim como o controle CheckBox, o RadioButton serve para marcar ou desmarcar determinada opção, a diferença está no tipo de seleção que se deseja fazer. Os RadioButtons são normalmente usados em grupos para definir um conjunto de opções das quais você pode selecionar apenas uma, ou seja, cada opção é mutuamente exclusiva, portanto ao selecionar uma opção a que foi selecionada anteriormente será automaticamente desmarcada. Esses grupos são definidos pelo elemento RadioGroup, que por sua vez conterá todos os elementos RadioButton que representam as opções.
RadioGroups pode definir a propriedade android:orientation como “vertical” ou “Horizontal” para determinar como os RadioButtons que ele contém serão ordenados.
O RadioButton por sua vez, além da largura e altura, deve definir a propriedade android:text para associar o texto da opção que está representada e android:id para associar um código ao controle para que possa ser manipulado desde o lógica do aplicativo.
Para manipular o controle desde a lógica da aplicação, pode-se utilizar diferentes métodos, entre os quais encontramos check(Eu iria) que é usado para definir o radiobutton identificado com o id que é passado como parâmetro como selecionado, o método clearCheck() é usado para desmarcar todos os radiobuttons do grupo e o método getCheckedRadioButtonId() é usado para obter o id do radiobutton que está dentro do grupo selecionado ou o valor de -1 se nenhum item for selecionado.
O evento mais importante desse controle também é o onCheckedChanged, que é disparado quando um elemento do grupo é selecionado (lembre-se que a seleção de um elemento do grupo indica a desmarcação de outro).
E é isso, esses são alguns dos componentes gráficos básicos que vamos utilizar ao longo do curso, nos próximos posts continuaremos com outros componentes ou layouts.
Também pode lhe interessar.
Há algo que você queira adicionar ou comentar sobre esta entrada? fique a vontade para fazer….E se gostou… te convido a compartilhar Y Inscreva-se entrando no botão “Participar deste site” para ficar sabendo de mais posts como este 😉