项目源码已经上传到Gitee码云了(国内的GitHub,访问与下载速度极快,无需龟速等待),戳这里。
成品做成了瀑布流的形式,一行代码就可以搞定一列显示几行,类似于淘宝京东的商品显示,随心切换。
做软件和做菜是一样的,先准备好一些材料,这样做菜的时候随手就能下锅。
最新版本的Android Studio摒弃了老旧杂乱的各种包,一个AndroidX一把梭,什么AndroidV4、V7都不用了。
因为RecycleView不是默认就存在的基本组件,我们需要在layout布局文件中下载,无需代码,点点鼠标就行了
RecycleView旁边会有一个向下的箭头,点击确认下载就可以直接用了。
布局代码activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycler_view"
android:layout_height="match_parent"
android:layout_width="match_parent"
/>
</RelativeLayout>
item从名字来看,就知道是RecycleView中显示的项目了,我们预期的布局应该是长这个样子的,如下图:
item布局代码:看似有点多,其实就是简单的图片搭配文字,设计一些间距,其实很简单,你也可以根据自己的喜好搭配。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_margin="10dp">
<ImageView
android:id="@+id/food1"
android:layout_width="200dp"
android:layout_height="200dp"
android:src="@drawable/food1"
/>
<TextView
android:id="@+id/text1"
android:layout_below="@id/food1"
android:lines="2"
android:ellipsize="end"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:gravity="center"
android:text="奥尔良鸡腿,美味鲜香烤制"
/>
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/profile"
android:layout_below="@id/text1"
android:id="@+id/profile"
/>
<TextView
android:id="@+id/author"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/profile"
android:text="乐乐爱吃饭"
android:layout_marginLeft="10dp"
android:layout_below="@id/text1"/>
<ImageView
android:id="@+id/love"
android:layout_width="20dp"
android:layout_height="20dp"
android:src="@drawable/love"
android:layout_below="@id/text1"
android:layout_toLeftOf="@id/loveNum"
/>
<TextView
android:id="@+id/loveNum"
android:layout_below="@id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="7K"
android:layout_alignParentRight="true"
/>
</RelativeLayout>
布局的细节大家可以自己掌控,比如超出2行的字体就设置为省略号,代码与图见下方。
android:lines="2"
android:ellipsize="end"
package com.example.test1;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.DefaultItemAnimator;
import androidx.recyclerview.widget.DividerItemDecoration;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.OrientationHelper;
import androidx.recyclerview.widget.RecyclerView;
import androidx.recyclerview.widget.StaggeredGridLayoutManager;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private RecyclerView recyclerView;
private List<String> list;
private RecycleAdapterDome adapterDome;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
recyclerView = findViewById(R.id.recycler_view);
list = new ArrayList<>();
for (int i = 0; i < 100; i++) {
list.add("奥尔良鸡腿"+i+",美味鲜香,快来试试!便宜实惠又健康,还在等待什么呢!!!!");
}
adapterDome = new RecycleAdapterDome(this,list);
LinearLayoutManager manager = new LinearLayoutManager(this);
StaggeredGridLayoutManager stagger = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
recyclerView.setLayoutManager(stagger);
recyclerView.setAdapter(adapterDome);
}
}
上述代码,先获取布局文件中的RecycleView:
recyclerView = findViewById(R.id.recycler_view);
设置RecycleView显示为2列,垂直显示:
StaggeredGridLayoutManager stagger = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
RecycleView是用来显示数据的,我们来自定义一个数据集(正常情况下是从数据库或者服务器上获取的,这里为了方便演示简单自做一个数据集)
list = new ArrayList<>();
for (int i = 0; i < 100; i++) {
list.add("奥尔良鸡腿"+i+",美味鲜香,快来试试!便宜实惠又健康,还在等待什么呢!!!!");
}
有了RecycleView、数据集,还缺什么呢?当然是数据适配器(Adapter)
recyclerView.setAdapter(adapterDome);
RecycleAdapterDemo.java:
package com.example.test1;
import android.content.Context;
import android.content.Intent;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import java.util.List;
public class RecycleAdapterDome extends RecyclerView.Adapter<RecycleAdapterDome.MyViewHolder> {
private Context context;
private List<String> list;
private View inflater;
class MyViewHolder extends RecyclerView.ViewHolder{
TextView textView;
public MyViewHolder(View itemView) {
super(itemView);
textView = (TextView) itemView.findViewById(R.id.text1);
}
}
//构造方法,传入数据
public RecycleAdapterDome(Context context, List<String> list){
this.context = context;
this.list = list;
}
@NonNull
@Override
public RecycleAdapterDome.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
//创建ViewHolder,返回每一项的布局
inflater = LayoutInflater.from(context).inflate(R.layout.item1,parent,false);
MyViewHolder myViewHolder = new MyViewHolder(inflater);
return myViewHolder;
}
@Override
public void onBindViewHolder(@NonNull RecycleAdapterDome.MyViewHolder holder, int position) {
//将数据和控件绑定
holder.textView.setText(list.get(position));
}
@Override
public int getItemCount() {
return list.size();
}
}
RecycleView的数据适配器有点讲究,需要继承自 RecyclerView.Adapter,而且还要填入泛型数据——ViewHolder的名字
public class RecycleAdapterDome extends RecyclerView.Adapter<RecycleAdapterDome.MyViewHolder> {}
创建内部类ViewHolder负责对控件进行处理,布局中的控件都在这里进行初始化和管理:
class MyViewHolder extends RecyclerView.ViewHolder{
TextView textView;
public MyViewHolder(View itemView) {
super(itemView);
textView = (TextView) itemView.findViewById(R.id.text1);
}
}
继承自 RecyclerView.Adapter的类需要重写3个方法,分别是:
1.初始化创建视图处理器
public RecycleAdapterDome onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {}
若指定了ViewHolder的名字,改动如下:
public RecycleAdapterDome.MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {}
在视图处理器中,绑定要显示的item的布局文件,这样数据就会在屏幕上显示出来了
inflater = LayoutInflater.from(context).inflate(R.layout.item1,parent,false);
2.绑定内部控件,控件的具体操作都在这里面管理
public void onBindViewHolder(@NonNull RecycleAdapterDome.MyViewHolder holder, int position) {}
3.获取item的总数目
public int getItemCount() {}