RecycleView瀑布流及上下滑動和左右拖拽

阿新 • • 發佈：2019-01-20

話不多說，先上圖：

demo中使用到的圖片框架是

compile 'com.github.bumptech.glide:glide:3.7.0'

Activity佈局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
 
tools:context="com.rxd.test.Activity.RecyclerViewActivity">
    <LinearLayout
android:layout_width="match_parent"
android:layout_height="45dp"
android:orientation="horizontal"
android:background="@color/colorPrimaryDark"
android:id="@+id/linearLayout">
        <TextView
android:id="@+id/textView2"
 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="18sp"
android:text="RecycleView" />
    </LinearLayout>
    <android.support.v7.widget.RecyclerView
android:id="@+id/recycle"
android:layout_width="match_parent"
android:layout_height= 
"match_parent"
android:layout_alignParentStart="true"
android:layout_below="@+id/linearLayout"
android:padding="5dp"></android.support.v7.widget.RecyclerView>
</RelativeLayout>

Item佈局中使用到了cardView：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#00000000">
    <android.support.v7.widget.CardView
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardCornerRadius="5dp"
app:cardElevation="0px"
android:clickable="true"
android:foreground="?android:attr/selectableItemBackground"
>
        <LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
            <ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
            <TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:gravity="center"
android:textSize="12sp"
android:padding="8dp"
android:background="#FFFFFF"
/>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

佈局就這些，接下來是程式碼：

主介面Activity：

public class RecyclerViewActivity extends AppCompatActivity  {


    @BindView(R.id.recycle)
    RecyclerView recycle;
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
setContentView(R.layout.activity_recycler_view);
ButterKnife.bind(this);
        final StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);//防止滑動時跳動
layoutManager.invalidateSpanAssignments();
recycle.setLayoutManager(layoutManager);
recycle.setHasFixedSize(true);
recycle.setNestedScrollingEnabled(false);
recycle.addOnScrollListener(new RecyclerView.OnScrollListener() {
                                        @Override
public void
onScrollStateChanged(RecyclerView recyclerView,
                                                             int newState) {
                                            super.onScrollStateChanged(recyclerView,
newState);
//防止第一行到頂部有空白區域
layoutManager.invalidateSpanAssignments();
}
                                    }
        );
