为选定的列表视图项目滑动动画

时间:2016-12-16 04:47:48

标签: android listview android-animation slideup

我有一个列表视图。我想添加一个动画,如果我选择一个列表项,那么它将被删除,并且该项下面的其余项目将向上移动,并带有向上滑动动画。通过获取其子位置,我已经通过线性布局完成了这项工作,但我无法理解如何滑动listview的其余元素。请帮忙

以下是动态创建线性布局动画的代码

    plus.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {


            Animation animation1 = AnimationUtils.loadAnimation(getActivity(), R.anim.move);
            final Animation animation2 = AnimationUtils.loadAnimation(getActivity(), R.anim.moveup);

这是我们点击

的项目的动画
            lay1.startAnimation(animation1);

这是动画休息儿童向上滑动的代码

            final int i = lay1.getId() + 1;


            final Handler handler = new Handler();
            handler.postDelayed(new Runnable() {
                @Override
                public void run() {
                    //Do something after 100ms

                    try {
                        LinearLayout l = (LinearLayout)                       layoutall.getChildAt(i);
                        l.startAnimation(animation2);
                        layoutall.removeView(lay1);
                    } catch (Exception e) {

                        //connectToDatabase();
                    }
                }
            }, 600);

更新代码 非常感谢。我能够实现这个功能,但问题是我在一个列表视图中使用了两个动​​画但是无法实现第一个动画。

点击

我要向左侧滑动的列表项的代码
       viewHolder.accept.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                removeListItem(viewHolder.order_card_layout, position);

            }
        });

动画代码是

      protected void removeListItem(final View rowView, final int positon) {
    // TODO Auto-generated method stub


    final Animation animation = AnimationUtils.loadAnimation(rowView.getContext(), R.anim.move);
    rowView.startAnimation(animation);

    Animation.AnimationListener al = new Animation.AnimationListener() {
        @Override
        public void onAnimationEnd(Animation arg0) {

            ViewHolder vh = (ViewHolder) rowView.getTag();
            //vh.needInflate = true;

        }
        @Override public void onAnimationRepeat(Animation animation) {}
        @Override public void onAnimationStart(Animation animation) {}
    };


    collapse(rowView, al);

}

但问题是我的第一个动画无法正常滑动

    final Animation animation = AnimationUtils.loadAnimation(rowView.getContext(), R.anim.move);
    rowView.startAnimation(animation);

新更新的代码  我能够实现这个功能,但问题是我已经使用了两个动​​画,并且想要在我点击的那个项目上做第一个动画,在所点击的项目下面的所有列表项目上做另一个动画。但我的问题是该项目在哪个我点击向右滑动它也会重新出现并向上滑动整个列表,但我想要点击的项目将向右滑动,其余部分将向上滑动。

点击

我要向左侧滑动的列表项的代码
       viewHolder.accept.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                removeListItem(viewHolder.order_card_layout, position);

            }
        });

动画代码是

protected void removeListItem(final view rowView,final int positon){         // TODO自动生成的方法存根

    final Animation animation = AnimationUtils.loadAnimation(rowView.getContext(), R.anim.move);
    rowView.startAnimation(animation);


    final Handler handler = new Handler();
    handler.postDelayed(new Runnable() {
        @Override
        public void run() {
            //Do something after 100ms

            try {


                Animation.AnimationListener al = new Animation.AnimationListener() {
                    @Override
                    public void onAnimationEnd(Animation arg0) {

                        ViewHolder vh = (ViewHolder) rowView.getTag();
                        //vh.needInflate = true;

                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {
                    }

                    @Override
                    public void onAnimationStart(Animation animation) {
                    }
                };


                collapse(rowView, al);


            } catch (Exception e) {

                //connectToDatabase();
            }
        }
    }, 600);





}






            private void collapse(final View v, Animation.AnimationListener al) {
    final int initialHeight = v.getMeasuredHeight();

    Animation anim = new Animation() {
        @Override
        protected void applyTransformation(float interpolatedTime, Transformation t) {
            if (interpolatedTime == 1) {
                v.setVisibility(View.GONE);
            }
            else {
                v.getLayoutParams().height = initialHeight - (int)(initialHeight * interpolatedTime);
                v.requestLayout();
            }
        }

        @Override
        public boolean willChangeBounds() {
            return true;
        }
    };

    if (al!=null) {
        anim.setAnimationListener(al);
    }
    anim.setDuration(600);
    v.startAnimation(anim);
}

2 个答案:

答案 0 :(得分:1)

以下是与您的要求相关的代码,请尝试此操作

https://github.com/paraches/ListViewCellDeleteAnimation

下载代码并运行它。

如果您想观看演示而不是观看此视频,

http://www.youtube.com/watch?v=bOl5MIti7n0

答案 1 :(得分:0)

这是Code,我正在实现这两个动画。

1)从右侧滑动,同时单击列表视图项目 - 单击。

