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 拓展 復制代碼 一.瀑布流之準備工作 首先聲明下, 為了方便演示和聯系, 我使用的是本地圖片, 如果大家有需要的話可以嘗試著寫下網絡的, 不過本地和遠端的大致是相同的. 那麽我就來簡單介紹下本地