android 流式listview,Android开发之RecyclerView实现流式布局

RecyclerView是什么?

RecycleView的出现, 替代了ListView, 没了OnitemClickListener,; LayoutManager负责计算布局; Adapter 负责适配,还增加了ViewHolder;RecycleView只负责调度, 让每个Item去干他们想做的事情. 这让事情看起来很有条例.

RecyclerView能做什么?

我们知道RecyclerView中默认给我们提供了三种布局管理器，分别是LinearLayoutManager、 GridLayoutManager、StaggeredGridLayoutManager。其中 StaggeredGridLayoutManager可实现交错式网格布局，正好可以用来实现瀑布流。

用到的技术点:

Glide 图片下载

Volley联网请求

RecycleView 瀑布流

SwipeRefreshLayout 下拉刷新

JSONObject 原生的 json 解析

ButterKnife 进行findViewById

需要说明:

我是在Fragment中实现的.

我的Fragment是继承的一个BaseFragment ,这里就不贴代码了, 里面只有一个抽象方法 getTitle()

我这是在项目中遇到的点, 所以使用的不少的第三方, 如果大家只是一个简单的流式布局的实现, 没有必要使用这些第三方的东西, 完全可以用原生实现.

今天我们就来实现一个简单的瀑布流, 先来张图

GIF.gif

主布局

接下来我们来说下他的实现方法, 首先看 xml文件

涉及到的下拉刷新, 在下面将会解释.

android:id="@+id/frag_recommend_3_swipe"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/frag_recommend_3"

android:layout_width="match_parent"

android:layout_height="match_parent"/>

每一个item的布局

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#cacfa1ed"

android:padding="@dimen/padding_default_min_min">

android:id="@+id/item_frag_recommend_image"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:adjustViewBounds="true"

android:scaleType="centerCrop"

android:background="#4f92c9"

android:src="@mipmap/ic_tree"/>

android:id="@+id/item_frag_recommend_name"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_gravity="bottom"

android:padding="@dimen/padding_default_min"

android:text="姓名"

android:textColor="@color/balck"

android:maxLines="1"

android:ellipsize="end"

android:textSize="@dimen/txt_size_default_min_min_size"/>

用到的实体类

public class FragRecommend3Item {

private String imageUrl;

private String name;

private String flvUrl;

public static FragRecommend3Item createItmfromJson(JSONObject json) {

FragRecommend3Item ret = new FragRecommend3Item();

ret.name = json.optString("myname");

ret.imageUrl = json.optString("smallpic");

ret.flvUrl = json.optString("flv");

return ret;

}

...

getter ... setter...

...

}

Fragment中

相应的解释在注释当中, 读者有什么迷惑的地方, 可以留言给我.

这里解释, 前文提到的下来刷新, 本文以SwipeRefreshLayout为例，想要RecyclerView支持下拉刷新，加载更多，必然要将两者封装到一起. 我理解的是将SwipeRefreshLayout 包含RecyclerView , 实现下拉刷新.这个RecycleView的封装有关, 读者可自行查阅资料.

public class RecommendFragment3 extends BaseFragment implements FragRecommmed3Adapter.OnViewItemClickListener, SwipeRefreshLayout.OnRefreshListener {

@BindView(R.id.frag_recommend_3)

RecyclerView mRecyclerView;

@BindView(R.id.frag_recommend_3_swipe)

SwipeRefreshLayout mRefreshLayout;

private List mItems;

private FragRecommmed3Adapter mAdapter;

private String url = "http://live.9158.com/Room/GetHotLive_v2?lon=0.0&province=&lat=0.0&page=1&type=1";

public RecommendFragment3() {

}

@Override

public void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup container,

Bundle savedInstanceState) {

View ret = inflater.inflate(R.layout.fragment_recommend_fragment3, container, false);

ButterKnife.bind(this, ret);

initData(ret);

return ret;

}

private void initData(View ret) {

// 设置下拉刷新

mRefreshLayout.setOnRefreshListener(this);

mItems = new ArrayList<>();

// 一开始的死数据, 测试使用

for (int i = 0; i < 100; i++) {

FragRecommend3Item item = new FragRecommend3Item();

item.setImageUrl("sdf");

item.setName("hahahhaha");

mItems.add(item);

}

// 进行联网请求数据

getDataVolley();

initRecycleView();

}

private void initRecycleView() {

mAdapter = new FragRecommmed3Adapter(mItems, getContext());

mRecyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));

