Animer une boîte de dialogue personnalisée


97

J'essaie de faire apparaître une boîte de dialogue personnalisée comme si elle glissait depuis une vue de texte. Est-ce possible? Je n'arrive pas à appliquer une animation à la classe de dialogue. J'ai essayé cette ligne dans le constructeur, mais cela n'a aucun effet:

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

Je ne sais même pas si l'animation est correcte, mais je pourrai l'ajuster une fois que je verrai ce qu'elle fait. Je vais l'énumérer ci-dessous par souci d'exhaustivité. Je ne cherche pas d'aide sur l'animation proprement dite, juste l'application au dialogue.

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
J'ai besoin de le savoir aussi. Il semble possible d'animer à peu près tout, à part cela. Ou ai-je tort?!
andy_spoo

Réponses:


215

J'ai eu du mal avec l'animation Dialog aujourd'hui, je l'ai finalement fait fonctionner en utilisant des styles, voici donc un exemple.

Pour commencer, la chose la plus importante - je l'ai probablement fait fonctionner de 5 façons différentes aujourd'hui mais je ne pouvais pas le dire car ... Si les paramètres d'animation de vos appareils sont définis sur "Aucune animation" (Paramètres → Affichage → Animation), les boîtes de dialogue ont gagné ne sois pas animé quoi que tu fasses!

Ce qui suit est une version allégée de mon styles.xml. Espérons que ce soit explicite. Cela devrait être situé dans 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>

C'est l' windowEnterAnimationune de mes animations et se trouve dans res\anim. C'est l' windowExitAnimationune des animations qui fait partie du SDK Android.

Ensuite, lorsque je crée le dialogue dans ma onCreateDialog(int id)méthode d' activités , je fais ce qui suit.

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);

Vous pouvez également définir les animations de la manière suivante au lieu d'utiliser le constructeur Dialog qui prend un thème.

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

2
C'était juste un nom que j'ai inventé pour cet exemple, je n'ai jamais vraiment créé cette animation.
ChrisJD

2
Merci beaucoup pour cette réponse, elle est vraiment mal documentée, même si j'ai trouvé ce message via un indice du groupe Android Developers .
David Snabel-Caunt

3
+1 Pour le "Si les paramètres d'animation de vos appareils sont réglés sur" Aucune animation "(Paramètres → Affichage → Animation), les boîtes de dialogue ne seront pas animées quoi que vous fassiez!". J'avais oublié de vérifier cela.
Vincent Mimoun-Prat

Dialog dialog = new Dialog(this, R.style.PauseDialog);c'est pour l'API 11 mais c'est généralDialog dialog = new Dialog(Context context);
mehmet

2
Le problème auquel je suis confronté est que lorsque je minimise l'application lorsque la boîte de dialogue s'affiche et que je restaure à nouveau l'application, la boîte de dialogue s'anime à nouveau, comment éviter cela, reste parfait. +1
Parth Anjaria

56

J'ai créé l'animation Fade in and Fade Out pour Dialogbox en utilisant le code ChrisJD.

  1. À l'intérieur 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. Dans 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. Dans 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. Activité principale

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

11
Vous pouvez utiliser les animations de fondu Android par défaut '@android: anim / fade_in' '@android: anim / fade_out'
Marek

19

Pour de droite à gauche (animation d'entrée) et de gauche à droite (animation de sortie):

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>

Créez deux fichiers dans 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%"/>

Dans votre fragment / activité:

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

13

Je rencontre le même problème, mais enfin je résous le problème de manière suivie

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

4
Pas une réponse sensée. Les vues à l'intérieur de la boîte de dialogue s'animent
DJphy

12

Tout d'abord, vous devez créer deux ressources d'animation dans le répertoire res / anim

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>

alors tu dois créer un style

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

et ajoutez cette ligne à votre classe

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

Basé sur http://www.devexchanges.info/2015/10/showing-dialog-with-animation-in-android.html


l'URL de référence est utile!
ahmednabil88

2

Essayez le code ci-dessous:

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;

    }

Créez l'anim personnalisé: 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>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.