Code Monkey home page Code Monkey logo

cardslidepanel's Introduction

有图有真相

模仿探探首页的卡片滑动效果:

preview 不得不说,探探的ui效果真的很赞。在着手这个project之前,我没有参考过github上其它类似的开源项目。所以,如果这个project重复造了轮子,请不要打我。

在这个仓库竣工之时,有一个小伙伴发了我另一个开源工程,颇有相似之处。我下载了源码,导入了studio,apk跑起来的时候,发现它存在一些问题:卡片飞到两侧,如果动画没有结束,则不允许下一轮拖动。这对强迫症的用户来说,应该是很不爽的。

然而,探探却克服了所有这些问题。或许,这个问题只有积淀过这些知识点的人才能琢磨的透吧。我确实思考了很久,想到了一个还不错的方案。

无耻一点

如果我能不要脸一些,我会说这个项目有以下优点:

  • 快。真的流畅,滑动的手速再快也赶不上代码刷新view的速度快。
  • 高效。仅仅四个卡片view轻松搞定任意多的数据。
  • 灵活。自定义ViewGroup对卡片view的高度实现了自适应。
  • 细节。卡片之间联动的视觉效果,是像素级的精确。

不信,你下载下来look look。

使用方法

1. 在xml文件中引入CardSlidePanel

<com.stone.card.library.CardSlidePanel
        android:id="@+id/image_slide_panel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        card:bottomMarginTop="38dp"
        card:itemMarginTop="10dp"
        card:yOffsetStep="13dp" />

2. 左右滑动监听

cardSwitchListener = new CardSlidePanel.CardSwitchListener() {

        @Override
        public void onShow(int index) {
            Log.d("Card", "正在显示-" + dataList.get(index).userName);
        }

        @Override
        public void onCardVanish(int index, int type) {
            Log.d("Card", "正在消失-" + dataList.get(index).userName + " 消失type=" + type);
        }
};
slidePanel.setCardSwitchListener(cardSwitchListener);

3. 绑定Adapter

slidePanel.setAdapter(new CardAdapter() {
        @Override
        public int getLayoutId() {
            // layout文件
            return R.layout.card_item;
        }

        @Override
        public int getCount() {
            // 卡片个数
            return dataList.size();
        }
        
        @Override
        public Rect obtainDraggableArea(View view) {
            // 可滑动区域定制,仅调用一次
            return new Rect(....)
        }

        @Override
        public void bindView(View view, int index) {
            // 数据绑定,参看demo
            viewHolder.bindData(dataList.get(index));
        }
});

4. 数据更新

// appendDataList
adapter.notifyDataSetChanged();

Demo安装包

apk download (就在thisProj工程之中)

License

Copyright 2016, xmuSistone

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

cardslidepanel's People

Contributors

xmusistone avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cardslidepanel's Issues

怎么添加点击事件?

怎么为每一张卡片里面的内容添加点击事件?而且是最上面的卡片才能有点击事件,大神求教,不太会弄。

ScrollView嵌套

如果嵌套在ScrollView中,怎么区分两个的滑动事件呢?

android studio导入问题

导入这个项目的时候,提示此工程不是基于gradle build的工程,请问怎么解决啊

能滑动回来的card

如题,我想做一个能滑动回来的card,例如上滑是下一张,下滑是上一张,有思路没

How add CardItemView dinamically

Hi
I'm using your library.I have one question.Is it a possible to add dinamically CardItemView view in CardSlidePanel.In this example you use static array,but i have json and different size array.
I tried to remove some elements in you arrayList ,but i have IndexOf exceplion

倾斜度问题

在滑动的时候能否横着滑动,这个demo只能左上,左下,右上,右下滑动,

这里不知道如何修改,求大神指点

定制性太差了,希望有所改,关注中

整体缺少控件的意味,应该滑动是这个卡片,点击事件都应该与控件分开,也不应该与下面的按钮连在一起,最好还是来个RecyclerView.adapter适配器,重用性也高,没有其他意思,只是希望好东西应该要更好才对!

港真,发现一个问题

“无耻一点

如果我能不要脸一些,我会说这个项目有以下优点:

快。真的流畅,滑动的手速再快也赶不上代码刷新view的速度快。
高效。仅仅四个卡片view轻松搞定任意多的数据。
灵活。自定义ViewGroup对卡片view的高度实现了自适应。
细节。卡片之间联动的视觉效果,是像素级的精确。
不信,你下载下来look看看。”

最后这句话“不信,你下载下来look看看。”是个病句哇,如果翻译的话:不信,你下载下来看看看看。。。这个很显然不符合本项目的文风呐。。所以是不是可以考虑改成“不信,你下载下来look look”。。。

