Aulas
Disciplinas

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

arrow_back 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.

​x
1
<?xml version="1.0" encoding="utf-8"?>
2
<RelativeLayout
3
    xmlns:android="http://schemas.android.com/apk/res/android"
4
    android:id="@+id/RelativeLayout1"
5
    android:layout_width="fill_parent"
6
    android:layout_height="fill_parent"
7
    android:background="#007">
8
​
9
    <TextView
10
        android:id="@+id/welcome_msg"
11
        android:layout_width="wrap_content"
12
        android:layout_height="wrap_content"
13
        android:layout_alignParentTop="true"
14
        android:layout_centerHorizontal="true"
15
        android:layout_marginTop="15dip"
16
        android:gravity="center"
17
        android:text="Olá! Por favor, insira seu login e senha"
18
        android:textSize="20sp"
19
        android:textStyle="bold"
20
    android:textColor="#FFF" />
21
​
22
    <EditText
23
        android:id="@+id/login_text"
24
        android:layout_width="wrap_content"
25
        android:layout_height="wrap_content"
26
        android:layout_alignParentLeft="true"
27
        android:layout_alignParentRight="true"
28
        android:layout_below="@+id/welcome_msg"
29
        android:layout_marginTop="50dp"
30
        android:hint="Login"
31
        android:maxLines="1" >
32
    </EditText>
33
​
34
    <EditText
35
        android:id="@+id/pass_text"
36
        android:layout_width="wrap_content"
37
        android:layout_height="wrap_content"
38
        android:layout_alignParentLeft="true"
39
        android:layout_alignParentRight="true"
40
        android:layout_below="@+id/login_text"
41
        android:layout_marginTop="30dp"
42
        android:hint="Senha"
43
        android:inputType="textPassword"
44
        android:maxLines="1"
45
        android:longClickable="false" />
46
​
47
    <Button
48
        android:id="@+id/confirmar"
49
        android:layout_width="wrap_content"
50
        android:layout_height="wrap_content"
51
        android:layout_alignParentLeft="true"
52
        android:layout_below="@+id/pass_text"
53
        android:text="Confirmar" />
54
​
55
​
56
    <Button
57
        android:id="@+id/limpar"
58
        android:layout_width="wrap_content"
59
        android:layout_height="wrap_content"
60
        android:layout_alignParentRight="true"
61
        android:layout_below="@+id/pass_text"
62
        android:text="Limpar" />
63
​
64
    <ImageView
65
        android:id="@+id/imageView1"
66
        android:layout_width="wrap_content"
67
        android:layout_height="wrap_content"
68
        android:layout_alignBottom="@+id/confirmar"
69
        android:layout_centerHorizontal="true"
70
        android:src="@android:drawable/presence_offline" />
71
</RelativeLayout>
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.

52
1
package br.ufrn.imd.aula05f;
2
​
3
import android.app.Activity;
4
import android.os.Bundle;
5
import android.view.View;
6
import android.widget.Button;
7
import android.widget.EditText;
8
import android.widget.ImageView;
9
​
10
public class Aula05Activity extends Activity {
11
    @Override
12
    protected void onCreate(Bundle savedInstanceState) {
13
        super.onCreate(savedInstanceState);
14
        setContentView(R.layout.activity_main);
15
​
16
        Button confirmar = (Button) findViewById (R.id.confirmar);
17
        Button limpar = (Button) findViewById (R.id.limpar);
18
​
19
        final EditText login = (EditText) findViewById(R.id.login_text);
20
        final EditText senha = (EditText) findViewById(R.id.pass_text);
21
        final ImageView imgView = (ImageView) findViewById(R.id.imageView1);
22
​
23
        confirmar.setOnClickListener(new View.OnClickListener() {
24
            @Override
25
​
26
            public void onClick(View v) {
27
                String loginStr = login.getText().toString();
28
                String senhaStr = senha.getText().toString();
29
                if (loginStr != null && loginStr.equals("aluno")) {
30
                    if (senhaStr != null && senhaStr.equals("aluno")) {
31
                        //Sucesso
32
                        imgView.setImageResource(android.R.drawable.presence_online);
33
                    } else {
34
                        //Falha senha
35
                    }
36
                } else {
37
                    //Falha login
38
                }
39
            }
40
        });
41
​
42
        limpar.setOnClickListener(new View.OnClickListener() {
43
            @Override
44
​
45
            public void onClick(View v) {
46
                login.setText("");
47
                senha.setText("");
48
                imgView.setImageResource(android.R.drawable.presence_offline);
49
            }
50
        });
51
    }
52
}
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.

play_circle_filled
Vídeo 03 - Recursos Avançados do ImageView
[A] Anterior
8/17
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados