html5 coverflow,使用FancyCoverFlow实现3D无限循环切换视图

FancyCoverFlow重写了gallery实现了画廊特效。这里记录下具体的使用方法：

1 在布局文件中添加控件

android:id="@+id/fancy_cover"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:padding="0dp"

/>

2 更具视图的需要，可以对FancyCoverFlow控件的显示效果进行修改。

fancyCover = (FancyCoverFlow) findViewById(R.id.fancy_cover);

fancyCover.setAdapter(new FancyCoverFlowAdapter() {

@Override

public View getCoverFlowItem(int position, View reusableView, ViewGroup parent) {

ImageView iv = new ImageView(mContext);

Gallery.LayoutParams params = new Gallery.LayoutParams((int) (AppUtil.getScreenSize(mContext, 0) / 3 - AppUtil.dpToPixel(10)), (int) (AppUtil.getScreenSize(mContext, 1) / 3 - AppUtil.dpToPixel(10)));

iv.setLayoutParams(params);

iv.setImageResource(R.drawable.lena);

return iv;

}

@Override

public int getCount() {

//实现无限循环，设置count为最大值

return Integer.MAX_VALUE;

}

@Override

public Object getItem(int position) {

return dataSet.get(position % dataSet.size());

}

@Override

public long getItemId(int position) {

return 0;

}

});

fancyCover.setUnselectedAlpha(0.0f);

//未选中时的缩放比例

fancyCover.setUnselectedScale(0.5f);

fancyCover.setSpacing(45);

fancyCover.setMaxRotation(0);

//未选择项的下对齐比例 0f：上对齐 0.5f：居中对齐 1f：下对齐

fancyCover.setScaleDownGravity(0.5f);

fancyCover.setActionDistance(FancyCoverFlow.ACTION_DISTANCE_AUTO);

3 实现的效果如下：

1.jpg

2.jpg

存在的问题：

滑动过程中有边框线显示出来了。

解决方案：

将布局文件设定固定的高度：

android:id="@+id/fancy_cover"

android:layout_width="200dp"

android:layout_height="200dp"

android:layout_marginTop="10dp"

android:padding="0dp"

/>

这样在滑动过程中就不会出现虚线框了。