SpacesItemDecoration decoration = new SpacesItemDecoration(16);
recycle.addItemDecoration(decoration);
String[] url = {"https://ww1.sinaimg.cn/bmiddle/75d91745gy1fqsizpz0drj21kw2t5x6p.jpg",
"https://ww2.sinaimg.cn/bmiddle/75d91745gy1fqsiy9ic3yj20u01hc44a.jpg",
"https://ww3.sinaimg.cn/bmiddle/75d91745gy1fqsizlsmy5j21kw2t4e81.jpg",
"https://ww4.sinaimg.cn/bmiddle/75d91745gy1fqsizh8b1ij21kw2t4x31.jpg",
"https://ww3.sinaimg.cn/bmiddle/75d91745gy1fqsiylokp4j21kw2t4dqg.jpg",
"https://ww3.sinaimg.cn/bmiddle/75d91745gy1fqsiz5p789j20u01hctpv.jpg",
"https://ww1.sinaimg.cn/bmiddle/75d91745gy1fqsiyf51qdj20u01hc7cl.jpg",
"https://ww3.sinaimg.cn/bmiddle/75d91745gy1fqsiyq0grij20u01hcgvc.jpg",
"https://ww4.sinaimg.cn/bmiddle/75d91745gy1fqsiziu2z9j21kw2t57wh.jpg",
"https://ww1.sinaimg.cn/bmiddle/0070Uq5Kly1fre1pucf2pj30j60y4tbv.jpg",
"https://wx2.sinaimg.cn/bmiddle/0070Uq5Kly1fr8cr8dutaj30j60y2jxe.jpg",
"https://wx2.sinaimg.cn/bmiddle/953b752bly1fr7xerd8iij20u00u0wit.jpg",
"https://wx2.sinaimg.cn/bmiddle/62c2f0a5gy1fr62yjo8vbj215o1jktdd.jpg",
"https://wx4.sinaimg.cn/bmiddle/beb1a021gy1fqc1528c9oj20ku0kuthc.jpg",
"https://ww1.sinaimg.cn/bmiddle/005QiGQWgy1frb36tf9oaj31221vo44h.jpg",
"https://ww2.sinaimg.cn/bmiddle/005QiGQWgy1frb36u9ys9j31221vowj9.jpg",
"https://ww3.sinaimg.cn/bmiddle/005QiGQWgy1frb36vc7isj31221vogpz.jpg",
"https://ww2.sinaimg.cn/bmiddle/005QiGQWgy1frb36wxzg1j31221voaeh.jpg",
"https://ww3.sinaimg.cn/bmiddle/005QiGQWgy1frb36y10kmj31221vo7aj.jpg",
"https://ww2.sinaimg.cn/bmiddle/005QiGQWgy1frb36sjuevj31221vowin.jpg",
"https://ww3.sinaimg.cn/bmiddle/005QiGQWgy1frb36zb07wj31221vo461.jpg",
"https://ww2.sinaimg.cn/bmiddle/005QiGQWgy1frb370inxjj31221vowkl.jpg",
"https://ww1.sinaimg.cn/bmiddle/005QiGQWgy1fr7lkvxcboj31221vowix.jpg",
"https://ww3.sinaimg.cn/bmiddle/005Hfi3egy1fr41wul1rij30fm0rswh4.jpg",
"https://ww2.sinaimg.cn/bmiddle/005Hfi3egy1fr41wvmpa2j30f00qoqpj.jpg",
"https://ww1.sinaimg.cn/bmiddle/005Hfi3egy1fr41wvzpuaj30fm0rsjtl.jpg",
"https://ww2.sinaimg.cn/bmiddle/005QiGQWgy1fr7lkvj38xj31221votcn.jpg",
"https://ww1.sinaimg.cn/bmiddle/005QiGQWgy1fr916i2zs3j31jk111npd.jpg"};
String[] desc = {"遇見夏天~", "遇見夏天~", "遇見夏天~", "遇見夏天~", "遇見夏天~", "遇見夏天~", "遇見夏天~", "遇見夏天~", "遇見夏天~",
"#成就更好的自己##每天心情語錄##每日心情記錄##情話##每天心情語錄# ",
"接受突如其來的失去，珍惜不期而遇的驚喜。", "憂心獅子座\n" +
                "趁陽光正好，\n" +
                "趁微風不噪\n" +
                "趁繁花還未開至荼蘼～\n" +
                "\n" +
                "世界太吵，\n" +
                "只需聽自己的心跳，\n" +
                "一切從簡，\n" +
                "做自己想做的事～",
"當一個人心情愉快時，他便顯得善良。", "心情不好吃糖就好啦~",
"插畫", "插畫", "插畫", "插畫", "插畫", "插畫", "插畫", "插畫", "插畫", "插畫", "插畫", "插畫", "插畫", "林允兒~~"};
List<Itembean>  data_list = new ArrayList<>();
        for (int i = 0; i < url.length; i++) {
            //記錄每張圖片的高度
int hgight = (int) (200 + Math.random() * 400);
Itembean item = new Itembean(desc[i], url[i], hgight);
data_list.add(item);
}
       MyRecycleAdapter  adapter = new MyRecycleAdapter(this);
recycle.setAdapter(adapter);
adapter.setDataList(data_list);
RecycleTouchHelperCallback callback = new RecycleTouchHelperCallback(adapter);
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);
itemTouchHelper.attachToRecyclerView(recycle);
}


    public class SpacesItemDecoration extends RecyclerView.ItemDecoration {

        private int space;
        public SpacesItemDecoration(int space) {
            this.space = space;
}

        @Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            outRect.top = space;
outRect.bottom = space;
outRect.left = space;
outRect.right = space;
}
    }


}

ItemBean中就一個圖片的url和一個name描述和一個記錄圖片高度的int值，程式碼就不貼了，為了實現瀑布流的效果，圖片初始高度是隨機的，記錄下來是為了固定圖片高度。

adapter程式碼：

public class MyRecycleAdapter extends RecyclerView.Adapter<MyRecycleAdapter.ViewHolder>implements ItemTouchHelperInterface {
    private List<Itembean> data_list;
    private Context context;
    public MyRecycleAdapter(Context context) {
        this.context = context;
}

    public void setDataList(List<Itembean> data_list) {
        this.data_list = data_list;
notifyDataSetChanged();
}

    @Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_recycle, parent, false);
        return new ViewHolder(view);
}

    @Override
public void onBindViewHolder(final ViewHolder holder, int position) {
        holder.txt.setText(data_list.get(position).getName());
        int width = ((Activity) holder.image.getContext()).getWindowManager().getDefaultDisplay().getWidth();
Glide.with(context)
                .load(data_list.get(position).getUrl())
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .error(R.mipmap.demo)
                .crossFade()
                .centerCrop()
                .override(width / 2,data_list.get(position).getHegiht() )
                .into(holder.image);
}

    @Override
public int getItemCount() {
        return data_list.size();
}

    @Override
public void onItemMove(int fromPosition, int toPosition) {
        Collections.swap(data_list, fromPosition, toPosition);
notifyItemMoved(fromPosition, toPosition);
}

    @Override
public void onItemDismiss(int position) {
        data_list.remove(position);
notifyItemRemoved(position);
}

    public static class ViewHolder extends RecyclerView.ViewHolder {
        private ImageView image;
        private TextView txt;
        private CardView cardView;
        public ViewHolder(View itemView) {
            super(itemView);
image = itemView.findViewById(R.id.imageView);
txt = itemView.findViewById(R.id.textView);
cardView = itemView.findViewById(R.id.cardView);
}
    }

以上，瀑布流效果已經有了：

接下來，是實現上下滑動和左右拖拽

首先自定義一個類繼承實現ItemTouchHelper.Callback介面

public class RecycleTouchHelperCallback extends ItemTouchHelper.Callback {
    private final  MyRecycleAdapter mAdapter;
    public RecycleTouchHelperCallback(MyRecycleAdapter adapter) {
        this.mAdapter = adapter;
}

    @Override
public int getMovementFlags(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {
        int swipeFlags = 0;
        int dragFlags = ItemTouchHelper.UP | ItemTouchHelper.DOWN|  ItemTouchHelper.LEFT | ItemTouchHelper.RIGHT;
        return  makeMovementFlags(dragFlags,swipeFlags);
}

    @Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        mAdapter.onItemMove(viewHolder.getAdapterPosition(),
target.getAdapterPosition());
        return true;
}

    @Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        mAdapter.onItemDismiss(viewHolder.getAdapterPosition());
}

    @Override
public boolean isLongPressDragEnabled() {
        return true;
}

    @Override
public boolean isItemViewSwipeEnabled() {
        return true;
}
}

getMovementFlags用於設定是否處理拖拽事件和滑動事件，以及拖拽和滑動操作的方向，比如如果是列表型別的RecyclerView，拖拽只有UP、DOWN兩個方向，而如果是網格型別的則有UP、DOWN、LEFT、RIGHT四個方向.

然後新建一個介面用於更新資料：

public interface ItemTouchHelperInterface {
    //用於通知底層資料的更新
void onItemMove(int fromPosition, int toPosition);
    void onItemDismiss(int position);
}

在adapter裡實現這個介面來更新資料（程式碼片段，上面adapter裡面已經寫了）:

@Override
public void onItemMove(int fromPosition, int toPosition) {
    Collections.swap(data_list, fromPosition, toPosition);
notifyItemMoved(fromPosition, toPosition);
}

@Override
public void onItemDismiss(int position) {
    data_list.remove(position);
notifyItemRemoved(position);
}

最後們只需要例項化一個ItemTouchHelper，然後關聯到RecyclerView就OK了（程式碼片段，上面activity裡面已經寫了）：

RecycleTouchHelperCallback callback = new RecycleTouchHelperCallback(adapter);
ItemTouchHelper itemTouchHelper = new ItemTouchHelper(callback);
itemTouchHelper.attachToRecyclerView(recycle);

拖拽過程截圖如下：

第一次正經寫博文，就湊合看看吧。。。

RecycleView瀑布流及上下滑動和左右拖拽

話不多說，先上圖：demo中使用到的圖片框架是compile 'com.github.bumptech.glide:glide:3.7.0'Activity佈局：<?xml version="1.0" encoding="utf-8"?> <Relative

RecycleView 瀑布流及glide網路載入圖片

package com.example.recycleview_jinjie; //第一步 import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.s

關於RecyclerView實現瀑布流，上下滑動時item之間互換位置的問題

最近專案需求，需要RecyclerView實現瀑布流。在用 StaggeredGridLayoutManager 完成瀑布流的過程中發現一個問題：它並不像pullToRefresh 那樣是穩定的list,而是item之間頻繁交換位置,有時候甚至會出現第一列和第二列完全互

OKGO 和 RecycleView 瀑布流

1.導依賴 //OKGO implementation 'com.lzy.net:okgo:3.0.4' //RecycleView implementation 'com.android.support:design:28.0.0' 2.佈局 <android.supp

RecycleView瀑布流沒有數據