2)点击“删除按钮”时,列表视图中剩余行的上滑动画(已经在我给出的链接中完成)。

将以下文件复制到您的动画文件夹。

1)fade_out.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <alpha
        android:duration="700"
        android:fromAlpha="1"
        android:toAlpha="0" />
</set>

2)fade_in.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <alpha
        android:duration="700"
        android:fromAlpha="0"
        android:toAlpha="1" />
</set>

3)slide_in_right.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:duration="700"
        android:fromXDelta="100%"
        android:toXDelta="0%" />
</set>

4)slide_out_right.xml:

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:duration="700"
        android:fromXDelta="0%"
        android:toXDelta="100%" />
</set>

现在将以下方法和类添加到您的活动中,

//Animation
    private void fadeOutView(View view) {
        Animation fadeOut = AnimationUtils.loadAnimation(view.getContext(), R.anim.fade_out);
        if (fadeOut != null) {
            fadeOut.setAnimationListener(new ViewAnimationListener(view) {
                @Override
                protected void onAnimationStart(View view, Animation animation) {

                }

                @Override
                protected void onAnimationEnd(View view, Animation animation) {
                    view.setVisibility(View.GONE);
                }
            });
            view.startAnimation(fadeOut);
        }
    }

    private void fadeInView(View view) {
        Animation fadeIn = AnimationUtils.loadAnimation(view.getContext(), R.anim.fade_in);
        if (fadeIn != null) {
            fadeIn.setAnimationListener(new ViewAnimationListener(view) {
                @Override
                protected void onAnimationStart(View view, Animation animation) {
                    view.setVisibility(View.VISIBLE);
                }

                @Override
                protected void onAnimationEnd(View view, Animation animation) {

                }
            });
            view.startAnimation(fadeIn);
        }
    }

    private void slideInView(View view) {
        Animation slideIn = AnimationUtils.loadAnimation(view.getContext(), R.anim.slide_in_right);
        if (slideIn != null) {
            slideIn.setAnimationListener(new ViewAnimationListener(view) {
                @Override
                protected void onAnimationStart(View view, Animation animation) {
                    view.setVisibility(View.VISIBLE);
                }

                @Override
                protected void onAnimationEnd(View view, Animation animation) {

                }
            });
            view.startAnimation(slideIn);
        }
    }

    private void slideOutView(View view) {
        Animation slideOut = AnimationUtils.loadAnimation(view.getContext(), R.anim.slide_out_right);
        if (slideOut != null) {
            slideOut.setAnimationListener(new ViewAnimationListener(view) {
                @Override
                protected void onAnimationStart(View view, Animation animation) {

                }

                @Override
                protected void onAnimationEnd(View view, Animation animation) {
                    view.setVisibility(View.GONE);
                }
            });
            view.startAnimation(slideOut);
        }
    }

    private abstract class ViewAnimationListener implements Animation.AnimationListener {

        private final View view;

        protected ViewAnimationListener(View view) {
            this.view = view;
        }

        @Override
        public void onAnimationStart(Animation animation) {
            onAnimationStart(this.view, animation);
        }

        @Override
        public void onAnimationEnd(Animation animation) {
            onAnimationEnd(this.view, animation);
        }

        @Override
        public void onAnimationRepeat(Animation animation) {

        }

        protected abstract void onAnimationStart(View view, Animation animation);

        protected abstract void onAnimationEnd(View view, Animation animation);
    }

现在,如果要在List Item上显示动画,请单击,然后在Adapter类中为动画提供动画,其中为listView充气raw_layout。

5)raw_layout.xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:id="@+id/linLayout">

    <ImageButton
        android:id="@+id/cell_trash_button"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/trash_can"
        android:scaleType="fitXY" />

    <TextView
        android:id="@+id/cell_name_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|left"
        android:layout_marginLeft="16dp"
        android:layout_weight="1"
        android:text="cell name" />

</LinearLayout>

6)最后在适配器的getView()方法中将动画应用于raw_layout的父布局。在布局上点击。我的父布局为raw_layout是LinearLayout,其ID为 linLayout

vh.linLayout.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View view) {
                    if (vh.linLayout.getVisibility() == View.VISIBLE) {
                        fadeOutView(vh.linLayout);
                        slideInView(vh.linLayout);
                    } else {
                        fadeInView(vh.linLayout);
                        slideOutView(vh.linLayout);
                    }
                }
            });

我试过这个和它的工作。所以试一试!!