web-dev-qa-db-ja.com

DialogFragmentをポイントから成長するアニメーションとともに表示します

ユーザーがDialogFragmentの行をタップすると、ListViewが表示されます。ダイアログの表示をアニメーション化して、行の中心から大きくなるようにします。ランチャーからフォルダーを開くと、同様の効果が見られます。

私が持っていた1つのアイデアは、TranslateAnimationとScaleAnimationの組み合わせです。別の方法はありますか？

androidandroid-fragmentsandroid-animation
85
Edward Dale

DialogFragmentクラスのラッパーであるDialogであるため、ベースDialogにテーマを設定して、必要なアニメーションを取得する必要があります。

public class CustomDialogFragment extends DialogFragment implements OnEditorActionListener
{
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) 
    {
        return super.onCreateView(inflater, container, savedInstanceState);
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) 
    {
        // Set a theme on the dialog builder constructor!
        AlertDialog.Builder builder = 
            new AlertDialog.Builder( getActivity(), R.style.MyCustomTheme );

        builder  
        .setTitle( "Your title" )
        .setMessage( "Your message" )
        .setPositiveButton( "OK" , new DialogInterface.OnClickListener() 
            {      
              @Override
              public void onClick(DialogInterface dialog, int which) {
              dismiss();                  
            }
        });
        return builder.create();
    }
}

次に、目的のアニメーションを含むテーマを定義する必要があります。に styles.xml カスタムテーマを追加します。

<style name="MyCustomTheme" parent="@Android:style/Theme.Panel">
    <item name="Android:windowAnimationStyle">@style/MyAnimation.Window</item>
</style>

<style name="MyAnimation.Window" parent="@Android:style/Animation.Activity"> 
    <item name="Android:windowEnterAnimation">@anim/anim_in</item>
    <item name="Android:windowExitAnimation">@anim/anim_out</item>
</style>

次に、アニメーションファイルを res/anim フォルダ：

（Android:pivotYがキーです）

anim_in.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <scale
        Android:interpolator="@Android:anim/linear_interpolator"
        Android:fromXScale="0.0"
        Android:toXScale="1.0"
        Android:fromYScale="0.0"
        Android:toYScale="1.0"
        Android:fillAfter="false"
        Android:startOffset="200"
        Android:duration="200" 
        Android:pivotX = "50%"
        Android:pivotY = "-90%"
    />
    <translate
        Android:fromYDelta="50%"
        Android:toYDelta="0"
        Android:startOffset="200"
        Android:duration="200"
    />
</set>

anim_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <scale
        Android:interpolator="@Android:anim/linear_interpolator"
        Android:fromXScale="1.0"
        Android:toXScale="0.0"
        Android:fromYScale="1.0"
        Android:toYScale="0.0"
        Android:fillAfter="false"
        Android:duration="200" 
        Android:pivotX = "50%"        
        Android:pivotY = "-90%"        
    />
    <translate
        Android:fromYDelta="0"
        Android:toYDelta="50%"
        Android:duration="200"
    />
</set>

最後に、ここで難しいのは、各行の中央からアニメーションを成長させることです。行が画面を水平方向に埋めているため、Android:pivotX値は静的になります。一方、Android:pivotY値をプログラムで変更することはできません。

私がお勧めするのは、Android:pivotY属性でそれぞれ異なるパーセンテージ値を持つ複数のアニメーション（およびそれらのアニメーションを参照する複数のテーマ）を定義することです。次に、ユーザーが行をタップしたら、画面上の行のY位置をパーセントで計算します。パーセンテージで位置を把握し、適切なAndroid:pivotY値を持つダイアログにテーマを割り当てます。

それは完璧な解決策ではありませんが、あなたのためのトリックを行うことができます。結果が気に入らない場合は、DialogFragmentを忘れて、行の正確な中心から成長する単純なViewをアニメーション化することをお勧めします。

幸運を！

155
Xavi Gil

このコードを確認してください、それは私のために働いています

//スライドアップアニメーション

<?xml version="1.0" encoding="utf-8"?> <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" />

</set>

//スライドdowmアニメーション

<?xml version="1.0" encoding="utf-8"?>
<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" />

</set>

