仿探探左右滑动卡片的效果很多
http://ju.outofmemory.cn/entry/328946
这里,我是用的
https://github.com/xiepeijie/SwipeCardView
我的单词卡片功能,都是在这个项目上进行的修改
本Demo通过精确计算单词的位置,在onTouch中处理了点击事件,所以,“点击单词”触发跳转单词详情页和“按住单词滑动卡片”,这两者,不冲突。但是请注意,精确计算单词位置,和使用的布局是有关系的。有的布局就不能精确计算,只能给单词单独添加点击事件,这样,会出现,按住单词滑动,卡片不滑动的情况
为了更好的理解和使用,请详细读一下 下面的“使用相关说明”、“单词定位计算说明”
先上一些效果图:
1、APP首页
2、常规(满数据)“一卡多词”模式
3、数据不足“一卡五词”的情况
4、“一卡一词”,释义较短(没有超过一行)的情况
5、“一卡一词”释义较长,超过一行的情况
上图中,红黑线段说明:
1、一卡多词模式,用于标明,单词展示区域,即:点击横、竖线约束的区域,可以实现跳转到单词详情页
2、一卡一次模式,横线标明这段横向区域内可以触发点击事件,而竖线,是对横向区域的再次约束。
横向红线和竖向红线,是单词的展示区域;横向红线和竖向黑线,是释义的展示区域
特别说明:此Demo有2个明显缺点
1、不支持卡片撤回。即:卡片划出去后,不支持将滑出的卡片撤回来
2、“一卡一次”模式下,“释义”区域的计算,有漏洞,只考虑了“释义没有超过一行”的情况。即:释义多行时,点击释义的接近底部的区域,是不会触发跳转详情页的事件。
这块,请自行修改。
在 DataUtil 中的 computeOneCardOneWordCoordinates 方法中,计算行数的位置
使用相关说明
1、当卡片有多层时,第一张下面的卡片,是缩小的,当第一张划出去,第二张随着滑动而放大到正常大小。如果不想要这个效果,
SwipeFlingAdapterView 下,
注释掉 adjustChildView、adjustChildrenOfUnderTopView这2个方法
2、如果想后面的卡片,缩小后,在第一张的底部漏出来一些,在布局中,需要设置
swipe:y_offset_step
如:
<......SwipeFlingAdapterView
android:id="@+id/swipe_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
swipe:min_adapter_stack="2"
swipe:max_visible="2"
swipe:y_offset_step="28dp"/>
3、卡片滑动灵敏度调整
FlingCardListener中,
/**
* 松开手指后,卡片滑出屏幕灵敏度调整规则
* <p>
* 1、左滑,增大leftBorder()方法中,"3.8"的值,可以减小灵敏度,让用户滑动更多距离,才会使得卡片移出屏幕
* <p>
* 2、右滑,减小rightBorder()方法中,"2.2"的值,可以减小灵敏度,让用户滑动更多距离,才会使得卡片移出屏幕
*/
public float leftBorder() {
return parentWidth / 3.8f;
}
public float rightBorder() {
return 2.2f * parentWidth / 3f;
}
4、关於单词点击。
如果给单词直接设置点击事件(setOnClickListener),那么,就不需要进行座标计算了。但是引发出一个问题,按住单词,滑动手指,卡片不会随之滑动。这是,因为,单词的点击事件,把滑动事件消费掉了。
其实,框架中,在onTouch中,已经判断处理过了,在一定范围内,会视为点击。
详见:
FlingCardListener -> onTouch -> resetCardViewOnStack -> mFlingListener.onClick
计算得到的定位数据的使用,在 FlingCardListener -> getWordIndex
最后,点击事件的回调,会回到卡片界面的onItemClicked
(本Demo中,是 CardActivity -> onItemClicked)
5、卡片界面(Demo中是CardActivity)
removeFirstObjectInAdapter 中,必须,必须,必须要有adapter?.remove(0)
否则,第一张滑出去后,后面的卡片,均无法滑动
单词定位计算说明:
1、关于状态栏等的计算,请看
DataUtil 中的 computeCardDataCoordinates
2、我现在的布局,大体是这样的:
不建议使用下面的形式布局,不然,很容易出现定位偏差
出现偏差的后果是,一卡多词时,单词区域计算错误,点击第4个单词的下半部分,会触发第5个单词的点击事件。
还有,如果卡片使用 .9等带阴影的背景图,根本不建议使用定位算法了。直接给单词加个点击事件吧,虽然会出现 “按住单词滑动,卡片不滑动”的问题,但是,至少整体功能是对的。且释义不能加点击事件,因为点击事件会消费滑动事件,点击的热区越大,能引起滑动的热区就越小。