滑动卡片式效果

Author Avatar
Felix 4月 30, 2015

##效果图

代码实现

静态布局

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

1
2
3
4
5
6
7
8
9
10
11
12
<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布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?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指定动画效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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.

1
2
3
4
5
6
7
8
9
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)

expand_less