美文网首页自定义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 和源码,传送门

相关文章

  • ImgCoverFlow——CoverFlow 列表的实现

    参考 ImageCoverFlow-master 修改的,使用 ImageView 来实现,可加载本地图片和网络图...

  • coverFlow效果

    实现cover flow效果,滚动中间放大, 处于中间位置的图片亮度和大小都突出于旁边的图片。当滑动cover f...

  • Flutter 学习:动态列表两种实现方式

    一.复习上一节 列表组件 二.动态列表 动态列表实现有两种 1.for循环实现 build实现 三.for循环实现...

  • 2018-11-12 小程序wx:for横向列表布局

    问题 我们知道,wx:for可以实现列表布局,但是默认实现的是纵向列表布局,如歌实现横向列表布局呢? 解决 直接设...

  • 用HTML来写列表

    考虑用html如何实现以下列表: 要实现的是有序列表和无序列表以及嵌套列表的结合 有序列表: 定义和用法: ...

  • 2019-02-28第3次 列表

    第3次 列表 知识点 会使用有序列表实现数据展示 会使用无序列表实现数据展示【重点】 会使用定义列表实现数据展示【...

  • 列表的实现

    写这个的时候主要是用 与 相互嵌套做的. 第一步先用 实现最外层的列表. 结果如下: 第二步在JavaScript...

  • 聚美优品美容热点(盒子模型)

    题目 需求说明 (1) . 使用无序列表制作美容品列表 (2) . 列表图标使用背景图像实现 实现效果 实现思路 ...

  • 超简单实现iOS列表的索引功能

    超简单实现iOS列表的索引功能 超简单实现iOS列表的索引功能

  • iOS 套装

    tapkulibrary 一套比较大的自定义控件库 包括不错的HUD,进度条,日历,CoverFlow等 Fla...

网友评论

  • 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