探探左滑右滑簡單實現
阿新 • • 發佈：2019-02-02
簡單實現探探左滑右滑
效果演示
首先上網下載一個library資料夾 
接著把library工程匯入到工作空間中，步驟如下：
先點選file-->project-->選中新建立的工程-->dependencies-->點選“+”號-->選中第三個Module Dependency-->找到library，選中-->ok
在androidstudio上匯入library的Module，然後再在app上把那個library新增上去，這樣我們的app就關聯了那個library 庫了
如下圖：
下面就可以寫程式碼了
在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 + "");
}
}
}
效果圖
點選下圖白色下箭頭圖示可載入更多資料哦