mRecyclerView.setAdapter(mAdapter);

}

// 联网请求 Volley的使用

// 首先我们需要创建一个RequestQueue reqQueue，

// 然后构建一个自己所需要的XXRequest req，之后通过reqQueue.add(req);将请求添加至请求队列；

private void getDataVolley() {

mRefreshLayout.setRefreshing(true);

final RequestQueue requestQueue = Volley.newRequestQueue(getContext());

JsonObjectRequest request = new JsonObjectRequest(Request.Method.GET, url, new Response.Listener() {

@Override

public void onResponse(JSONObject response) {

// 添加自己的响应逻辑

// 请求到数据之后, 清除之前的.

mItems.clear();

JSONArray listArray = response.optJSONObject("data").optJSONArray("list");

int len = listArray.length();

for (int i = 0; i < len; i++) {

JSONObject json = listArray.optJSONObject(i);

FragRecommend3Item item = FragRecommend3Item.createItmfromJson(json);

mItems.add(item);

}

mAdapter.notifyDataSetChanged();

mRefreshLayout.setRefreshing(false);

}

}, new Response.ErrorListener() {

@Override

public void onErrorResponse(VolleyError error) {

// 错误处理

Toast.makeText(getContext(), "联网错误", Toast.LENGTH_SHORT).show();

mRefreshLayout.setRefreshing(false);

}

});

requestQueue.add(request);

}

@Override

public String getTitle() {

return "最新";

}

@Override

public void setOnClickListener(View view, int position) {

// TODO: 点击播放

Toast.makeText(getContext(), mItems.get(position).getName(), Toast.LENGTH_SHORT).show();

}

@Override

public void onRefresh() {

getDataVolley();

}

适配器

最后就是编写适配器了, 最后我们发现, 实现流式布局的关键是 对每个item进行高度的重新随机设置.

实现监听事件, 定义一个接口, 在fragment中重写相应的回调方法.

Glide联网下载图片的使用, 和Pisscao类似.

public class FragRecommmed3Adapter extends RecyclerView.Adapter {

private List mItems;

private Context mContext;

private OnViewItemClickListener mItemClickListener;

private List heights;

public FragRecommmed3Adapter(List items, Context context) {

mItems = items;

mContext = context;

getRandomHeight(this.mItems);

}

public interface OnViewItemClickListener {

void setOnClickListener(View view, int position);

}

@Override

public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

ViewHolder ret = null;

View view = LayoutInflater.from(mContext).inflate(R.layout.item_recomment_3, parent, false);

ret = new ViewHolder(view);

return ret;

}

@Override

public void onBindViewHolder(ViewHolder holder, final int position) {

FragRecommend3Item item = mItems.get(position);

ViewGroup.LayoutParams params = holder.itemView.getLayoutParams();//得到item的LayoutParams布局参数

params.height = heights.get(position);//把随机的高度赋予itemView布局

holder.itemView.setLayoutParams(params);//把params设置给itemView布局

holder.mNameTxt.setText(item.getName());

Glide.with(mContext)

.load(item.getImageUrl())

// 占位图

.placeholder(R.mipmap.ic_tree)

// 加载错误图

.error(R.mipmap.ic_tree)

// 让Glide既缓存全尺寸又缓存其他尺寸

// .diskCacheStrategy(DiskCacheStrategy.ALL)

.into(holder.mImage);

holder.itemView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

if (mItemClickListener != null) {

mItemClickListener.setOnClickListener(v, position);

}

}

});

}

@Override

public int getItemCount() {

int ret = 0;

if (mItems != null) {

ret = mItems.size();

}

return ret;

}

public static class ViewHolder extends RecyclerView.ViewHolder {

@BindView(R.id.item_frag_recommend_image)

ImageView mImage;

@BindView(R.id.item_frag_recommend_name)

TextView mNameTxt;

public ViewHolder(View itemView) {

super(itemView);

ButterKnife.bind(this, itemView);

}

}

public void setItemClickListener(OnViewItemClickListener itemClickListener) {

mItemClickListener = itemClickListener;

}

private void getRandomHeight(List lists){//得到随机item的高度

heights = new ArrayList<>();

for (int i = 0; i < lists.size(); i++) {

heights.add((int)(300+Math.random()*400));

}

}

到这里, 一个简单的流式布局就已经实现了, 感谢读者的耐心阅读.