滑動卡片式效果
效果圖
代碼實現
靜態佈局
使用瀑布流效果的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);