欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Android开发之RecyclerView实现流式布局

程序员文章站 2022-06-08 16:25:36
...

RecyclerView是什么?

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

RecyclerView能做什么?

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

用到的技术点:

  1. Glide 图片下载
  2. Volley联网请求
  3. RecycleView 瀑布流
  4. SwipeRefreshLayout 下拉刷新
  5. JSONObject 原生的 json 解析
  6. ButterKnife 进行findViewById

需要说明:

  • 我是在Fragment中实现的.
  • 我的Fragment是继承的一个BaseFragment ,这里就不贴代码了, 里面只有一个抽象方法 getTitle()
  • 我这是在项目中遇到的点, 所以使用的不少的第三方, 如果大家只是一个简单的流式布局的实现, 没有必要使用这些第三方的东西, 完全可以用原生实现.

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

Android开发之RecyclerView实现流式布局

主布局

接下来我们来说下他的实现方法, 首先看 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>1

  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
Fragment中
  1. 相应的解释在注释当中, 读者有什么迷惑的地方, 可以留言给我.
  2. 这里解释, 前文提到的下来刷新, 本文以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();
    }

适配器
  1. 最后就是编写适配器了, 最后我们发现, 实现流式布局的关键是 对每个item进行高度的重新随机设置.
  2. 实现监听事件, 定义一个接口, 在fragment中重写相应的回调方法.
  3. 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));
        }
    }