// スタイル

<style name="DialogAnimation">
    <item name="Android:windowEnterAnimation">@anim/slide_up</item>
    <item name="Android:windowExitAnimation">@anim/slide_down</item>
</style>

// Inside Dialog Fragment

@Override
public void onActivityCreated(Bundle arg0) {
    super.onActivityCreated(arg0);
    getDialog().getWindow()
    .getAttributes().windowAnimations = R.style.DialogAnimation;
}
105
Kiran Babu

DialogFragmentにはpublic getTheme（）メソッドがあり、この正確な理由でオーバーライドできます。このソリューションは、以下のコード行を使用します。

public class MyCustomDialogFragment extends DialogFragment{
    ...
    @Override
    public int getTheme() {
        return R.style.MyThemeWithCustomAnimation;
    }
}
21
Siavash

アニメーション付きのフルスクリーンダイアログを取得するには、次のように記述します...

スタイル：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="actionModeBackground">?attr/colorPrimary</item>
    <item name="windowActionModeOverlay">true</item>
</style>

<style name="AppTheme.NoActionBar">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>

<style name="AppTheme.NoActionBar.FullScreenDialog">
    <item name="Android:windowAnimationStyle">@style/Animation.WindowSlideUpDown</item>
</style>

<style name="Animation.WindowSlideUpDown" parent="@Android:style/Animation.Activity">
    <item name="Android:windowEnterAnimation">@anim/slide_up</item>
    <item name="Android:windowExitAnimation">@anim/slide_down</item>
</style>

res/anim/slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
     Android:shareInterpolator="@Android:interpolator/accelerate_quad">

    <translate
        Android:duration="@Android:integer/config_shortAnimTime"
        Android:fromYDelta="100%"
        Android:toYDelta="0%"/>
</set>

res/anim/slide_down.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:Android="http://schemas.Android.com/apk/res/Android"
     Android:shareInterpolator="@Android:interpolator/accelerate_quad">

    <translate
        Android:duration="@Android:integer/config_shortAnimTime"
        Android:fromYDelta="0%"
        Android:toYDelta="100%"/>
</set>

Javaコード：

public class MyDialog extends DialogFragment {

    @Override
    public int getTheme() {
        return R.style.AppTheme_NoActionBar_FullScreenDialog;
    }
}

private void showDialog() {
    FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
    Fragment previous = getSupportFragmentManager().findFragmentByTag(MyDialog.class.getName());
    if (previous != null) {
        fragmentTransaction.remove(previous);
    }
    fragmentTransaction.addToBackStack(null);

    MyDialog dialog = new MyDialog();
    dialog.show(fragmentTransaction, MyDialog.class.getName());
}
7
maXp

ダイアログフラグメントのonStart内で装飾ビューを使用します

@Override
public void onStart() {
    super.onStart();


    final View decorView = getDialog()
            .getWindow()
            .getDecorView();

    decorView.animate().translationY(-100)
            .setStartDelay(300)
            .setDuration(300)
            .start();

}
4
Horatio

DialogFragmentでは、カスタムアニメーションはonCreateDialogと呼ばれます。 「DialogAnimation」は、前の回答のカスタムアニメーションスタイルです。

public Dialog onCreateDialog(Bundle savedInstanceState) 
{
    final Dialog dialog = super.onCreateDialog(savedInstanceState);
    dialog.getWindow().getAttributes().windowAnimations = R.style.DialogAnimation;
    return dialog;
}
3
Brownsoo Han

ビューのズーム のAndroid開発者トレーニングを見ましたか？良い出発点かもしれません。

これを機能させるには、おそらくDialogFragmentを拡張するカスタムクラスを作成する必要があります。

また、Jake Whartonsをご覧ください NineOldAndroids Honeycomb Animation APIの互換性については、APIレベル1までさかのぼります。

1
greve

APIを介して作業する場合は、onCreateDialog内ではなく、DialogFragemnt-> onStart内で行う必要があります。

@Override
    public void onStart() 
    {
        if (getDialog() == null) 
        {
            return;
        }

        getDialog().getWindow().setWindowAnimations(
                  R.style.DlgAnimation);

        super.onStart();
    }
0
Colateral