Android使用Recycler View實現瀑布流效果
阿新 • • 發佈:2019-01-08
下圖是淘寶上瀑布流的一個應用場景,今天我們就來用Recycler View實現以下瀑布流效果
一:建立Activity
activity中 核心程式碼為
mRvPu.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL));
該行程式碼使用layoutmanager實現一個兩列的垂直佈局,API解釋如下
new StaggeredGridLayoutManager(行數/列數,水平/垂直)
package com.example.fitz.demo4.recycleView; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.StaggeredGridLayoutManager; import com.example.fitz.demo4.R; public class PuRecyclerViewActivity extends AppCompatActivity { private RecyclerView mRvPu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_pu_recycler_view); mRvPu=(RecyclerView)findViewById(R.id.rv_pu); //設定佈局方式,2列,垂直 mRvPu.setLayoutManager(new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL)); mRvPu.setAdapter(new StaggeredGridAdapter(PuRecyclerViewActivity.this)); } }
二:Adapter的構建
沒什麼特別的地方
package com.example.fitz.demo4.recycleView; 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.AdapterView; import android.widget.ImageView; import android.widget.TextView; import android.widget.Toast; import com.example.fitz.demo4.R; import java.util.ArrayList; import java.util.List; public class StaggeredGridAdapter extends RecyclerView.Adapter<StaggeredGridAdapter.LinearViewHolder>{ private Context mContext; private AdapterView.OnItemClickListener mListener; private List<String> list=new ArrayList<>(); public StaggeredGridAdapter(Context mContext) { this.mContext = mContext; for(int i=0;i<30;i++){ list.add(String.format("%s-%s", i/10+1,i)); } } @Override public StaggeredGridAdapter.LinearViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new LinearViewHolder(LayoutInflater.from(mContext).inflate(R.layout.layout_staggere_grid_item,parent,false)); } @Override public void onBindViewHolder(StaggeredGridAdapter.LinearViewHolder holder, int position) { if(position%2==0){ holder.mImageView.setImageResource(R.drawable.baby1); } else{ holder.mImageView.setImageResource(R.drawable.baby2); } } @Override public int getItemCount() { return 30; } class LinearViewHolder extends RecyclerView.ViewHolder{ private ImageView mImageView; public LinearViewHolder(View itemView){ super(itemView); mImageView=(ImageView) itemView.findViewById(R.id.iv); } } }
三:佈局檔案 layout_staggere_grid_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/iv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="2dp" android:scaleType="centerCrop"/> </LinearLayout>
當執行時候可得到如下效果,自此一個瀑布流就實現了,之後可以根據業務場景寫點選事件或是UI上加入TextView做其他用途等,這裡有可能會有OOM問題,下次在講啦