Android自定义View仿探探卡片滑动效果
程序员文章站
2022-03-23 13:49:43
android自定义view仿探探卡片滑动这种效果网上有很多人已经讲解了实现思路,大多都用的是recyclerview来实现的,但是我们今天来换一种实现思路,只用一个自定义...
android自定义view仿探探卡片滑动这种效果网上有很多人已经讲解了实现思路,大多都用的是recyclerview来实现的,但是我们今天来换一种实现思路,只用一个自定义的viewgroup来搞定这个实现。
下面我们先看一下实现的效果:
这个自定义view用法也很简单,首先从github上下载或者fork这个项目,在布局中添加:
<com.liyafeng.view.swipecard.swipecardlayout android:id="@+id/scl_layout" android:layout_width="match_parent" android:layout_height="match_parent"/>
是的,没有一点废话,自定义属性可以根据自己的需求来添加。下面是代码中初始化:
public class swipecardactivity extends activity { @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_swipe_card); swipecardlayout scl_layout=(swipecardlayout)findviewbyid(r.id.scl_layout); queue<cardentity> data = new linkedlist<>(); cardentity cardentity1 = new cardentity(r.drawable.f1, "这里是美丽的湖畔"); cardentity cardentity2 = new cardentity(r.drawable.f2, "这里游泳比较好"); cardentity cardentity3 = new cardentity(r.drawable.f3, "向往的蓝天白云"); cardentity cardentity4 = new cardentity(r.drawable.f4, "繁华的都市"); cardentity cardentity5 = new cardentity(r.drawable.f5, "草原象征着理想"); data.add(cardentity1); data.add(cardentity2); data.add(cardentity3); data.add(cardentity4); data.add(cardentity5); scl_layout.setadapter(new swipecardlayout.cardadapter<cardentity>(data) { @override public view bindlayout() { return layoutinflater.from(swipecardactivity.this).inflate(r.layout.card_layout,null); } @override public void binddata(cardentity data, view convertview) { imageview iv_card = (imageview)convertview.findviewbyid(r.id.iv_card); textview tv_card = (textview) convertview.findviewbyid(r.id.tv_card); iv_card.setimageresource(data.resid); tv_card.settext(data.content); } }); scl_layout.setonswipelistener(new swipecardlayout.onswipelistener() { @override public void onswipe(int type) { switch (type) { case swipecardlayout.type_right: toast.maketext(swipecardactivity.this, "right", toast.length_short).show(); break; case swipecardlayout.type_left: toast.maketext(swipecardactivity.this, "left", toast.length_short).show(); break; } } }); } class cardentity { public cardentity(int resid, string content) { this.resid = resid; this.content = content; } public int resid; public string content; } }
这里必须要用一个队列来添加数据,显示的顺序就是队列的顺序。完整的代码已经上传github
接下来简单说一下实现原理,我们用两个自定义的viewgroup来定义两个card,一个在上,一个在下,且重写它的ontouchevent()方法,来实现跟随手指来滑动。当我们松开手指的时候,如果card移动的距离短,那么就执行动画将card重置到原来位置,如果移动的距离比较远,我们就执行动画将card移出屏幕,当动画结束后,我们将下面的card通过view的bringtofront()方法移动到上层,而刚刚移出屏幕的那个card就会到下层,然后再将它重置到起始位置即可。
这样我们通过两个card交替来实现了视图的复用,这是这个控件的核心部分。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 【设计模式】Adapter