Android na veia

    Featured Posts

Efeitos FadeIn e FadeOut no Android


Efeitos FadeIn e FadeOut no Android


Um efeito simples e bem elegante é o Fade, que suaviza o Show ou o Hide de uma View.

Para criar os efeitos FadeIn e FadeOut no Android é muito simples, basta seguir alguns passos:

Passo 1:
Crie uma pasta dentro da res chamada anim, ficando assim: res/anim
Dentro desta pasta, vão ficar os arquivos xml que configuram as animações.

Os xmls para Fade in e Fade out são:

fade_in.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
       android:fillAfter="true" >
       <alpha
       android:duration="1000"
       android:fromAlpha="0.0"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:toAlpha="1.0" />
</set>

fade_out.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
       android:fillAfter="true" >
       <alpha
       android:duration="1000"
       android:fromAlpha="1.0"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:toAlpha="0.0" />
</set>

Passo 2:
Vamos criar a tela. No exemplo, nossa tela terá apenas um texto e dois botões que vão chamar os efeitos, sendo um para Fade in e outro para Fade out.


tela_fade.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".FadeIn" >

      <TextView
      android:id="@+id/tv_anim"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Isso é um fade in!" />

      <Button
      android:id="@+id/bt_fadein"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="14dp"
      android:text="Fade in" />

      <Button
      android:id="@+id/bt_fadeout"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Fade out" />
</LinearLayout>

Passo 3:
Vamos ao Java!

A primeira coisa que devemos fazer é implementar a interface AnimationListener:

extends Activity implements AnimationListener

Ao implementar, o próprio eclipse já sugere a colocação obrigatória dos métodos da interface:

@Override
public void onAnimationEnd(Animation anim) {
}

@Override
public void onAnimationRepeat(Animation anim) {
}

@Override
public void onAnimationStart(Animation anim) {
}

Esses métodos são utilizados se você quiser controlar os estados da animação, se começou, se está repetindo ou se terminou.

Vamos agora criar os objetos Animation, um para o Fade in e o outro para o Fade out:

private Animation animFadein;
private Animation animFadeout;


Depois é só instanciá-los dentro do método onCreate e setar o listener para eles:

animFadein = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_in);
animFadein.setAnimationListener(this);
animFadeout = AnimationUtils.loadAnimation(getApplicationContext(), R.anim.fade_out);
animFadeout.setAnimationListener(this);

Por fim vamos setar o clique dos botões para chamar as animações:

btFadein.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View arg0) {
       tv.startAnimation(animFadein);
    }
});
btFadeout.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View arg0) {
       tv.startAnimation(animFadeout);
    }
});

Até a próxima!
author

Rodrigo Macedo

Sou desenvolvedor android e há mais de 5 anos trabalho com dispositivos móveis.

para Receba atualizações grátis!

www.CodeNirvana.in

Related Posts Plugin for WordPress, Blogger...
Copyright © Android na veia