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","四川荣县连发地震","以致两人死亡"));
}
}
这样,我们就能够实现了!(下图为虚拟机效果)