wid eight message nag tla sorted orien ext int package com.jiuxi.marriage.module.goods.manager; import android.content.Context; import

用jQuery實現瀑布流及滾動懶載入（相容IE8）

上篇 js原生瀑布流並實現滾動懶載入（相容IE8）講解了瀑布流的原理及滾動懶載入的原理，並用原生js實現了效果，那麼原生js必定有些繁瑣和麻煩，這一篇我們就換成jQuery，程式碼會簡潔很多，思路和原理我就不贅述了，如果想看的話，移步 js原生瀑布流並實

RecyclerView 實現瀑布流及點選事件，含點選回撥的介面

RecyclerView 實現瀑布流及點選事件 public class FruitAdapter extends RecyclerView.Adapter<FruitAdapter.ViewHolder> { private List

Android高仿秒拍熱榜的卡片滑動和左右飛出效果--SwipeCardsView

來由之所以做這個效果是因為專案中有這個效果需要實現。一開始我有在github上找到不少類似的庫，但是發現放在專案中會發現要麼有鋸齒，要麼就是卡頓，總之就是效果不好，其實絕大多數的庫都和Swip

Python3 檔案流及讀寫和OS函式

讀和寫檔案open() 將會返回一個 file 物件，基本語法格式如下: open(filename, mode)filename：包含了你要訪問的檔名稱的字串值。mode：決定了開啟檔案的模式：只讀，寫入，追加等。所有可取值見如下的完全列表。這個引數是非強制的，預設檔案訪問

Android RecycleView瀑布流點選吐絲、長按刪除,很炫酷的一個列表展示

RecycleView是5.0之後推出的一個新控制元件，所以使用就要先匯入一個依賴包： compile 'com.android.support:recyclerview-v7:22.2.1'2.實現的效果挺好看的，需要的趕緊來試一下，真的感覺跟瀑布一樣，雖然錯

原生JS實現瀑布流及載入效果

瀑布流是目前一種比較流行的頁面佈局和載入效果。百度，花瓣等一些好的網站都廣泛用了這樣一種效果，適用於單頁面展示對內容的頁面。這幾天就跟著一些資料學習了一下瀑布流效果的製作。其原理是利用js動態的改

JS實現動態瀑布流及放大切換圖片效果(js案例)

整理了一下當時學js寫的一些案例，再次體驗了一把用原生JS實現動態瀑布流效果的樂趣，現在把它整理出來，需要的小夥伴可以參考一下。該案例主要是用HTML+CSS控制樣式，通過JS實現全域性瀑布流以及點選圖片放大、上下切換效果。HTML佈局寫的很簡單，圖片載入主要是在JS中通過訪問自定義的JSON字串來實現。

文字左右無縫滾動效果--支援左右拖拽

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>文字左右無縫滾動

左右拖拽條改變大小

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titl

百度地圖點選和標註拖拽後的經緯度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html&

快速實現RecycleView的網格和瀑布流佈局新增頭部(尾部原理一樣，故略之)

RecycleView高度的解耦，非常靈活，通過佈局管理器LayoutManager控制其顯示的佈局；通過ItemDecoration控制Item間的間隔；通過ItemAnimator控制Item增刪的動畫；不過需要自己寫介面實現點選、長按事件。它只管回收與複用

原來操控介面可以這麼簡單----安卓上下滑動縮放頂部圖片，左右滑動結束當前Activity，及View柔和回彈效果

先上效果圖：上傳圖片不能超過2M,費了好大勁。每一張gif動的有點快，將就看。首先說原理：為activity的xml檔案根佈局新增setOnTouchListener。上下滑動和左右滑動的所有操作都是在OnTouchListener的onTouch方法中實現的，通過

Recycleview實現複雜頁面三種以上佈局瀑布流多佈局 scrollview巢狀recyclerView 顯示不全滑動衝突之進階終極篇（轉載）

=============================================================================================== 相信很多安卓開發的朋友，尤其是剛從事安卓開發的朋友，當產品經理遞過來一張複雜頁面的

Android之RecycleView使用（瀑布流管理器及線性流管理器）

public class RecyclerActivity extends Activity { @Bind(R.id.rv) RecyclerView rv; private List<Map> list; @Override protected voi

ViewPage左右滑動和PullToRefreshListView上下滑動事件衝突

這裡，相當於是PullToRefreshView嵌套了ViewPager，那麼每次優先接收到Touch事件的必然是PullToRefreshView。這樣就清楚了，看程式碼：在PullToRefre

RecycleView瀑布流及上下滑動和左右拖拽

相關推薦