Material Didático

Cursos / Informática para Internet / Dispositivos Móveis / Aula

Aula 05 - Interfaces Gráficas II

ImageView

O ImageView, como o nome sugere, é o componente responsável por mostrar imagens ao usuário. Ele é semelhante ao TextView, porém, trabalha com propriedades de imagens e não de texto. Vejamos, na Listagem 8, como é feita a declaração do componente em nossa aplicação. Vamos utilizar uma imagem padrão Android para o exemplo.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#007">

Listagem 8 - Declaração do ImageView

A única novidade que encontramos entre as propriedades descritas para esse elemento é a propriedade src. Essa propriedade é responsável por indicar qual a imagem que deverá ser carregada na ImageView declarada. Veja que a imagem referenciada é uma imagem padrão do Android, que está contida no pacote @android. Esse pacote é padrão e está disponível em todas as aplicações. Você pode usar uma imagem própria, colocando-a na pasta res\drawable e usando uma referência a essa imagem, como, por exemplo, android:src="@drawable/minha_imagem".

Uma vez declarado o componente, vamos voltar à Activity e fazer com que a imagem mude, caso o login seja bem sucedido, e voltar ao seu estado inicial após a limpeza da tela. Vejamos, na Listagem 9, a declaração da ImageView na classe MainActivity.java, e as mudanças feitas nos métodos onClick() dos botões.

package br.ufrn.imd.aula05f;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;

public class Aula05Activity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

Button confirmar = (Button) findViewById (R.id.confirmar);
        Button limpar = (Button) findViewById (R.id.limpar);

final EditText login = (EditText) findViewById(R.id.login_text);
        final EditText senha = (EditText) findViewById(R.id.pass_text);
        final ImageView imgView = (ImageView) findViewById(R.id.imageView1);

confirmar.setOnClickListener(new View.OnClickListener() {
            @Override

public void onClick(View v) {
                String loginStr = login.getText().toString();
                String senhaStr = senha.getText().toString();
                if (loginStr != null && loginStr.equals("aluno")) {
                    if (senhaStr != null && senhaStr.equals("aluno")) {
                        //Sucesso
                        imgView.setImageResource(android.R.drawable.presence_online);
                    } else {
                        //Falha senha
                    }
                } else {
                    //Falha login
                }
            }
        });

limpar.setOnClickListener(new View.OnClickListener() {
            @Override

public void onClick(View v) {
                login.setText("");
                senha.setText("");
                imgView.setImageResource(android.R.drawable.presence_offline);
            }
        });
    }
}

Listagem 9 - Mudando a imagem na Acitivity

A utilização do método setImageResource torna possível mudar a imagem de um ImageView. Com ele mudamos a imagem, quando há sucesso no login, ou mudamos novamente para a imagem inicial, quando o botão de limpar é clicado. Veja que o pacote R.drawable, que é referenciado nesses métodos, não é o pacote normal, mas sim o android.R.drawable. Como estamos utilizando um drawable, que é padrão do Android e não da nossa aplicação, precisamos adicionar a referência ao pacote android.R e não ao R local.

Na próxima sessão, veremos como exibir mensagens utilizando o componentes como o Toast e Dialogs. Como exemplo, mostraremos uma mensagem caso o usuário insira login e/ou senha inválidos.

A seguir, temos um vídeo exemplificando a utilização de ImageViews. Aqueles que desejarem acompanhar o desenvolvimento do vídeo utilizando o Android Studio poderão o fazer com o mesmo código exibido e obedecendo a mesma estrutura de pastas no projeto.

Termo de uso

arrow_back Aula 05 - Interfaces Gráficas II

ImageView

Aula 05 - Interfaces Gráficas II