探探左滑右滑简单实现

最新推荐文章于 2022-11-22 09:26:53 发布

原创最新推荐文章于 2022-11-22 09:26:53 发布 · 1.9w 阅读

CC 4.0 BY-SA版权

本文介绍了如何简单实现探探应用中的左滑右滑功能。首先，通过下载并导入library工程到Android Studio工作空间，然后配置依赖。接着，设置drawable中的样式，并在布局文件中应用。最后，展示关键代码和实现效果，包括CardDataItem类的使用和点击下拉箭头加载更多数据的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单实现探探左滑右滑

效果演示

首先上网下载一个library文件夹吐舌头

接着把library工程导入到工作空间中，步骤如下：

先点击file-->project-->选中新创建的工程-->dependencies-->点击“+”号-->选中第三个Module Dependency-->找到library，选中-->ok

在androidstudio上导入library的Module，然后再在app上把那个library添加上去，这样我们的app就关联了那个library库了

如下图：

源码网址：xmuSistone/android-card-slide-panel

下面就可以写代码了

在drawable里写入一些样式

home_button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/home_pressed" android:state_focused="true" android:state_pressed="true"/>
    <!-- 触摸模式下单击时的背景图片 -->
    <item android:drawable="@drawable/home_pressed" android:state_focused="false" android:state_pressed="true"/>
    <!-- 选中时的图片背景 -->
    <item android:drawable="@drawable/home_pressed" android:state_selected="true"/>
    <!-- 获得焦点时的图片背景 -->
    <item android:drawable="@drawable/home_pressed" android:state_focused="true"/>
    <item android:drawable="@drawable/home_normal"/>
    </selector>

ignore_button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ignore_pressed" android:state_focused="true" android:state_pressed="true"/>
    <!-- 触摸模式下单击时的背景图片 -->
    <item android:drawable="@drawable/ignore_pressed" android:state_focused="false" android:state_pressed="true"/>
    <!-- 选中时的图片背景 -->
    <item android:drawable="@drawable/ignore_pressed" android:state_selected="true"/>
    <!-- 获得焦点时的图片背景 -->
    <item android:drawable="@drawable/ignore_pressed" android:state_focused="true"/>
    <item android:drawable="@drawable/ignore_normal"/>

</selector>

like_button

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/like_pressed" android:state_focused="true" android:state_pressed="true"/>
    <!-- 触摸模式下单击时的背景图片 -->
    <item android:drawable="@drawable/like_pressed" android:state_focused="false" android:state_pressed="true"/>
    <!-- 选中时的图片背景 -->
    <item android:drawable="@drawable/like_pressed" android:state_selected="true"/>
    <!-- 获得焦点时的图片背景 -->
    <item android:drawable="@drawable/like_pressed" android:state_focused="true"/>
    <item android:drawable="@drawable/like_normal"/>

</selector>

布局中使用的一些图标，根据自己喜好可以换成其它图标，除了下箭头图标，其它的也可以省略不用

布局

activity_main布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fff"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="#cd4827">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="探索"
            android:textColor="#fff"
            android:textSize="17sp" />

        <ImageView
            android:id="@+id/notify_change"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="right|center_vertical"
            android:padding="16dp"
            android:src="@drawable/download" />

    </FrameLayout>

    <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" />

</LinearLayout>

card_item布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/card_item_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    tools:context=".MainActivity">

    <RelativeLayout
        android:id="@+id/card_top_layout"
        android:layout_width="match_parent"
        android:layout_height="230dp"
        android:background="@drawable/top">

        <ImageView
            android:id="@+id/card_image_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop" />

        <View
            android:id="@+id/maskView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="?android:attr/selectableItemBackground"
            android:clickable="true" />

        <TextView
            android:id="@+id/card_pic_num"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_margin="5dp"
            android:background="#5f000000"
            android:drawableLeft="@drawable/card_photot"
            android:drawablePadding="4dp"
            android:gravity="center"
            android:paddingLeft="6dp"
            android:paddingRight="4dp"
            android:text="6"
            android:textColor="#fff" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/card_bottom_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom"
        android:paddingTop="10dp">

        <TextView
            android:id="@+id/card_user_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="叶琪琪 23"
            android:textColor="#111"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/card_other_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/card_user_name"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="5dp"
            android:paddingBottom="16dp"
            android:text="其它 6km4"
            android:textColor="#888" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginTop="3dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/card_left1"
                android:drawablePadding="2dp"
                android:gravity="center_horizontal"
                android:text="0"
                android:textColor="#999"
                android:textSize="15sp" />

            <TextView
                android:id="@+id/card_like"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="10dp"
                android:drawableLeft="@drawable/card_left2"
                android:drawablePadding="2dp"
                android:gravity="center_horizontal"
                android:text="2"
                android:textColor="#999"
                android:textSize="15sp" />
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>

