Anime uma caixa de diálogo personalizada


97

Estou tentando fazer com que uma caixa de diálogo personalizada apareça como se estivesse deslizando de um modo de exibição de texto. Isso é possível? Não consigo aplicar nenhuma animação à classe de diálogo. Tentei esta linha no construtor, mas não surtiu efeito:

this.getWindow (). setWindowAnimations (R.anim.paranimation);

Nem tenho certeza se a animação está correta, mas poderei ajustá-la assim que ver o que está fazendo. Vou listá-lo abaixo para fins de completude. Não estou procurando ajuda na animação real, apenas no aplicativo para o diálogo.

paranimation.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="-200%"
    android:toXDelta="0%"
    android:fromYDelta="200%"
    android:toYDelta="0%"
    android:duration="3000"
    android:zAdjustment="top">
</translate>

4
Eu preciso saber disso também. Parece possível animar praticamente qualquer coisa, além disso. Ou eu estou errado?!
andy_spoo

Respostas:


215

Tenho lutado com a animação Dialog hoje, finalmente consegui funcionar usando estilos, então aqui está um exemplo.

Para começar, a coisa mais importante - eu provavelmente o usei de 5 maneiras diferentes hoje, mas não pude dizer porque ... Se as configurações de animação do seu dispositivo estão definidas para "Sem animações" (Configurações → Tela → Animação) então os diálogos ganharam seja animado, não importa o que você faça!

A seguir está uma versão simplificada do meu styles.xml. Esperançosamente, é autoexplicativo. Deve estar localizado em res/values.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="PauseDialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowAnimationStyle">@style/PauseDialogAnimation</item>
    </style>

    <style name="PauseDialogAnimation">
        <item name="android:windowEnterAnimation">@anim/spin_in</item>
        <item name="android:windowExitAnimation">@android:anim/slide_out_right</item>
    </style>
</resources>

O windowEnterAnimationé uma das minhas animações e está localizado em res\anim. O windowExitAnimationé uma das animações que faz parte do Android SDK.

Então, quando eu crio o Diálogo no meu onCreateDialog(int id)método de atividades , faço o seguinte.

Dialog dialog = new Dialog(this, R.style.PauseDialog);

// Setting the title and layout for the dialog
dialog.setTitle(R.string.pause_menu_label);
dialog.setContentView(R.layout.pause_menu);

Alternativamente, você pode definir as animações da seguinte maneira, em vez de usar o construtor Dialog que usa um tema.

Dialog dialog = new Dialog(this);
dialog.getWindow().getAttributes().windowAnimations = R.style.PauseDialogAnimation;

2
Esse foi apenas um nome que inventei para este exemplo, na verdade nunca criei essa animação.
ChrisJD

2
Muito obrigado por esta resposta, ela está muito mal documentada, embora eu tenha encontrado esta postagem por meio de uma pista do grupo de desenvolvedores Android .
David Snabel-Caunt

3
+1 Para o "Se as configurações de animação do seu dispositivo estão definidas para" Sem Animações "(Configurações → Exibir → Animação), então os diálogos não serão animados, não importa o que você faça!". Eu tinha esquecido de verificar isso.
Vincent Mimoun-Prat

Dialog dialog = new Dialog(this, R.style.PauseDialog);é para API 11, mas isso é geralDialog dialog = new Dialog(Context context);
mehmet

2
O problema que estou enfrentando é que quando eu minimizo o aplicativo quando a caixa de diálogo está sendo exibida e restauro o aplicativo novamente, a caixa de diálogo é animada novamente, como evitar isso, descanse está perfeito. +1
Parth Anjaria

56

