Android parte 3: refinando o projeto

Personalizando layout da lista de alunos - Introdução

Olá! Sou o instrutor Alex Felipe, e apresentarei a terceira parte do curso Fundamentos no Android: Refinando o Projeto.

É importante que você tenha concluído as duas primeiras partes e suas atividades antes de iniciar este, pois será preciso o conhecimento base e o projeto desenvolvido anteriormente para avançar.

Nesta etapa do curso, iremos implementar novas features e funcionalidades, além de focar em algumas técnicas para aumentar a qualidade do projeto de acordo com o padrão de desenvolvedores Android.

O primeiro passo será criar um layout personalizado para os alunos em uma list view. Para isso, teremos alguns desafios: como o caso de um Adapter personalizado que veremos mais adiante.

Depois, resolveremos a questão de rotação da tela apresentada no curso anterior, a partir da camada application e sua utilização.

Outra feature que desenvolveremos será no momento de remoção dos alunos através de uma caixa de diálogo ou dialog que confirma a ação, proporcionando uma maior atenção ao usuário.

Vamos lá!

Personalizando layout da lista de alunos - Personalizando layout do aluno

Nosso aplicativo já funciona muito bem! Mas devemos pensar na qualidade geral do projeto. Há diversas melhorias visuais ou via código que podemos aplicar, e que serão o foco nesta etapa.

Então vamos começar:

O primeiro passo será sobre a lista de alunos e a adição de informações. Ao longo do curso, trabalhamos com uma lista simples contendo somente o nome do aluno. E se tratando de um projeto de agenda, é importante que apresente outros dados, como o telefone de contato.

Para isso, entraremos na classe Aluno.java e vamos concatenar a informação de:

@NonNull
@Override
public String toString() { return nome; }

para

@NonNull
@Override
public String toString() { return nome + " - " + telefone; }

Após a execução do projeto pelo Android Studio, ele apresentará o resultado. Agora com a informação disponível, é preciso prestar atenção ao visual que tornará o produto mais atrativo.

Vamos nos dedicar ao layout personalizado de cada item da lista via arquivo estático.

Entre em "res > layout" Use o atalho "alt + insert" para abrir o menu "New" e selecionar a opção "Layout resource file".

No campo "file name", insira o nome do layout que representará o item da lista. Podemos padronizar escrevendo "item_aluno" por exemplo, identificando-o.

Agora, vamos definir nosso "Root element" como LinearLayout e finalizar, gerando o arquivo item_aluno.xml.

Já aprendemos como criar nossos layouts. O próximo passo é personalizar e aplicar dois textviews:

<TextView android: id="@+id/item_aluno_nome"
    android: layout_width="match_parent"
    android: layout_height="wrap_content" />

<TextView android: id="@+id/item_aluno_telefone"
    android: layout_width="match_parent"
    android: layout_height="wrap_content" />

Para vermos como o texto de cada item está ficando sem ter de executar o layout, usaremos o tools a ser importado desta forma, por exemplo:

<TextView android: id="@+id/item_aluno_nome"
    android: layout_width="match_parent"
    android: layout_height="wrap_content"
    tools:text="Alex"/> 


<TextView android: id="@+id/item_aluno_telefone"
    android: layout_width="match_parent"
    android: layout_height="wrap_content"
    tools:text="1122223333"/> 

Para personalizar o tamanho da fonte de forma que permita a proporção e a acessibilidade, bem como a distância agradável das margens, adicione:

<TextView android: id="@+id/item_aluno_nome"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="24sp"
    android:layout_margin="8dp"
    tools:text="Alex"/> 

<TextView android: id="@+id/item_aluno_telefone"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    tools:text="1122223333"/> 

Agora com o layout pronto, temos que aplicá-lo no list view modificando o Adapter que faz a renderização dos elementos que queremos.

Para isso, voltaremos à classe ListaAlunosActivity.java. No final, modifique:

private void configuraAdapter(ListView listaDeAlunos) {
    adapter = new ArrayAdapter<>(
            context: this,
            android.R.layout.simple_list_item_1);
    listaDeAlunos.set.Adapter(adapter);
}

Para:

private void configuraAdapter(ListView listaDeAlunos) {
    adapter = new ArrayAdapter<>(
            context: this,
            R.layout.item_aluno);
    listaDeAlunos.set.Adapter(adapter);
}

Execute o projeto e visualize no emulador o resultado.

Porém, um erro inesperado acontece e temos que resolvê-lo. Usaremos o LogCatch para tentar executar novamente, limpando o Log e filtrando para exibir somente os erros do nosso aplicativo. Logo aparece java.lang.IllegalStateExcepiton: ArrayAdapter requires the resource ID to be a TextView, significando que o estado deve ser apenas um TextView.

Tendo isso em vista, comentaremos o trecho final do LinearLayout, assim como começo layout para testar a execução, deixando apenar um TextView.

Como resultado, concluímos que se quisermos fazer uma lista com layout personalizado, precisaremos de um Adapter alternativo. Vejamos na próxima etapa.

Personalizando layout da lista de alunos - Implementando o BaseAdapter

Identificamos a necessidade de um Adapter alternativo para que cada elemento de uma ListView tenha um layout personalizado.

Retomando nosso projeto, podemos perceber um método ListaDeAlunos.setAdapter() que pode receber qualquer referência que faça a implementação de um ListAdapter, a interface exigida.

Como a implementação da ListAdapter não é tão simples, o Android disponibiliza outra classe abstrata com comportamento similar ao ArrayAdapter que permite a personalização que procuramos, o BaseAdapter.

A única diferença é só permitir a implementação de métodos necessários à personalização do Adapter. Então,

Private void configuraAdapter(ListView ListaDeAlunos) {
    adapter = new ArrayAdapter<>(
             context: this,
             R.layout.item_aluno);
    listaDeAlunos.setAdapter(new BaseAdapter()  {
    // código omitido
    }
//código omitido
}

Assim, novos quatro métodos são apresentados na sequência. O primeiro, getCount(), indica a quantidade de elementos que um Adapter terá, e nós podemos inserir a quantidade de alunos da lista. Por exemplo:

@Override
public int getCount()  {
    return dao.todos().size();
}

Porém, esta implementação ficará acoplada ao nosso dao, e vimos que o ArrayAdapter funciona de forma independente. Ou seja, cada vez que implementarmos um Adapter, sempre haverá uma lista interna que representará seu conjunto de dados, o DataSet.

Ao invés de usar nossa atual implementação do dao, podemos criar nosso próprio Dataset especializado do Adapter:

Private void configuraAdapter (ListView ListaDeAlunos) {
    adapter = new ArrayAdapter<>(
             context: this,
             R.layout.item_aluno);
    listaDeAlunos.setAdapter(new BaseAdapter() {

        private final List<Aluno> alunos = new ArrayList<>();

        @Override
        public int getCount() {
            return alunos.size();
        }
// código omitido
}

O método seguinte representa o elemento que queremos com base em uma posição, devolvendo-o. A posição será o parâmetro i que devolverá o Object, os quais podemos modificar para facilitar o uso, desta forma:

@Override
public Aluno getItem(int posicao) {
    return alunos.get(posicao);
}

Em seguida, será representado o Id do elemento que estamos lidando. Atente ao fato de que em alguns casos a implementação não possui Id, podendo então ser mantido o valor inicial, compatível ou não com o public long. Porém, em nosso caso, há compatibilidade e Id definido anteriormente.

@Override
public long getItemId(int posicao) {
    return alunos.get(posicao).getId();
}

Passando ao próximo método, podemos alterar o layout do nosso projeto, o getView. Relembre o procedimento similar dos nossos menus a partir de um arquivo estático com o processo de inflate, através do LayoutInflater.

Aqui, usaremos este objeto com o método de implementação from que representa a origem deste layout, como trabalhamos no AdaptView.

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
    View viewCriada = LayoutInflater
        .from(ListaAlunosActivity.this)
        .inflate(R.layout.item_aluno, viewGroup);
    return viewCriada;
}

Ao executar, identificamos um problema: visualmente, os alunos não estão sendo apresentados. Isso acontece porque apenas criamos a instância do BaseAdapter, enquanto as operações de adição estão sendo feitas a partir do ArrayAdapter.

A seguir, trabalharemos somente com nossa nova instância e veremos os resultados.

Sobre o curso Android parte 3: refinando o projeto

O curso Android parte 3: refinando o projeto possui 173 minutos de vídeos, em um total de 55 atividades. Gostou? Conheça nossos outros cursos de Android em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Personalizando layout da lista de alunos
• Conhecendo a camada Application
• Implementando caixa Dialog
• Utilizando o inspetor de código
• Refatorando o código Java