ViewFlipper!

O ViewFlippler é uma classe que herda de ViewGroup do Android e tem a função de gerenciar um conjunto de Views, assim como o LinearLayout, RelativeLayout dentre outros mais fáceis ser encontrados também tem.
Ele consegue de maneira simples adicionar animações no ato de mudar de Views, por isso, seu uso é especialmente indicado para transição de telas. Supondo que sua aplicação tenha uma galeria de imagens, e dois botões de “ir” e “voltar”, onde o usuário consiga visualizar a próxima imagem ou voltar para a anterior. Esse cenário seria um bom momento para usar o ViewFlipper e acrescentar animações no ato de ver a próxima imagem ou retornar para a anterior.

Vamos a prática…

No nosso exemplo teremos uma aplicação que terá no seu topo uma Action Bar.( para criar essa ActionBar você pode dar uma olhada nesse artigo aqui).
Essa Action Bar terá apenas dois botões, o ir e o voltar, onde o “ir” irá mostrar a próximo View e o “Voltar” irá mostrar o View anterior. As Views nas quais me refiro são as que estão envolvidas pelo ViewFlipper, e que serão exibidas na tela. No nosso exemplo o ViewFlipper contemplará dois LinearLayout, que por sua vez irão envolver dois componentes: Um TextView, que informará o layout atual, e um ImageView que acompanhará o TextView com uma imagem.

Na imagem abaixo podemos ver como vai ficar nossa aplicação.

Agora que sabemos como ficou nossa tela, vamos visualizar o layout xml.


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <com.markupartist.android.widget.ActionBar
        android:id="@+id/actionbar"
        style="@style/ActionBar" />

    <ViewFlipper
        android:id="@+id/flip"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tela Um" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/birdie" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Tela Dois" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/cat" />
        </LinearLayout>
    </ViewFlipper>
</LinearLayout>

Este layout é bem tranquilo de ser interpretado. Primeiro temos o LinearLayout principal, seguido da nossa ActionBar. Posteriormente temos o ViewFlipper envolvedo os dos LinearLayouts, com o TextView e o ImageView cada um.

Agora que analisamos o Layout xml, vamos ver a Activity que irá utiliza-lo.

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ViewFlipper;

import com.markupartist.android.widget.ActionBar;
import com.markupartist.android.widget.ActionBar.AbstractAction;

public class MainActivity extends Activity {
	
	private ViewFlipper viewFlipper  = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        configureActionBar();
        viewFlipper = (ViewFlipper) findViewById(R.id.flip);
        
        Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left);
        in.setDuration(3000);
        
        Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);
        out.setDuration(3000);
        
        viewFlipper.setOutAnimation(out);
        viewFlipper.setInAnimation(in);
    }
    
	private void configureActionBar() {
		ActionBar actionBar = (ActionBar) findViewById(R.id.actionbar);
		actionBar.setHomeAction(new MainAction());
		actionBar.setDisplayHomeAsUpEnabled(true);
		actionBar.addAction(new BackAction());
		actionBar.addAction(new ForwardAction());
	}
	
	private class MainAction extends AbstractAction {

		public MainAction() {
			super(R.drawable.ic_launcher);
		}

		@Override
		public void performAction(View view) {
			
		}
	}
	
	private class BackAction extends AbstractAction {

		public BackAction() {
			super(R.drawable.back);
		}

		@Override
		public void performAction(View view) {
			viewFlipper.showPrevious();
		}
	}

	private class ForwardAction extends AbstractAction {

		public ForwardAction() {
			super(R.drawable.forward);
		}

		@Override
		public void performAction(View view) {
			viewFlipper.showNext();
		}
	}
} 

Os pontos que devem ser observados na nossa Activity são.

– Após pegarmos a referência do ViewFlipper através do método findViewById. Adicionamos a ele duas animações já disponibilizadas pela API do Android. A primeira, representada pelo id
android.R.anim.slide_in_left, irá ser executada quando uma View entrar na tela, pois foi adicionada no método setInAnimation do ViewFlipper. E a segunda, representada pelo id android.R.anim.slide_out_right, será executada quando a View deixar a tela, por sua vez foi adicionada através do método setOutAnimation do próprio ViewFlipper.
É desse modo que conseguimos adicionar animações no ViewFlipper.

– Após configurar as animações, vamos configurar o ActionBar que irá disparar os eventos do nosso ViewFlipper. Ou seja, quando o usuário clicar no botão “Ir” do ActionBar, será executado o método viewFlipper.showNext(); que exibirá a próxima View do ViewFlipper. Caso ele clique no botão “Voltar”, por sua vez o método viewFlipper.showPrevious(); será executado chamando o layout anterior de volta a tela. Por trás das câmeras, ambos os métodos irão executar as animações que configuramos acima.

– Outro ponto, são as classes internas (Inner Class) presentes na nossa Activity, cada uma representando uma ação do ActionBar.

– Os ícones que usei foram tirados deste site. Escolha-os de acordo com o seu gosto e os coloque na pasta drawable com o mesmo nome que esta nossa Activity.

Chegamos ao fim de mais um post!
Dúvidas e comentários são sempre bem vindos!
Abraços.

Anúncios

,

  1. Deixe um comentário

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: