Android自定义View仿探探卡片滑动效果

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交替来实现了视图的复用,这是这个控件的核心部分。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android仿探探卡片式滑动效果实现

    前言 第一次进入探探软件界面,就被这种通过卡片式滑动来选择"喜欢/不喜欢"的设计所吸引了.当时就非常想通过自己来实现这种仿探探式的效果,然而却没什么思路.不过毋庸置疑的是,这种效果的原理肯定和 ListView / RecyclerView 类似,涉及到 Item View 的回收和重用,否则早就因为大量的 Item View 而 OOM 了. 再到后来,看到许多大神也推出了同样仿探探效果的博客,从头到尾阅读下来,写得通俗易懂,基本上没什么问题.于是,实现仿探探效果的想法再次出现在脑海

  • Android实现横向滑动卡片效果

    最近项目上需要实现这样效果的一个页面,本来想找个现成的两下搞定,但是问了半天度娘也没招,索性自己琢磨琢磨(这里边也少不了同事的帮助),先把最终的效果图贴上: 理论上讲,其本质并不复杂,就是一个viewpager,但是第一次实现这样的效果还是要花些时间的,具体的代码如下: 主布局文件:activity_show_industry_list.xml,主要就是一个activity上放个viewpager,但是相对布局是关键 <?xml version="1.0" encoding=&q

  • Android自定义view仿iOS弹出框效果

    本文实例为大家分享了Android自定义view仿iOS弹出框的具体代码,供大家参考,具体内容如下 运行效果图 自定义对话框的使用,仿照ios.从底部弹出,类似pop窗口.包括消息.图片.列表及对话框. 好了,用法都会,直接贴上代码 1.layout布局文件 view_actionsheet.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="ht

  • Android自定义View仿微博运动积分动画效果

    自定义View一直是自己的短板,趁着公司项目不紧张的时候,多加强这方面的练习.这一系列文章主要记录自己在自定义View的学习过程中的心得与体会. 刷微博的时候,发现微博运动界面,运动积分的显示有一个很好看的动画效果.OK,就从这个开始我的自定义view之路! 看一下最后的效果图: 分数颜色,分数大小,外圆的颜色,圆弧的颜色都支持自己设置,整体还是和微博那个挺像的.一起看看自定义View是怎样一步一步实现的: 1.自定义view的属性: 在res/values/ 下建立一个attrs.xml ,

  • Android自定义View仿探探卡片滑动效果

    Android自定义View仿探探卡片滑动这种效果网上有很多人已经讲解了实现思路,大多都用的是RecyclerView来实现的,但是我们今天来换一种实现思路,只用一个自定义的ViewGroup来搞定这个实现. 下面我们先看一下实现的效果: 这个自定义View用法也很简单,首先从github上下载或者fork这个项目,在布局中添加: <com.liyafeng.view.swipecard.SwipeCardLayout android:id="@+id/scl_layout" a

  • Android自定义View 仿QQ侧滑菜单的实现代码

    先看看QQ的侧滑效果 分析一下 先上原理图(不知道能否表达的清楚 ==) -首先这里使用了 Android 的HorizontalScrollView 水平滑动布局作为容器,当然我们需要继承它自定义一个侧滑视图 - 这个容器里面有一个父布局(一般用LinerLayout,本demo用的是),这个父布局里面有且只有两个子控件(布局),初始状态菜单页的位置在Y轴上存在偏移这样可以就可以形成主页叠在菜单页的上方的视觉效果:然后在滑动的过程程中 逐渐修正偏移,最后菜单页和主页并排排列.原理搞清了实现起来

  • Android自定义View仿IOS圆盘时间选择器

    通过自定义view实现仿iOS实现滑动两端的点选择时间的效果 效果图 自定义的view代码 public class Ring_Slide2 extends View { private static final double RADIAN = 180 / Math.PI; private int max_progress; // 设置最大进度 private int cur_progress; //设置锚点1当前进度 private int cur_progress2; //设置锚点2进度 p

  • Android自定义View仿支付宝输入六位密码功能

    跟选择银行卡界面类似,也是用一个PopupWindow,不过输入密码界面是一个自定义view,当输入六位密码完成后用回调在Activity中获取到输入的密码并以Toast显示密码.效果图如下: 自定义view布局效果图及代码如下: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/

  • Android 自定义view仿支付宝咻一咻功能

    支付宝上有一个咻一咻的功能,就是点击图片后四周有水波纹的这种效果,今天也写一个类似的功能. 效果如下所示: 思路: 就是几个圆的半径不断在变大,这个可以使用动画缩放实现,还有透明动画 还有就是这是好几个圆,然后执行的动画有个延迟效果,其实这些动画是放在一起执行的,熟悉属性动画的知道已经给我们提供了同步执行动画和顺序执行动画的实现api,也会会有人说这几个view就是在onDraw()方法中画几个圆,可能会说我还要继承容器view去onLayout()方法中这些子view添加在某个特定的区域,当然

  • Android 自定义view仿微信相机单击拍照长按录视频按钮

    Android仿微信相机的拍照按钮单击拍照,长按录视频.先上效果图. 项目地址:https://github.com/c786909486/PhotoButton2/tree/v1.0 添加依赖 allprojects { repositories { ... maven { url 'https://jitpack.io' } } } dependencies { compile compile 'com.github.c786909486:PhotoButton2:v1.1' } 长按效果分

  • Android自定义view仿QQ的Tab按钮动画效果(示例代码)

    话不多说 先上效果图 实现其实很简单,先用两张图 一张是背景的图,一张是笑脸的图片,笑脸的图片是白色,可能看不出来.实现思路:主要是再触摸view的时候同时移动这两个图片,但是移动的距离不一样,造成的错位感,代码很简单: import android.content.Context import android.graphics.* import android.util.AttributeSet import android.view.MotionEvent import android.vi

  • Android自定义View实现loading动画加载效果

    项目开发中对Loading的处理是比较常见的,安卓系统提供的不太美观,引入第三发又太麻烦,这时候自己定义View来实现这个效果,并且进行封装抽取给项目提供统一的loading样式是最好的解决方式了. 先自定义一个View,继承自LinearLayout,在Layout中,添加布局控件 /** * Created by xiedong on 2017/3/7. */ public class Loading_view extends LinearLayout { private Context m

随机推荐