web-dev-qa-db-ja.com

アニメーション時にRecyclerView内でCardViewを折りたたむ

私がやろうとしていること

CardViewがあり、下部にデフォルトでGONEのサポートテキストがあります。下の画像に示すように、ユーザーが「アクション矢印」をクリックしたときにのみカードのこのセクションを表示したいと思います。

Expand Arrow

Viewの可視性をVISIBLEに設定するだけでそれを実現できることはわかっていますが、展開イベントと折りたたみイベントもアニメーション化したいと思います。

問題と私がこれまでに試したこと

そのために、CardViewxmlでAndroid:animateLayoutChanges="true"プロパティを使用しましたが、展開すると問題なく機能します。しかし、矢印をもう一度クリックしてサポートテキストを折りたたむと、下のカードがアニメーション中にクリックしたカードと重なります。この重複を回避するにはどうすればよいですか？

編集：この質問の解決策 のようなことができるかもしれないことは知っていますが、 Android:animateLayoutChangesオプションが存在します。そのXMLプロパティを使用して問題を解決し、単純にすることは可能かどうか疑問に思います。

私のアニメーションコードは次のとおりです。

Javaコード

protected void expandCard() {
    if (isExpanded) {
        ibt_show_more.animate().rotation(0).start();
        isExpanded = false;
        tv_support.setVisibility(View.GONE);
    }
    else {
        ibt_show_more.animate().rotation(180).start();
        isExpanded = true;
        tv_support.setVisibility(View.VISIBLE);
    }
}

XMLコード

<Android.support.v7.widget.CardView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="@dimen/spacing_small"
    card_view:cardCornerRadius="2dp"
    Android:id="@+id/os_list_item_cv">

    <RelativeLayout
        Android:id="@+id/os_list_item_rl_root"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:animateLayoutChanges="true">

        <!-- Here goes the header, the image, the action buttons and so on -->
        <!-- Omitted on purpose -->
        <!-- ... -->

        <!-- This is the support TextView -->
        <TextView
            Android:id="@+id/tv_support"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_below="@+id/os_list_item_rl_actions"
            Android:text="@string/bacon_ipsum"
            Android:paddingBottom="24dp"
            Android:paddingEnd="16dp"
            Android:paddingRight="16dp"
            Android:paddingLeft="16dp"
            Android:paddingStart="16dp"
            Android:visibility="gone"/>

    </RelativeLayout>

</Android.support.v7.widget.CardView>

完全性のためのGIF（誤った折りたたみ動作あり）

enter image description here

androidandroid-animationandroid-cardview
18
Mauker

可視性を変更する直前に、次のコード行を追加します。

TransitionManager.beginDelayedTransition(the rootView containing the cardView, new AutoTransition());

スムーズなアニメーションが得られるはずです。また、この前にxmlから「animateLayoutChanges = true」を削除してください。

これが機能する理由については、TransitionManager.beginDelayedTransition（）を呼び出すと、TransitionMangerが親ViewGroupの現在の値をキャプチャし、次のアニメーションフレームでアニメーションをレンダリングします。この場合に渡される遷移は AutoTransition であり、親ViewGroupのすべてのフェード、移動、およびサイズ変更を処理します。

Transitions および TransitionManager を参照してください

また、必要に応じてサポートライブラリのトランジションを使用するか、必要なAPIレベルのチェックを実行するように注意してください。

18
Tunji_D