【转载】探探首页

原文地址：https://github.com/xmuSistone/android-card-slide-panel

有图有真相

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

不得不说，探探的ui效果真的很赞。在着手这个project之前，我没有参考过github上其它类似的开源项目。所以，如果这个project重复造了轮子，请不要打我。为了叙述上的方便，该项目代号为thisProj，没意见吧？
在thisProj竣工之时，有一个小伙伴发了我另一个开源工程，跟thisProj也有相似之处。我下载了源码，导入了studio，apk跑起来的时候，发现它存在一些问题：卡片飞到两侧，如果动画没有结束，则不允许下一轮拖动。这对强迫症的用户来说，应该是很不爽的。
然而，探探却克服了所有这些问题。或许，这个问题只有积淀过这些知识点的人才能琢磨的透吧。我确实思考了很久，想到了一个还不错的方案，细看代码深处，你也会如梦方醒吧。

无耻一点

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

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

不信，你下载下来look look。

使用方法

1. 在xml文件中引入CardSlidePanel

<com.stone.card.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="26dp">

        <LinearLayout
            android:id="@+id/card_bottom_layout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <Button
                android:id="@+id/card_left_btn"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:background="@drawable/ignore_button" />

            <Button
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/home_button" />

            <Button
                android:id="@+id/card_right_btn"
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_marginLeft="10dp"
                android:background="@drawable/like_button" />
        </LinearLayout>

        <com.stone.card.CardItemView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="invisible" />

        <com.stone.card.CardItemView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="invisible" />

        <com.stone.card.CardItemView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="invisible" />

        <com.stone.card.CardItemView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:visibility="invisible" />

    </com.stone.card.CardSlidePanel>

 

如果不想要底部的三个按钮，有两种办法：(1) 删代码，包括CardSlidePanel的一部分代码。(2)设置visibility为gone

2. Java代码调用

CardSlidePanel slidePanel = (CardSlidePanel) rootView
                .findViewById(R.id.image_slide_panel);
        cardSwitchListener = new CardSwitchListener() {

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

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

            @Override
            public void onItemClick(View cardView, int index) {
                Log.d("CardFragment", "卡片点击-" + dataList.get(index).userName);
            }
        };
        slidePanel.setCardSwitchListener(cardSwitchListener);

 

3. 想要定制卡片的itemView:

请修改card_item.xml文件，可滑动区域在CardItemView.java里面做定制

4.绑定卡片数据

在CardItemView.java

public void fillData(CardDataItem itemData) {
        ImageLoader.getInstance().displayImage(itemData.imagePath, imageView);
        userNameTv.setText(itemData.userName);
        imageNumTv.setText(itemData.imageNum + "");
        likeNumTv.setText(itemData.likeNum + "");