Android项目在列表视图上滑动

时间:2014-03-18 11:34:05

标签: java android xml android-listview adapter

我已经在Android Listview上讨论这个主题了几天,我似乎没有把它弄好。我无法理解如何做到这一点。我已经尽可能地了解AdaptersBaseAdapter特别),但仍然无法想办法做到这一点。

我已经在网上搜索了相关信息,但没有得到它。

  • 我想要做的是:我想创建一个ListView 联系人。
  • 每行有3个水平部分:一张不变的照片,内容x和内容y(最后一张是在屏幕之外且不可见)
  • 我希望当用户滑动单个项目时 从右到左,内容(信息x)淡出。该 其他内容(包含信息Y)从屏幕外滑入, 从右到左的方向,同时。
  • 当用户 向后滑动(从左到右)内容y再次滑出 初始内容x淡入。

我不能这样做,所以我请你帮忙。 非常感谢您的时间和精力

2 个答案:

答案 0 :(得分:4)

将这样的动画添加到ListView是没有问题的,我在几分钟内为普通的非自定义ListView构建了这个解决方案,通常这种东西适用于任何ListView开箱即用,它只是一切在适配器中。我的答案中唯一缺少的是滑动检测,遗憾的是我现在还没有时间对其进行测试。但刷卡检测并不困难,如果你谷歌它,有很多例子。无论如何,如果您有任何疑问,请随时提出。

结果:
enter image description here

我正在使用带有ViewHolder模式的简单BaseAdapter,没什么特别的,我会发布getView方法,无论如何都要澄清:

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    if(getItemId(position) == TEST_VIEW_ID) {
        TestViewModel viewModel = (TestViewModel) getItem(position);

        TestRow row;
        if(convertView == null) {
            convertView = this.inflater.inflate(TestRow.LAYOUT, parent, false);
            row = new TestRow(convertView); // Here the magic happens
            convertView.setTag(row);
        }

        row = (TestRow) convertView.getTag();
        row.bind(viewModel);
    }

    return convertView;
}

在我的ViewHolder类中,这里称为TestRow我为动画创建了一些辅助方法,我将在下面进一步解释,但首先是TestRow的代码:

public class TestRow {

    public static final int LAYOUT = R.layout.list_item_test;

    public ImageView ivLogo;
    public TextView tvFadeOut;
    public TextView tvSlideIn;

    public TestRow(View view) {
        this.ivLogo = (ImageView) view.findViewById(R.id.ivLogo);
        this.tvFadeOut = (TextView) view.findViewById(R.id.tvFadeOut);
        this.tvSlideIn = (TextView) view.findViewById(R.id.tvSlideIn);

        this.ivLogo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // When the ImageView is clicked the animations are applied to the TextViews.
                if(tvFadeOut.getVisibility() == View.VISIBLE) {
                    fadeOutView(tvFadeOut);
                    slideInView(tvSlideIn);
                } else {
                    fadeInView(tvFadeOut);
                    slideOutView(tvSlideIn);
                }
            }
        });
    }

    public void bind(TestViewModel viewModel) {
        // Nothing to do here
    }
}

以下是我用于动画的辅助方法:

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

这些是我使用的动画片xml:

淡入:

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

淡出:

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

滑入:

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

滑出:

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

答案 1 :(得分:0)

在res / anim /(FOR ANIMATION PURPOSE)中使用此xml

这是从左到右的动画:

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

这是从右到左动画:

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

在您的编码使用意图中,从左到右:

this.overridePendingTransition(R.anim.animation_enter,
               R.anim.animation_leave);

在你的编码使用意图中,如从右到左

this.overridePendingTransition(R.anim.animation_leave,
                           R.anim.animation_enter);

对于自定义列表视图,您可以使用此代码: http://www.androidhive.info/2012/02/android-custom-listview-with-image-and-text/

抓住Gesture事件并应用动画,然后制作一个将在手势事件中显示消失的布局。


如果您正常使用而不是您想要的工作示例: https://github.com/47deg/android-swipelistview