滑动卡片式效果

felix

发布于 2018-06-08 11:29:26

2.3K0

发布于 2018-06-08 11:29:26

文章被收录于专栏：Felix的技术分享Felix的技术分享

滑动卡片式效果

效果图

代码实现

静态布局

使用瀑布流效果的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>

动画实现

这里需要使用listviewanimations和nineoldandroids两个有关动画效果的库，继承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);