滑动卡片式效果

滑动卡片式效果

效果图

代码实现

静态布局

使用瀑布流效果的StaggeredGridView控件作为GroupView.

    <com.etsy.android.grid.StaggeredGridView
    android:id="@+id/page"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:column_count="1"
    app:item_margin="8dp"
    >

    </com.etsy.android.grid.StaggeredGridView>

定义item布局

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="@drawable/card_bg"
              android:descendantFocusability="blocksDescendants"
              android:orientation="vertical"
              android:padding="8dp"
    >

    <TextView
        android:id="@+id/tv_caption"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="caption"
        android:textSize="20sp"
        android:textStyle="normal"
        />

    <ImageView
        android:id="@+id/iv_normal"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="#c9c9c9"
        android:minHeight="200dp"
        android:scaleType="centerCrop"
        />

    </LinearLayout>

动画实现

这里需要使用listviewanimationsnineoldandroids两个有关动画效果的库,继承AnimationAdapter自定义CardsAnimationAdapter,覆写public Animator[] getAnimators(ViewGroup viewGroup, View view)方法,为每个view指定动画效果。

    public class CardsAnimationAdapter extends AnimationAdapter {


    private float mTranslationY = 400;
    private float mRotationX = 15;
    private long mDuration = 400;
    private long mDelay = 30;

    public CardsAnimationAdapter(BaseAdapter baseAdapter) {
        super(baseAdapter);
    }

    @Override
    protected long getAnimationDelayMillis() {
        return mDelay;
    }

    @Override
    protected long getAnimationDurationMillis() {
        return mDuration;
    }

    @Override
    public Animator[] getAnimators(ViewGroup viewGroup, View view) {
        return new Animator[]{
                ObjectAnimator.ofFloat(view, "translationY", mTranslationY, 0),
                ObjectAnimator.ofFloat(view, "rotationX", mRotationX, 0)
        };
    }

    }

将原生的adapter装饰成带有动画效果的CardsAnimationAdapter.

        private StaggeredGridView mPage;
        mPage = (StaggeredGridView) findViewById(R.id.page);

        mAdapter=new PageAdapter(this, imgIds);
        AnimationAdapter animationAdapter = new CardsAnimationAdapter(mAdapter);
        animationAdapter.setAbsListView(mPage);

        mPage.setAdapter(animationAdapter);

完整代码

github

参考

9GAG-Android (unofficial)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林冠宏的技术文章

android 在使用ViewAnimationUtils.createCircularReveal()无法兼容低版本的情况下,另行实现圆形scale动画

ViewAnimationUtils.createCircularReveal()的简介:       ViewAnimationUtils.createCir...

2455
来自专栏Android机动车

轻松实现右滑关闭当前Activity

常常可以看到,很多Android应用都有这么一个功能,就是滑动关闭Activity,比如微信,CSDN移动端,百度贴吧移动端等。我自己也想写个滑动关闭Activ...

861
来自专栏Android Note

Android - ViewDragHelper实现京东、淘宝拖拽详情

1644
来自专栏三好码农的三亩自留地

教你搞定Android自定义ViewGroup

我们知道ViewGroup就是View的容器类,我们经常用的LinearLayout,RelativeLayout等都是ViewGroup的子类,因为ViewG...

771
来自专栏Jack的Android之旅

模仿企鹅FM播放主页面滑动动态改变各视图的大小

国庆的一个任务就是把自己之前写的代码搬到博客。这次给各位带来的是通过滑动来动态改变各个View的大小进而达到企鹅FM播放页面的滑动效果(仅仅是滑动效果),老规矩...

1042
来自专栏Android常用基础

自定义View(七)-View的工作原理- Activity的布局加载

前面几篇对动画可以说是做了非常全面的总结了(上篇文章最后的4种ViewGroup相关动画相信在了解基础后看些文章也不会太难理解)。在View的工作原理 这一部分...

1723
来自专栏Android点滴积累

获取View的截图-将View转换为Bitmap对象

开发中,有时候需要获取View的截图来做动画来达到动画流程的目的 原理:将View的内容画到一个Bitmap画布上,然后取出 下面封装了一个从View生成Bit...

2089
来自专栏移动开发

一个可以在界面顶部展现的自定义 View

这个源码十分简单,没啥可说的.只有一点提一下,看到有些控件达到背景色的效果,是动态填加一个带背景色父布局实现的.

973
来自专栏向治洪

android自定义view实现progressbar的效果

一键清理是很多Launcher都会带有的功能,其效果也比较美观。实现方式也许有很多中,其中常见的是使用图片drawable来完成的,具体可以参考这篇文章:模仿实...

2845
来自专栏移动开发的那些事儿

Android界面绘制原理

从普遍的意义上来讲,以上这段代码就是设置WindowManager和DecorView的关系,继续看:

1621

扫码关注云+社区

领取腾讯云代金券