Eu criei a animação Fade in e Fade Out para Dialogbox usando o código ChrisJD.

  1. Dentro de res / style.xml

    <style name="AppTheme" parent="android:Theme.Light" />
    <style name="PauseDialog" parent="@android:style/Theme.Dialog">
        <item name="android:windowAnimationStyle">@style/PauseDialogAnimation</item>
    </style>
    
    <style name="PauseDialogAnimation">
        <item name="android:windowEnterAnimation">@anim/fadein</item>
        <item name="android:windowExitAnimation">@anim/fadeout</item>
    </style>

  2. Dentro de anim / fadein.xml

    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:fromAlpha="0.0" android:toAlpha="1.0" android:duration="500" />
  3. Dentro de anim / fadeout.xml

    <alpha xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/anticipate_interpolator"
        android:fromAlpha="1.0" android:toAlpha="0.0" android:duration="500" />
  4. Atividade principal

    Dialog imageDiaglog= new Dialog(MainActivity.this,R.style.PauseDialog);

11
Você pode usar animações de fade android padrão '@android: anim / fade_in' '@android: anim / fade_out'
Marek

19

Da direita para a esquerda (animação de entrada) e da esquerda para a direita (animação de saída):

styles.xml:

<style name="CustomDialog" parent="@android:style/Theme.Dialog">
    <item name="android:windowAnimationStyle">@style/CustomDialogAnimation</item>
</style>

<style name="CustomDialogAnimation">
    <item name="android:windowEnterAnimation">@anim/translate_left_side</item>
    <item name="android:windowExitAnimation">@anim/translate_right_side</item>
</style>

Crie dois arquivos em res / anim /:

translate_right_side.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXDelta="0%" android:toXDelta="100%"
    android:fromYDelta="0%" android:toYDelta="0%"
    android:duration="600"/>

translate_left_side.xml:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fromXDelta="100%"
    android:toXDelta="0%"/>

Em seu Fragmento / Atividade:

Dialog dialog = new Dialog(getActivity(), R.style.CustomDialog);

13

Encontro o mesmo problema, mas, enfim resolvo o problema da maneira seguida

((ViewGroup)dialog.getWindow().getDecorView())
.getChildAt(0).startAnimation(AnimationUtils.loadAnimation(
context,android.R.anim.slide_in_left));

4
Não é uma resposta sensata. As visualizações dentro da caixa de diálogo ficam animadas
DJphy

12

Primeiro, você tem que criar dois recursos de animação em res / anim dir

slide_up.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:duration="@android:integer/config_mediumAnimTime"
    android:fromYDelta="100%"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toXDelta="0">
</translate>
</set>

slide_bottom.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate 
    android:duration="@android:integer/config_mediumAnimTime" 
    android:fromYDelta="0%p" 
    android:interpolator="@android:anim/accelerate_interpolator" 
    android:toYDelta="100%p">
</translate>
</set>

então você tem que criar um estilo

<style name="DialogAnimation">
    <item name="android:windowEnterAnimation">@anim/slide_up</item>
    <item name="android:windowExitAnimation">@anim/slide_bottom</item>
</style>

e adicione esta linha à sua classe

dialog.getWindow().getAttributes().windowAnimations = R.style.DialogAnimation; //style id

Baseado em http://www.devexchanges.info/2015/10/showing-dialog-with-animation-in-android.html


URL de referência é útil!
ahmednabil88

2

Experimente o código abaixo:

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        getDialog().getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));// set transparent in window background

        View _v = inflater.inflate(R.layout.some_you_layout, container, false);

        //load animation
        //Animation transition_in_view = AnimationUtils.loadAnimation(getContext(), android.R.anim.fade_in);// system animation appearance
        Animation transition_in_view = AnimationUtils.loadAnimation(getContext(), R.anim.customer_anim);//customer animation appearance

        _v.setAnimation( transition_in_view );
        _v.startAnimation( transition_in_view );
        //really beautiful
        return _v;

    }

Crie o Anim personalizado: res / anim / customer_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="500"
        android:fromYDelta="100%"
        android:toYDelta="-7%"/>
    <translate
        android:duration="300"
        android:startOffset="500"
        android:toYDelta="7%" />
    <translate
        android:duration="200"
        android:startOffset="800"
        android:toYDelta="0%" />

</set>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.