Android开发之RecyclerView实现流式布局
2016-11-19 23:16
465 查看
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()
我这是在项目中遇到的点, 所以使用的不少的第三方, 如果大家只是一个简单的流式布局的实现, 没有必要使用这些第三方的东西, 完全可以用原生实现.
今天我们就来实现一个简单的瀑布流, 先来张图
主布局
接下来我们来说下他的实现方法, 首先看 xml文件
涉及到的下拉刷新, 在下面将会解释.
<android.support.v4.widget.SwipeRefreshLayout android:id="@+id/frag_recommend_3_swipe" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/frag_recommend_3" android:layout_width="match_parent" android:layout_height="match_parent"/> </android.support.v4.widget.SwipeRefreshLayout>
每一个item的布局
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#cacfa1ed" android:padding="@dimen/padding_default_min_min"> <ImageView 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"/> <TextView 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"/> </FrameLayout>
用到的实体类
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<FragRecommend3Item> 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<JSONObject>() { @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<FragRecommmed3Adapter.ViewHolder> { private List<FragRecommend3Item> mItems; private Context mContext; private OnViewItemClickListener mItemClickListener; private List<Integer> heights; public FragRecommmed3Adapter(List<FragRecommend3Item> 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<FragRecommend3Item> lists){//得到随机item的高度 heights = new ArrayList<>(); for (int i = 0; i < lists.size(); i++) { heights.add((int)(300+Math.random()*400)); } }
到这里, 一个简单的流式布局就已经实现了, 感谢读者的耐心阅读.
另附源码:
https://github.com/Snail1995/RecycleViewDemo
相关文章推荐
- android开发之&使用RecyclerView实现瀑布流布局(二)
- android开发之&使用RecyclerView实现瀑布流布局(一)
- Android开发之玩转FlexboxLayout布局(可用于普通控件实现流式布局,也可结合RecycleView实现流式布局)
- android 自定义view实现流式布局
- Android RecyclerView多个Item布局的实现(可实现头部底部)
- Android App开发中使用RecyclerView实现Gallery画廊的实例
- Android中RecyclerView布局代替GridView实现类似支付宝的界面
- Android RecyclerView详解及实现瀑布流式布局 推荐
- android studio pulltorefresh功能实现 通过swiperefreshlayout 使用recyclerview布局
- Android开发笔记之RecycleView加载不同item布局的实现
- [置顶] Android使用RecyclerView和CardView,实现知乎日报精致布局
- Android开发之实现RecyclerView万能适配器
- Android RecyclerView加载不同布局简单实现
- Android 使用RecyclerView实现多列布局及其优劣
- RecyclerView实现流式布局并添加headerview、footerview
- Android RecyclerView加载不同布局简单实现
- 【android】使用RecyclerView和CardView,实现知乎日报精致布局
- Android开发中自定义View设定到FrameLayout布局中实现多组件显示
- android开发游记:RecycleView 实现复杂首页布局三种方式
- Android开发中自定义View设定到FrameLayout布局中实现多组件显示