Android CardView不正确的动画

Question

在实现CardView并尝试将动画应用于箭头文本视图后，当单击箭头时，动画显示异常行为。如何修复动画并获得与预期动画图像相似的结果？

预期动画

当前动画

回收视图项目

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?android:attr/selectableItemBackground"
    android:id="@+id/cv"
    android:layout_marginBottom="20dp"
    >

    <LinearLayout
        android:id="@+id/cardview_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp"
        android:animateLayoutChanges="true">

        <LinearLayout
            android:id="@+id/cardview_titlerow"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginBottom="2dp"
            android:weightSum="100">

            <TextView
                android:id="@+id/tv_A"
                android:layout_weight="90"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                style="@android:style/TextAppearance.Medium" />

            <TextView
                android:id="@+id/tv_expandcollapsearrow"
                android:clickable="true"
                android:focusable="true"
                android:layout_weight="10"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="10dp"
                android:textColor="@android:color/white"
                style="@android:style/TextAppearance.Medium" />
        </LinearLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            >

            <TextView
                android:id="@+id/tv_B"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="@android:style/TextAppearance.Large"
                />

        </RelativeLayout>

    </LinearLayout>
</android.support.v7.widget.CardView>

MyRecyclerAdapter。JAVA

public class MyRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {

    private static final int TYPE_HEADER = 0;
    private static final int TYPE_ITEM = 1;

    private Context mContext;

    RecyclerViewHeader header;
    List<MyRecyclerItem> listItems;


    private Animation animationCollapse;
    private Animation animationExpand;

    public MyRecyclerAdapter(Context context, RecyclerViewHeader header, List<MyRecyclerItem> listItems)
    {
        this.mContext = context;
        this.header = header;
        this.listItems = listItems;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(viewType == TYPE_HEADER)
        {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.recyclerview_header_expandcollapsebuttons, parent, false);
            return new MyRecyclerAdapter.VHHeader(v);
        }
        else if(viewType == TYPE_ITEM)
        {
            View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.recyclerview_item, parent, false);
            return new MyRecyclerAdapter.VHItem(v);
        }
        throw new RuntimeException("there is no type that matches the type " + viewType + " + make sure your using types correctly");
    }

    private MyRecyclerItem getItem(int position)
    {
        return listItems.get(position);
    }


    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        final Typeface iconFont = FontManager.getTypeface(mContext, FontManager.FONTAWESOME);

        if (holder instanceof VHHeader)
        {
            VHHeader VHheader = (VHHeader)holder;
        }
        else if (holder instanceof VHItem)
        {
            RecyclerViewListItemTransportConnections currentItem = getItem(position-1);
            final VHItem VHitem = (VHItem)holder;

            VHitem.txtA.setText(currentItem.getConnectionMode());
            VHitem.txtB.setText(currentItem.getConnectionName());

            VHitem.txtB.setVisibility(View.GONE);


            VHitem.txtExpandCollapseArrow.setText(R.string.fa_icon_chevron_down);
            VHitem.txtExpandCollapseArrow.setTypeface(iconFont);

            VHitem.txtExpandCollapseArrow.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (VHitem.txtB.getVisibility() == View.VISIBLE) {
                        VHitem.txtB.setVisibility(View.GONE);

                        RotateAnimation rotate = new RotateAnimation(180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                        rotate.setDuration(300);
                        rotate.setInterpolator(new LinearInterpolator());

                        VHitem.txtExpandCollapseArrow.startAnimation(rotate);

                        VHitem.txtExpandCollapseArrow.setText(R.string.fa_icon_chevron_down);
                    } else {
                        VHitem.txtB.setVisibility(View.VISIBLE);

                        RotateAnimation rotate = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
                        rotate.setDuration(300);
                        rotate.setInterpolator(new LinearInterpolator());

                        VHitem.txtExpandCollapseArrow.startAnimation(rotate);


TransitionManager.beginDelayedTransition(VHitem.cardview);

VHitem.txtExpandCollapseArrow.setText(R.string.fa_icon_chevron_up);
                    }
                }
            });
        }
    }

    @Override
    public int getItemViewType(int position) {
        if(isPositionHeader(position))
            return TYPE_HEADER;
            return TYPE_ITEM;
    }

    private boolean isPositionHeader(int position)
    {
        return position == 0;
    }

    @Override
    public int getItemCount() {
        return listItems.size()+1;
    }

    class VHHeader extends RecyclerView.ViewHolder{
        public VHHeader(View itemView) {
            super(itemView);
        }
    }

    class VHItem extends RecyclerView.ViewHolder{
        CardView cardview;
        TextView txtExpandCollapseArrow, txtA, txtB;

        public VHItem(View itemView) {
            super(itemView);

            this.cardview = itemView.findViewById(R.id.cv);

            this.txtExpandCollapseArrow = itemView.findViewById(R.id.tv_expandcollapsearrow);

            this.txtA = itemView.findViewById(R.id.tv_A);
            this.txtB = itemView.findViewById(R.id.tv_B);
        }
    }
}

苏拉布的建议

Answer 1

预期的动画似乎是一个矢量可绘制动画，而您所遵循的方法将为视图而不是可绘制动画设置动画。

您需要使用动画矢量drawable来实现所需的结果。

Answer 2

一种更简单的方法是设置可隐藏视图的可见性，并使用TransitionManager设置这些布局更改的动画。

TransitionManager.beginDelayedTransition(rootView) 
// rootView can be the container view of all cards

这将考虑增加卡的高度和减弱这些视图。我不确定它是否也能旋转箭头，但你可以试试。或者你也可以使用RotateAnimation