探探左滑右滑简单实现

                                 

                              简单实现探探左滑右滑

 效果演示

              

                       

  首先上网下载一个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 + "");        }    }}

          效果图              

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