1. 程式人生 > >RecycleView 實現瀑布流效果

RecycleView 實現瀑布流效果

1、用as開發,在build.gradle中新增依賴

dependencies {
        ...
        compile 'com.android.support:recyclerview-v7:21.0.3'
    }

2、用Eclipse開發,新增jar包

3、在xml佈局檔案中新增一個recycleview的佈局

<android.support.v7.widget.RecyclerView
        android:id="@+id/card_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="7dp"
        android:layout_marginTop="5dp"
        android:scrollbars="vertical" />


4、activity的oncreate方法中新增如下關鍵程式碼

View view = inflater.inflate(R.layout.card_recycleview, null);
card_recycler_view = (RecyclerView) view.findViewById(R.id.card_recycler_view);
card_recycler_view.setHasFixedSize(false);
StaggeredGridLayoutManager mStaggeredGridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);//表示兩列,並且是豎直方向的瀑布流
card_recycler_view.setLayoutManager(mStaggeredGridLayoutManager);

5、建立recycleview的資料介面卡
public class RenQiAdapter2 extends RecyclerView.Adapter<RenQiAdapter2.ViewHolder> implements View.OnClickListener {

    private List<StoreContent> data;//填充資料的集合
    protected ImageLoader imageLoader = ImageLoader.getInstance();//採用universal imageloader來載入圖片

    public RenQiAdapter2(List<StoreContent> data) {
        this.data = data;
    }

    public void setData(List<StoreContent> data) {
        this.data = data;
    }

    @Override
    public RenQiAdapter2.ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View view = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.card_store_detail_item, viewGroup, false);
        ViewHolder vh = new ViewHolder(view);
        view.setOnClickListener(this);
        return vh;
    }

    @Override
    public void onBindViewHolder(final RenQiAdapter2.ViewHolder viewHolder, final int i) {
        viewHolder.itemView.setTag(data.get(i));
        viewHolder.iv_store.setImageResource(R.drawable.whitebottom);
        viewHolder.iv_store.setTag(data.get(i).getCoverUrl());
        imageLoader.loadImage(data.get(i).getCoverUrl(), BaseConstants.optionscopy, new ImageLoadingListener() {
            @Override
            public void onLoadingStarted(String s, View view) {

            }

            @Override
            public void onLoadingFailed(String s, View view, FailReason failReason) {

            }

            @Override
            public void onLoadingComplete(String imgUrl, View view, Bitmap bitmap) {
                if (viewHolder.iv_store.getTag() != null
                        && viewHolder.iv_store.getTag().equals(imgUrl)) {
                    //此處程式碼獲取螢幕的寬高,實現不同螢幕的適配
                    int width = BaseApplication.getWindowWidth() / 2;
                    int height = width * bitmap.getHeight() / bitmap.getWidth();//高通過寬等比例縮放
                    RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                            width, height);
                    viewHolder.iv_store.setLayoutParams(params);
                    viewHolder.iv_store.setImageBitmap(bitmap);

                    viewHolder.tv_date.setText("總銷"
                            + data.get(i).getSale() + "件");
                    viewHolder.tv_price.setText("¥ "
                            + CommonUtils.getShortPrice(
                            data.get(i).getSalePrice(),
                            2));
                }
            }

            @Override
            public void onLoadingCancelled(String s, View view) {

            }
        });
    }

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

    @Override
    public void onClick(View v) {
        if (null != mOnItemClickListener) {
            mOnItemClickListener.onClick(v, (StoreContent) v.getTag());
        }
    }

    //建立一個viewholder類
    public static class ViewHolder extends RecyclerView.ViewHolder {
        ImageView iv_store;
        TextView tv_date;
        TextView tv_price;

        public ViewHolder(View itemView) {
            super(itemView);
            iv_store = (ImageView) itemView.findViewById(R.id.iv_store);
            tv_date = (TextView) itemView.findViewById(R.id.tv_date);
            tv_price = (TextView) itemView.findViewById(R.id.tv_price);
        }
    }

    private OnRecyclerViewItemClickListener mOnItemClickListener = null;

    public void setOnItemClickListener(OnRecyclerViewItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }

    public static interface OnRecyclerViewItemClickListener {
        void onClick(View view, StoreContent itemData);
    }
}

注:recycleview的資料介面卡,繼承RecycleView.Adapter的子類,此處繼承的是我在本類中定義的ViewHolder。強制重寫的方法:

onCreateViewHolder(),onBindViewHolder(),和getItemCount();

在onCreateViewHolder(),方法中,需要返回,與當前adapter繫結的viewholder;

在onBindViewHolder()方法中,將資料填充到控制元件中;

getItemCont()的作用與listview的adapter方法中的getItemCount()一樣。

6、給RecycleView新增adapter

if (null == rebateAdapter) {
            rebateAdapter = new RebateAdapter(activity, value);
            card_staggeredgridview.setAdapter(rebateAdapter);
            card_staggeredgridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    RebateDetail item = (RebateDetail) card_staggeredgridview.getAdapter().getItem(position);
                    ...
                }
            });
        } else {
            rebateAdapter.setData(value);
            rebateAdapter.notifyDataSetChanged();
        }

7、RecycleView仿造listview的onItemClick方法

7.1在adapter中定義一個介面,和抽象方法;

public static interface OnRecyclerViewItemClickListener {
        void onClick(View view, StoreContent itemData);
    }
7.2在adapter中定義一介面物件,並新增set方法;
 private OnRecyclerViewItemClickListener mOnItemClickListener = null;

    public void setOnItemClickListener(OnRecyclerViewItemClickListener listener) {
        this.mOnItemClickListener = listener;
    }

7.3adapter類實現View的onClickListener介面,重寫抽象方法
public class RenQiAdapter2 extends RecyclerView.Adapter<RenQiAdapter2.ViewHolder> implements View.OnClickListener {
.......
@Override
    public void onClick(View v) {
        if (null != mOnItemClickListener) {
            mOnItemClickListener.onClick(v, (StoreContent) v.getTag());
        }
    }
}
7.4 在bindviewholder方法中,將資料傳遞給view
 @Override
    public void onBindViewHolder(final RenQiAdapter2.ViewHolder viewHolder, final int i) {
    ......
    viewHolder.itemView.setTag(data.get(i));
    ......
}

7.5 給recycleview新增onitemclick方法
 card_staggeredgridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    RebateDetail item = (RebateDetail) card_staggeredgridview.getAdapter().getItem(position);
                    Intent intent = new Intent(activity, BaoBeiDetailActivity.class);
                    intent.putExtra("itemid", item.getItemId());
                    intent.putExtra("clickPostion", position);
                    activity.startActivity(intent);
                    activity.overridePendingTransition(R.anim.tran_in, R.anim.tran_out);
                }
            });

8、RecycleView 的資料更新

listview中更新資料,通過的方法是notifyDataSetChanged()

RecycleView中,可以只更新一條資料

在adapter類中,定義如下方法;可以在其他地方呼叫

public void changeData(int position){
        notifyItemChanged(position);
    }

    public void addData(int position){
        notifyItemInserted(position);
    }
    public void removeData(int position){
        notifyItemRemoved(position);
    }

相關推薦

RecycleView 實現瀑布效果

1、用as開發,在build.gradle中新增依賴 dependencies { ... compile 'com.android.support:recyclerview-v7:21.0.3' } 2、用Eclipse開發,新

RecycleView實現瀑布效果

public class MainActivity extends AppCompatActivity { private RecyclerView recycleview; private int image[] = {R.drawable.pre12, R.drawable.pre15,

【前端】用jQuery實現瀑布效果

scrollto title n) 個性 避免 ive gets type turn jQuery實現瀑布流效果 何為瀑布流:   瀑布流,又稱瀑布流式布局。是比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊並附加

5.使用RecyclerView優雅的實現瀑布效果

/** * 作者:Pich * 原文連結:http://me.woblog.cn/ * QQ群:129961195 * 微信公眾號:woblog * Github:https://github.com/lifengsofts */ 概述 從前我們想實現一個瀑布流效果是

原生js實現瀑布效果 函式封裝

實現目標:實現瀑布流佈局、當滾動條滾動到一定距離時載入圖片 瀑布流佈局:結合視窗改變 定位第一行的盒子 第二行第一個盒子接到第一行最矮的盒子下面 當接完後更新最矮盒子 以此類推 滾動載入圖片:案例是用陣列物件實現圖片載入 條件是當載入到最後一張圖片一半+最後盒子的offsetTop小於等於螢

只用css實現瀑布效果

<!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title></title>  &

web頁面和小程式頁面實現瀑布效果

