单词卡功能实现

仿探探左右滑动卡片的效果很多

http://ju.outofmemory.cn/entry/328946

这里,我是用的

https://github.com/xiepeijie/SwipeCardView

我的单词卡片功能,都是在这个项目上进行的修改

单词卡功能Demo地址

本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等带阴影的背景图,根本不建议使用定位算法了。直接给单词加个点击事件吧,虽然会出现 “按住单词滑动,卡片不滑动”的问题,但是,至少整体功能是对的。且释义不能加点击事件,因为点击事件会消费滑动事件,点击的热区越大,能引起滑动的热区就越小。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章