美文网首页自定义viewAndroid技术知识Android知识
ImgCoverFlow——CoverFlow 列表的实现

ImgCoverFlow——CoverFlow 列表的实现

作者: 李世德Str | 来源:发表于2017-04-17 19:06 被阅读267次

    参考 ImageCoverFlow-master 修改的,使用 ImageView 来实现,可加载本地图片和网络图片等,使用方法与 LIST 一样,设置相应的控件、修改 imageCoverFlow 布局的参数即可。

    效果预览

    效果图

    ImgCoverFlow 效果图

    效果预览 GIF

    ImgCoverFlow 效果预览 GIF

    依赖

    JitPack 引入方法

    1. 在 Project 下的 build.gradle 添加
    allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }
    
    2. 在 Module 下的 build.gradle 添加
    dependencies {
        compile 'com.github.lishide:ImgCoverFlow:v1.0.1'
    }
    

    使用

    • 在 xml 中引用 CoverFlowView
    <com.img.coverflow.widget.CoverFlowView
        android:id="@+id/coverflow"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        imageCoverFlow:coverflowGravity="center_vertical"
        imageCoverFlow:coverflowLayoutMode="wrap_content"
        imageCoverFlow:reflectionGap="10dp"
        imageCoverFlow:reflectionHeight="30%"
        imageCoverFlow:visibleImage="3"/>
    

    属性说明
    CoverFlow 的 Gravity:imageCoverFlow:coverflowGravity="center_vertical"
    CoverFlow 的模式:imageCoverFlow:coverflowLayoutMode="wrap_content"
    倒影间隙:imageCoverFlow:reflectionGap="10dp"
    倒影高度:imageCoverFlow:reflectionHeight="30%"
    设置可见个数:imageCoverFlow:visibleImage="3"
    ...

    • 初始化 CoverFlowView,设置适配器、数据、监听器等
    coverFlowView = (CoverFlowView) findViewById(R.id.coverflow);
    
    coverFlowView.setAdapter(coverFlowAdapter);
    
    //给coverFlowView的TOPView添加点击事件监听
    coverFlowView.setOnTopViewClickListener(mOnTopViewClickListener);
    
    • 创建 Adapter,实现(implements)ICoverFlowAdapter,和正常的 Adapter 一样使用

    getData 方法中设置 item 的数据即可。

    • 更多
      • 向前一页
      coverFlowView.gotoPrevious();
      
      • 向后一页
      coverFlowView.gotoForward();
      
      • 获取最上面 Item 的 position
      int position = coverFlowView.getTopViewPosition();
      
      • 获取最上面 Item 的 View
      CoverFlowAdapter.Holder holder = (CoverFlowAdapter.Holder) coverFlowView.getTopView().getTag();
      

    ......


    就到这里,更多的细节,请参考 demo 和源码,传送门

    相关文章

      网友评论

      • dreamkid:你好,如何改成竖向的
        dreamkid:@李世德Str 已经实现了,谢谢你的思路
        dreamkid:@李世德Str 有什么思路吗。。我在搞这个
        李世德Str:@小何_cdf9 好吧,当时的需求是横向的,没考虑到竖向。。。
      • ddcb8f910f13:唯一的问题,怎样加载网络图片,
        李世德Str: @先生_不靠谱 setOnTopClickListener
        ddcb8f910f13:@李世德Str 有直接跳到指定item的方法么?我看了往前,往后的两个方法 ,doAnimator 最后都是转化为这个方法里了
        李世德Str: @先生_不靠谱 完全可以的,你可以使用任何加载网络图片的框架,比如glide。

      本文标题:ImgCoverFlow——CoverFlow 列表的实现

      本文链接:https://www.haomeiwen.com/subject/uyitzttx.html