RecyclerView及瀑布流布局

RecyclerView及瀑布流布局

ListView在现如今的安卓项目中用的越来越少，而RecyclerView在实际的应用中愈加广泛，所以本篇将结合一个例子详细说明一下RecyclerView及瀑布流布局的用法

我们要实现的是类似于热搜的一个界面，下面来看代码：

先建立一个activity_main.xml文件，用于v7包（系统已经存在的一个包，可以用于兼容非当前版本的安卓系统），代码如下：

<?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="match_parent">
    
//引入v7包，这个包下面包含RecyclerView，写入id，width和height都采用match_parent，
//因为这个活动是一个很大的部分，所以要填充在整个屏幕，将屏幕的布局分为一块一块的小格局
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

此时，最基本的RecyclerView的配置已经在activity_main.xml中完成，下面就来分析一下新闻都包括什么，即它的组成。可以知道包括标题的序号，主标题和小标题，那么就写一个最简单News.java吧，代码如下：

package com.example.mynews;

public class News {
    private String id;
    private String title1;
    private String title2;
    
    public News(String id, String title1, String title2){
        this.id = id;
        this.title1 = title1;
        this.title2 = title2;
    }
    public String getId(){
        return id;
    }
    public String getTitle1(){
        return title1;
    }
    public String getTitle2(){
        return title2;
    }
}

这里的代码就不加注释了，作用就是负责传值的，这也是最常见的getter方法

那么后端的程序先不管，我们不妨将前端的格式给定下来，之后再将后端和适配器搞定

那就写一个layout_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="60dp"
              android:orientation="horizontal">

    <TextView
        android:id="@+id/id_item_id"
        android:layout_width="30dp"
        android:layout_height="wrap_content"
        android:text="1"
        android:textSize="18sp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/id_item_title1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="工作后如何快速成长"
            android:textSize="18sp"/>

        <TextView
            android:id="@+id/id_item_title2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="大家都在搜"
            android:textSize="14sp"/>
    </LinearLayout>
</LinearLayout>

下面的代码就是适配器了。如果说findViewById是用于后端查找前端控件的，那么适配器则是用于将前端后端建立联系的一个东西，其具体作用是能够将后端的数据传入到前端的控件上。

package com.example.mynews;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.List;

public class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder> {
    private List<News> mNewsList;
    static class ViewHolder extends RecyclerView.ViewHolder{
        TextView newsId,newsTitle1,newsTitle2;

        public ViewHolder(View view){
            super(view);
            newsId = (TextView) view.findViewById(R.id.id_item_id);
            newsTitle1 = (TextView) view.findViewById(R.id.id_item_title1);
            newsTitle2 = (TextView) view.findViewById(R.id.id_item_title2);
        }
    }

    public NewsAdapter(List<News> newsList){
        mNewsList = newsList;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent,int viewType){
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_item,parent,false);
        ViewHolder holder = new ViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(ViewHolder holder,int position){
        News news = mNewsList.get(position);
        holder.newsId.setText(news.getId());
        holder.newsTitle1.setText(news.getTitle1());
        holder.newsTitle2.setText(news.getTitle2());

    }
用于获取长度的这段代码虽然没有用，但由于是三大@OverLoad之一，所以一定要有
    @Override
    public int getItemCount(){
        return mNewsList.size();
    }
}

最后的数据，MainActivity.java，代码如下：

package com.example.mynews;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    private List<News> NewsList = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化数据
        initNews();

        //创建recyclerView对象，与主界面中id为recycler_view的recyclerView进行关联
        RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
        //定义一个表格样式，用到了瀑布流，目的是将数据变为两列
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);

        //LinearLayoutManager layoutManager = new LinearLayoutManager(this);
       //设置recyclerView的样式
        recyclerView.setLayoutManager(layoutManager);
        //创建adapter，并且传入数据（数据必须通过adapter才能与recyclerView绑定）
        NewsAdapter adapter = new NewsAdapter(NewsList);
        //把adapter里面的数据在recyclerView中显示
        recyclerView.setAdapter(adapter);
    }

    //初始化数据方法
    private void initNews(){

        NewsList.add(new News("1","工作后如何快速成长","大家都在搜"));
        NewsList.add(new News("2","华为Mate X","5G 折叠屏手机" ));
        NewsList.add(new News("3","住建部取消公摊面积","将产生什么影响"));
        NewsList.add(new News("4","第91届奥斯卡奖","获奖名单公布"));
        NewsList.add(new News("5","阿丽塔：战斗天使","卡梅隆编剧及监制"));
        NewsList.add(new News("6","怒晴湘西","迎来大结局"));
        NewsList.add(new News("7","绿皮书","奥斯卡最佳影片"));
        NewsList.add(new News("8","四川荣县连发地震","以致两人死亡"));

    }
}

这样，我们就能够实现了！（下图为虚拟机效果）