版權聲明:本文爲HaiyuKing原創文章,轉載請註明出處!java
記錄AndroidSwipeLayout搭配Recyclerview實現列表項側滑功能。android
適配器類中設置SwipeLayout顯示BottomView的動畫效果代碼(YoYo.with(Techniques.Tada).duration(500).delay(100).playOn(layout.findViewById(R.id.bottom_wrapper));)能夠隱藏。git
注意事項:github
一、 導入類文件後須要change包名以及從新import R文件路徑app
二、 Values目錄下的文件(strings.xml、dimens.xml、colors.xml等),若是項目中存在,則複製裏面的內容,不要整個覆蓋ide
apply plugin: 'com.android.application'
android {
compileSdkVersion 27
defaultConfig {
applicationId "com.why.project.recyclerswipeadapterdemo"
minSdkVersion 16
targetSdkVersion 27
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
//RecyclerView compile "com.android.support:recyclerview-v7:27.1.1"
}
一、建立Bean類函數
package com.why.project.recyclerswipeadapterdemo.bean; /** * Created by HaiyuKing * Used 列表項的bean類 */ public class NewsBean { private String newsId;//id值 private String newsTitle;//標題 public String getNewsId() { return newsId; } public void setNewsId(String newsId) { this.newsId = newsId; } public String getNewsTitle() { return newsTitle; } public void setNewsTitle(String newsTitle) { this.newsTitle = newsTitle; } }
二、建立Adapter以及item的佈局文件【此時的Adapter和佈局文件都只是最開始的基本寫法,後續還須要修改】佈局
package com.why.project.recyclerswipeadapterdemo.adapter; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; import android.widget.TextView; import com.why.project.recyclerswipeadapterdemo.R; import com.why.project.recyclerswipeadapterdemo.bean.NewsBean; import java.util.ArrayList; /** * Created by HaiyuKing * Used 列表適配器 */ public class NewsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{ /**上下文*/ private Context myContext; /**集合*/ private ArrayList<NewsBean> listitemList; /** * 構造函數 */ public NewsAdapter(Context context, ArrayList<NewsBean> itemlist) { myContext = context; listitemList = itemlist; } /** * 獲取總的條目數 */ @Override public int getItemCount() { return listitemList.size(); } /** * 建立ViewHolder */ @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(myContext).inflate(R.layout.news_list_item, parent, false); ItemViewHolder itemViewHolder = new ItemViewHolder(view); return itemViewHolder; } /** * 聲明grid列表項ViewHolder*/ static class ItemViewHolder extends RecyclerView.ViewHolder { public ItemViewHolder(View view) { super(view); listItemLayout = (LinearLayout) view.findViewById(R.id.listitem_layout); mChannelName = (TextView) view.findViewById(R.id.tv_channelName); } LinearLayout listItemLayout; TextView mChannelName; } /** * 將數據綁定至ViewHolder */ @Override public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int index) { //判斷屬於列表項 if(viewHolder instanceof ItemViewHolder){ NewsBean newsBean = listitemList.get(index); final ItemViewHolder itemViewHold = ((ItemViewHolder)viewHolder); itemViewHold.mChannelName.setText(newsBean.getNewsTitle()); //若是設置了回調,則設置點擊事件 if (mOnItemClickLitener != null) { itemViewHold.listItemLayout.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了 mOnItemClickLitener.onItemClick(itemViewHold.listItemLayout, position); } }); //長按事件 itemViewHold.listItemLayout.setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View view) { int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了 mOnItemClickLitener.onItemLongClick(itemViewHold.listItemLayout, position); return false; } }); } } } /** * 添加Item--用於動畫的展示*/ public void addItem(int position,NewsBean listitemBean) { listitemList.add(position,listitemBean); notifyItemInserted(position); } /** * 刪除Item--用於動畫的展示*/ public void removeItem(int position) { listitemList.remove(position); notifyItemRemoved(position); } /*=====================添加OnItemClickListener回調================================*/ public interface OnItemClickLitener { void onItemClick(View view, int position); void onItemLongClick(View view, int position); } private OnItemClickLitener mOnItemClickLitener; public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) { this.mOnItemClickLitener = mOnItemClickLitener; } }
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/listitem_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_margin="1dp" android:background="#ffffff"> <TextView android:id="@+id/tv_channelName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="標題" android:textSize="18sp" android:padding="20dp"/> </LinearLayout>
三、在Activity佈局文件中引用Recyclerview控件gradle
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#F4F4F4"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:cacheColorHint="#00000000" android:divider="@null" android:listSelector="#00000000" android:scrollbars="none" /> </RelativeLayout>
四、在Activity類中初始化recyclerview數據【此時只是最基本的寫法,後續還須要修改】動畫
package com.why.project.recyclerswipeadapterdemo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.View; import com.why.project.recyclerswipeadapterdemo.adapter.NewsAdapter; import com.why.project.recyclerswipeadapterdemo.bean.NewsBean; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private RecyclerView mRecyclerView; private ArrayList<NewsBean> mNewsBeanArrayList; private NewsAdapter mNewsAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); initDatas(); initEvents(); } private void initViews() { mRecyclerView = findViewById(R.id.recycler_view); } private void initDatas() { //初始化集合 mNewsBeanArrayList = new ArrayList<NewsBean>(); for(int i=0; i<10;i++){ NewsBean newsBean = new NewsBean(); newsBean.setNewsId("123"+i); newsBean.setNewsTitle("標題"+i); mNewsBeanArrayList.add(newsBean); } //設置佈局管理器 LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this); mRecyclerView.setLayoutManager(linearLayoutManager); //設置適配器 if(mNewsAdapter == null){ //設置適配器 mNewsAdapter = new NewsAdapter(this, mNewsBeanArrayList); mRecyclerView.setAdapter(mNewsAdapter); //添加分割線 //設置添加刪除動畫 //調用ListView的setSelected(!ListView.isSelected())方法,這樣就能及時刷新佈局 mRecyclerView.setSelected(true); }else{ mNewsAdapter.notifyDataSetChanged(); } } private void initEvents() { //列表適配器的點擊監聽事件 mNewsAdapter.setOnItemClickLitener(new NewsAdapter.OnItemClickLitener() { @Override public void onItemClick(View view, int position) { } @Override public void onItemLongClick(View view, int position) { } }); } }
apply plugin: 'com.android.application'
android {
compileSdkVersion 27
defaultConfig {
applicationId "com.why.project.recyclerswipeadapterdemo"
minSdkVersion 16
targetSdkVersion 27
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support.constraint:constraint-layout:1.1.2'
testImplementation 'junit:junit:4.12'
androidTestImplementation 'com.android.support.test:runner:1.0.2'
androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
//RecyclerView
compile "com.android.support:recyclerview-v7:27.1.1"
//swipelayout側滑 compile 'com.daimajia.swipelayout:library:1.2.0@aar' //swipelayout動畫效果相關 compile 'com.daimajia.easing:library:1.0.1@aar' compile 'com.daimajia.androidanimations:library:1.1.2@aar' compile 'com.nineoldandroids:library:2.4.0'
}
一、SwipeLayout的最後一個孩子是SurfaceView(上層),其餘孩子都是BottomView(底層)
二、surfaceView基本上和以前的佈局代碼一致【綠色標記的】
三、在BottomView中佈局側滑後顯示的控件【橙色標記的】
四、注意黃色標記的id值,在適配器中用獲得
<?xml version="1.0" encoding="utf-8"?> <!-- SwipeLayout的最後一個孩子是SurfaceView(上層),其餘孩子都是BottomView(底層) BottomView最好添加上android:layout_gravity屬性 --> <com.daimajia.swipe.SwipeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:swipe="http://schemas.android.com/apk/res-auto" android:id="@+id/swipeLayout" android:layout_width="match_parent" android:layout_height="wrap_content" swipe:leftEdgeSwipeOffset="0dp" swipe:rightEdgeSwipeOffset="0dp" android:layout_margin="1dp"> <!-- Bottom View Start--> <LinearLayout android:id="@+id/bottom_wrapper" android:layout_width="wrap_content" android:layout_height="match_parent" android:layout_gravity="right|center_vertical" android:orientation="horizontal" android:weightSum="1"> <!-- 置頂 --> <LinearLayout android:id="@+id/swipe_bottom_top_layout" android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical" android:background="#0195C5" android:gravity="center" android:paddingLeft="20dp" android:paddingRight="20dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/swipe_top"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="5dp" android:text="置頂" android:textColor="#ffffff" android:textSize="18sp" /> </LinearLayout> <!-- 刪除 --> <LinearLayout android:id="@+id/swipe_bottom_del_layout" android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical" android:background="#FF5D5D" android:gravity="center" android:paddingLeft="20dp" android:paddingRight="20dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/swipe_del"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingTop="5dp" android:text="刪除" android:textColor="#ffffff" android:textSize="18sp" /> </LinearLayout> </LinearLayout> <!-- Bottom View End--> <!--surfaceView Start--> <LinearLayout android:id="@+id/surfaceView" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="#ffffff"> <TextView android:id="@+id/tv_channelName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="標題" android:textSize="18sp" android:padding="20dp"/> </LinearLayout> <!--surfaceView End--> </com.daimajia.swipe.SwipeLayout>
一、繼承RecyclerSwipeAdapter
二、重寫getSwipeLayoutResourceId方法
三、在ItemViewHolder中添加SwipeLayout、bottom_wrapper等控件的聲明
四、在onBindViewHolder中設置SwipeLayout以及添加點擊事件監聽
五、在OnItemClickLitener中聲明側滑區域按鈕的點擊事件監聽
package com.why.project.recyclerswipeadapterdemo.adapter; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.LinearLayout; import android.widget.TextView; import com.daimajia.androidanimations.library.Techniques; import com.daimajia.androidanimations.library.YoYo; import com.daimajia.swipe.SimpleSwipeListener; import com.daimajia.swipe.SwipeLayout; import com.daimajia.swipe.adapters.RecyclerSwipeAdapter; import com.why.project.recyclerswipeadapterdemo.R; import com.why.project.recyclerswipeadapterdemo.bean.NewsBean; import java.util.ArrayList; /** * Created by HaiyuKing * Used 列表適配器 */ public class NewsAdapter extends RecyclerSwipeAdapter<RecyclerView.ViewHolder> { /**上下文*/ private Context myContext; /**集合*/ private ArrayList<NewsBean> listitemList; /** * 構造函數 */ public NewsAdapter(Context context, ArrayList<NewsBean> itemlist) { myContext = context; listitemList = itemlist; } /** * 獲取總的條目數 */ @Override public int getItemCount() { return listitemList.size(); } /** * 建立ViewHolder */ @Override public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(myContext).inflate(R.layout.news_list_item, parent, false); ItemViewHolder itemViewHolder = new ItemViewHolder(view); return itemViewHolder; } @Override public int getSwipeLayoutResourceId(int position) { return R.id.swipeLayout;//實現只展示一條列表項的側滑區域 } /** * 聲明grid列表項ViewHolder*/ static class ItemViewHolder extends RecyclerView.ViewHolder { public ItemViewHolder(View view) { super(view); listItemLayout = (LinearLayout) view.findViewById(R.id.surfaceView); mChannelName = (TextView) view.findViewById(R.id.tv_channelName); swipeLayout = (SwipeLayout) view.findViewById(R.id.swipeLayout); bottom_wrapper = (LinearLayout) view.findViewById(R.id.bottom_wrapper); mTop = (LinearLayout) view.findViewById(R.id.swipe_bottom_top_layout); mDelete = (LinearLayout) view.findViewById(R.id.swipe_bottom_del_layout); } LinearLayout listItemLayout; TextView mChannelName; SwipeLayout swipeLayout; LinearLayout bottom_wrapper;//側滑區域 LinearLayout mTop;//置頂 LinearLayout mDelete;//刪除 } /** * 將數據綁定至ViewHolder */ @Override public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int index) { //判斷屬於列表項 if(viewHolder instanceof ItemViewHolder){ NewsBean newsBean = listitemList.get(index); final ItemViewHolder itemViewHold = ((ItemViewHolder)viewHolder); itemViewHold.mChannelName.setText(newsBean.getNewsTitle()); //設置側滑顯示模式 itemViewHold.swipeLayout.setShowMode(SwipeLayout.ShowMode.PullOut); //設置側滑顯示位置方向 //itemViewHold.parentLayout.addDrag(SwipeLayout.DragEdge.Right,itemViewHold.bottom_wrapper); itemViewHold.swipeLayout.addSwipeListener(new SimpleSwipeListener() { @Override public void onOpen(SwipeLayout layout) { //實現動畫效果展示隱藏層 YoYo.with(Techniques.Tada).duration(500).delay(100).playOn(layout.findViewById(R.id.bottom_wrapper)); } }); //若是設置了回調,則設置點擊事件 if (mOnItemClickLitener != null) { itemViewHold.swipeLayout.getSurfaceView().setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { itemViewHold.swipeLayout.close();//隱藏側滑菜單區域 int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了 mOnItemClickLitener.onItemClick(itemViewHold.swipeLayout, position); } }); //長按事件 itemViewHold.swipeLayout.getSurfaceView().setOnLongClickListener(new View.OnLongClickListener() { @Override public boolean onLongClick(View view) { itemViewHold.swipeLayout.close();//隱藏側滑菜單區域 int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了 mOnItemClickLitener.onItemLongClick(itemViewHold.swipeLayout, position); return false; } }); //置頂 itemViewHold.mTop.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { itemViewHold.swipeLayout.close();//隱藏側滑菜單區域 int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了 mOnItemClickLitener.onTopClick(position); } }); //刪除 itemViewHold.mDelete.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { itemViewHold.swipeLayout.close();//隱藏側滑菜單區域 int position = itemViewHold.getLayoutPosition();//在增長數據或者減小數據時候,position和index就不同了 mOnItemClickLitener.onDeleteClick(position); } }); } mItemManger.bindView(viewHolder.itemView, index);//實現只展示一條列表項的側滑區域 } } /** * 添加Item--用於動畫的展示*/ public void addItem(int position,NewsBean listitemBean) { listitemList.add(position,listitemBean); notifyItemInserted(position); } /** * 刪除Item--用於動畫的展示*/ public void removeItem(int position) { listitemList.remove(position); notifyItemRemoved(position); } /*=====================添加OnItemClickListener回調================================*/ public interface OnItemClickLitener { void onItemClick(View view, int position); void onItemLongClick(View view, int position); /**置頂*/ void onTopClick(int position); /**刪除*/ void onDeleteClick(int position); } private OnItemClickLitener mOnItemClickLitener; public void setOnItemClickLitener(OnItemClickLitener mOnItemClickLitener) { this.mOnItemClickLitener = mOnItemClickLitener; } }
在MainActivity中使用以下【基本上沒有變化】
package com.why.project.recyclerswipeadapterdemo; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.view.View; import android.widget.Toast; import com.daimajia.swipe.util.Attributes; import com.why.project.recyclerswipeadapterdemo.adapter.NewsAdapter; import com.why.project.recyclerswipeadapterdemo.bean.NewsBean; import java.util.ArrayList; public class MainActivity extends AppCompatActivity{ private RecyclerView mRecyclerView; private ArrayList<NewsBean> mNewsBeanArrayList; private NewsAdapter mNewsAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); initDatas(); initEvents(); } private void initViews() { mRecyclerView = findViewById(R.id.recycler_view); } private void initDatas() { //初始化集合 mNewsBeanArrayList = new ArrayList<NewsBean>(); for(int i=0; i<10;i++){ NewsBean newsBean = new NewsBean(); newsBean.setNewsId("123"+i); newsBean.setNewsTitle("標題"+i); mNewsBeanArrayList.add(newsBean); } //設置佈局管理器 LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this); mRecyclerView.setLayoutManager(linearLayoutManager); //設置適配器 if(mNewsAdapter == null){ //設置適配器 mNewsAdapter = new NewsAdapter(this, mNewsBeanArrayList); mNewsAdapter.setMode(Attributes.Mode.Single);//設置只有一個拖拽打開的時候,其餘的關閉 mRecyclerView.setAdapter(mNewsAdapter); //添加分割線 //設置添加刪除動畫 //調用ListView的setSelected(!ListView.isSelected())方法,這樣就能及時刷新佈局 mRecyclerView.setSelected(true); }else{ mNewsAdapter.notifyDataSetChanged(); } } private void initEvents() { //列表適配器的點擊監聽事件 mNewsAdapter.setOnItemClickLitener(new NewsAdapter.OnItemClickLitener() { @Override public void onItemClick(View view, int position) { Toast.makeText(MainActivity.this,"點擊",Toast.LENGTH_SHORT).show(); } @Override public void onItemLongClick(View view, int position) { Toast.makeText(MainActivity.this,"長按",Toast.LENGTH_SHORT).show(); } @Override public void onTopClick(int position) { Toast.makeText(MainActivity.this,"置頂",Toast.LENGTH_SHORT).show(); } @Override public void onDeleteClick(int position) { Toast.makeText(MainActivity.this,"刪除",Toast.LENGTH_SHORT).show(); } }); } }
無