  小程式實現瀑布流效果,和web頁面差不多,都要經過以下步驟: 1)、載入圖片,獲取圖片的寬高度; 2)、根據頁面需要顯示幾列計算每列的寬度; 3)、根據圖片真實寬度和每列的寬度比,計算出圖片需要顯示的高度; 4)、重新對圖片進行定位   1、web頁面瀑布流效果,先看效果圖(瀑布流+無限滾動載入):

RecyclerView的簡單使用以及實現瀑布效果

RecyclerView 簡介 RecyclerView是support.v7包中的控制元件,可以認為是ListView和GridView的增強版,RecyclerView提供了一個耦合度更低的方式來複用ViewHolder,可以更輕鬆的實現瀑布流的效果,為增加和刪除條目提

Android中利用RecyclerView實現瀑布效果

RecyclerView相比於傳統的ListView,功能更加強大,使用也比較方便,因此Android官方更加推薦使用RecycleView,未來也會有更多的程式逐漸從ListView轉向RecycleView。為此,首先先來了解下RecycleView的用法。當然,最先看

自定義ViewGroup實現瀑布效果

今天情人節,我卻在家裡看書寫程式碼,真屌絲啊哈~ 回顧:ViewGroup的時間分發流程: dispatchTouchEvent ----- onInterceptTouchEvent----- onTouchEvent 最外層的ViewGroup首先接收到觸控事件,然後

Android使用Recycler View實現瀑布效果

下圖是淘寶上瀑布流的一個應用場景,今天我們就來用Recycler View實現以下瀑布流效果 一:建立Activity activity中 核心程式碼為 mRvPu.setLayoutManager(new StaggeredGridLayoutManager(2,

CSS3實現瀑布效果

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>瀑布流的純css實現</title></head><

純css實現瀑布效果

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>純CSS3實現的瀑布流</title> <link

移動端通過JQ實現瀑布效果方法

近期做了一個移動端的搜尋瀑布流的效果,現在這種前端效果被廣泛使用在各大無限裝置上,方便、簡潔、流暢是其最大特性!這次的效果是頁面每行三個div展示內容,共三行。最底部用文字“獲取更多”來提示使用者點選“獲取更多”通過JQ實現頁面無重新整理從資料庫查詢新的內容,並插入到原內容底

RecylerView實現瀑布效果

在activity中寫入 //獲取控制元件 recyclerView = view.findViewById(R.id.rv); RecyProcenter procenter = new RecyProcenter(this); procent

android RecycleView實現瀑布

介面卡器 package com.shilian.ceshi.recycle; import android.content.Context; import android.support.v7.widget.RecyclerView; import android.vi

RecyclerView 實現瀑布效果

上次用RecyclerView實現了ListView的效果,這次用RecyclerView實現一個瀑布流的效果~ 先上效果圖: 是不是感覺不錯啊~ 其實很簡單~ 只要換一個佈局管理器就行了 mRecyclerView.setLayoutManager(new Sta

快取+懶載入實現瀑布效果

頁面程式碼: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>最佳影片TOP200推送</title&g

OkHttp網路獲取資料通過RecycleView展示,實現ListView,GridView(網格佈局),瀑布效果展示

因為涉及到網路請求資料 那麼首先我們先要在清單檔案 新增網路許可權,已經註冊MyApp(設定圖片的自定義類,需要註冊) <uses-permission android:name="android.permission.INTERNET"/>

利用JS實現簡單的瀑布效果

color position func 如何實現 利用 無限 bar 拓展 復制代碼 一.瀑布流之準備工作    首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那麽我就來簡單介紹下本地