主要代码

CardDataItem类

public class CardDataItem {
   int imagePath;
    String userName;
    int likeNum;
    int imageNum;
}

MainActivity

package com.stone.card;
import android.graphics.Rect;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.app.FragmentActivity;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.stone.card.library.CardAdapter;
import com.stone.card.library.CardSlidePanel;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends FragmentActivity {

    private CardSlidePanel.CardSwitchListener cardSwitchListener;
     
      //可在drawabe里面放入自己喜欢的图片
    private int[] imagePaths = {R.drawable.wall01,R.drawable.wall02,R.drawable.wall03,R.drawable.wall04,R.drawable.wall05,
   R.drawable.wall06,R.drawable.a,R.drawable.b,R.drawable.c,R.drawable.d,R.drawable.e,R.drawable.m};// 12个图片资源
    
    private String names[] = {"郭富城", "刘德华", "张学友", "李连杰", "成龙", "谢霆锋", "李易峰",
            "霍建华", "胡歌", "曾志伟", "吴孟达", "梁朝伟"}; // 12个人名

    private List<CardDataItem> dataList = new ArrayList<>();


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        final CardSlidePanel slidePanel = (CardSlidePanel) findViewById(R.id.image_slide_panel);

        // 1. 左右滑动监听
        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);


        // 2. 绑定Adapter
        slidePanel.setAdapter(new CardAdapter() {
            @Override
            public int getLayoutId() {
                return R.layout.card_item;
            }

            @Override
            public int getCount() {
                return dataList.size();
            }

            @Override
            public void bindView(View view, int index) {
                Object tag = view.getTag();
                ViewHolder viewHolder;
                if (null != tag) {
                    viewHolder = (ViewHolder) tag;
                } else {
                    viewHolder = new ViewHolder(view);
                    view.setTag(viewHolder);
                }

                viewHolder.bindData(dataList.get(index));
            }

            @Override
            public Object getItem(int index) {
                return dataList.get(index);
            }

            @Override
            public Rect obtainDraggableArea(View view) {
                // 可滑动区域定制，该函数只会调用一次
                View contentView = view.findViewById(R.id.card_item_content);
                View topLayout = view.findViewById(R.id.card_top_layout);
                View bottomLayout = view.findViewById(R.id.card_bottom_layout);
                int left = view.getLeft() + contentView.getPaddingLeft() + topLayout.getPaddingLeft();
                int right = view.getRight() - contentView.getPaddingRight() - topLayout.getPaddingRight();
                int top = view.getTop() + contentView.getPaddingTop() + topLayout.getPaddingTop();
                int bottom = view.getBottom() - contentView.getPaddingBottom() - bottomLayout.getPaddingBottom();
                return new Rect(left, top, right, bottom);
            }
        });


        Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                prepareDataList();
                slidePanel.getAdapter().notifyDataSetChanged();
            }
        }, 500);

        // 3. notifyDataSetChanged调用
        findViewById(R.id.notify_change).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                appendDataList();
                slidePanel.getAdapter().notifyDataSetChanged();
            }
        });
    }

    private void prepareDataList() {
        for (int i = 0; i < 6; i++) {
            CardDataItem dataItem = new CardDataItem();
            dataItem.userName = names[i];
            dataItem.imagePath = imagePaths[i];
            dataItem.likeNum = (int) (Math.random() * 10);
            dataItem.imageNum = (int) (Math.random() * 6);
            dataList.add(dataItem);
        }
    }

    private void appendDataList() {
        for (int i = 0; i < 6; i++) {
            CardDataItem dataItem = new CardDataItem();
            dataItem.userName = "From Append";
            dataItem.imagePath = imagePaths[8];
            dataItem.likeNum = (int) (Math.random() * 10);
            dataItem.imageNum = (int) (Math.random() * 6);
            dataList.add(dataItem);
        }
    }

    class ViewHolder {

        ImageView imageView;
        View maskView;
        TextView userNameTv;
        TextView imageNumTv;
        TextView likeNumTv;

        public ViewHolder(View view) {
            imageView = (ImageView) view.findViewById(R.id.card_image_view);
            maskView = view.findViewById(R.id.maskView);
            userNameTv = (TextView) view.findViewById(R.id.card_user_name);
            imageNumTv = (TextView) view.findViewById(R.id.card_pic_num);
            likeNumTv = (TextView) view.findViewById(R.id.card_like);
        }

        public void bindData(CardDataItem itemData) {
            Glide.with(MainActivity.this).load(itemData.imagePath).into(imageView);
            userNameTv.setText(itemData.userName);
            imageNumTv.setText(itemData.imageNum + "");
            likeNumTv.setText(itemData.likeNum + "");
        }
    }

}

效果图

点击下图白色下箭头图标可加载更多数据哦吐舌头