CardSlidePanel center position

Hi
Is it a possible to add CardSlidePanel center position ?
I tried to increase itemMarginTop (default value is 10) under 100 ,but scroll did not work when itemMarginTop is 100.
is it a possible to add CardSlidePanel all Screen divice?

viewItem.layout(viewLeft, itemMarginTop, viewLeft + viewItem.getMeasuredWidth(), itemMarginTop + childHeight);

Adapter & Gradle 引用

博主你好,为了使用方便,我把CardItemView的逻辑抽取出来,通过adpater来处理,然后暂时把包上传到了jcenter上(现在应该还在审核),如果你觉得这样可行,我将发起一个pull request
项目地址

非issues

我是来问QQ群号的(手动滑稽)!!!

滑动时候的bug

当我第一根手指滑动上面的卡片的时候,滑动到上面不松手,然后用另外一只手的手指滑动下面那张卡片,这个是整个页面就乱套了

动画

大神啊,我没看出来动画在哪儿做的~我想改变一下飞出动画,
还有个问题就是如何才能做到吧页面划回来呢?

如何设置卡片的click事件

你好,看了你的代码,受益匪浅,我想在demo上尝试设置点击card的事件,用了很多方法�都响应不到,能否指点一下。

我把这里的逻辑改成了这样

    // 5. 更新showIndex、接口回调
        isShowing++;
        if (isShowing < dataList.size()) {
            if (null != cardSwitchListener) {
                cardSwitchListener.onShow(isShowing);
            }
        }

与RecyclerView兼容问题

如果将该view作为RecyclerView的一个item,此时左右滑会失效。我找了相关的解决方案,无法彻底解决,还请楼主也想想办法!

滑动很快的时候,会出现BUG

BUG如下:
都是在滑动很快的时候出现的:滑的非常快的时候,两张卡片布局出现问题,然后就划不动了;还有就是有出现连续划出两张卡片的情况,希望大神能帮忙看看,这个控件已经用在公司项目上了,这边还发不了图,QQ970335012,谢谢

我用的你的源码,会丢失view

我用了自己的数据源,但是快速点击按钮的时候会丢失view,等到最外面显示的是第三层或者第四层的view拖不动了,但是我看你的demo里没有这个问题,你知道这是改的哪个方法里出现的问题了吗

CardSlidePanel static width

Hi
I'm using your library.Everything working perfect.but i have one problem. CardSlidePanel 's width is match_parent +margin left,right.
Is it a possible to set CardSlidePanel static width ,for example 350 dp in center position.
p.s
I'm working in Tablet and CardSlidePanel 's width is large
thanks
this is my code
`@Override
protected void onLayout(boolean changed, int left, int top, int right,
int bottom) {

    int size = viewList.size();
    for (int i = 0; i < size; i++) {
        View viewItem = viewList.get(i);
        int childHeight = viewItem.getMeasuredHeight();
        int viewLeft = (getWidth() - viewItem.getMeasuredWidth()) / 2;
        int centerTop = (getMeasuredHeight() - viewItem.getMeasuredHeight()) / 2 - itemMarginTop;
        viewItem.layout(viewLeft, centerTop, viewLeft + viewItem.getMeasuredWidth(), centerTop + childHeight);
        int offset = yOffsetStep * i;
        float scale = 1 - SCALE_STEP * i;
        if (i > 2) {
   
            offset = yOffsetStep * 2;
            scale = 1 - SCALE_STEP * 2;
        }

        viewItem.offsetTopAndBottom(offset);
        viewItem.setScaleX(scale);
        viewItem.setScaleY(scale);
    }

  
    if (null != bottomLayout) {
        int layoutTop = viewList.get(0).getBottom() + bottomMarginTop;
        bottomLayout.layout(left, layoutTop, right, layoutTop
                + bottomLayout.getMeasuredHeight());
    }

 
    initCenterViewX = viewList.get(0).getLeft();
    initCenterViewY = viewList.get(0).getTop();
    childWith = viewList.get(0).getMeasuredWidth();
}`

`

public boolean shouldCapture(int x, int y) {
int captureLeft = topLayout.getLeft() + topLayout.getPaddingLeft();
int captureTop = getTop() + topLayout.getTop() + topLayout.getPaddingTop();
int captureRight = bottomLayout.getRight() - bottomLayout.getPaddingRight();
int captureBottom = getBottom() - getPaddingBottom() - bottomLayout.getPaddingBottom();

    if (x > captureLeft && x < captureRight && y > captureTop && y < captureBottom) {
        return true;
    }
    return false;
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.