分类导航

Android 发布时间：2022-04-28 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了Android应用开发中RecyclerView组件使用入门教程，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

RecyclerView是一种列表容器,发布很久了,才想起来写点什么.

RecyclerView相比于ListView,在回收重用时更具有灵活性,也就是低耦合,并且提供了扩展. 加载多个视图时,应该多用RecyclerView代替ListView.

那么我们来看看这东西应该怎么用? 比如生成一个瀑布流的视图.

Android应用开发中RecyclerView组件使用入门教程

首先我们从一个 HelloWorld写起,看看如何构建一个RecyclerView.

1. 依赖库
Gradle配置,添加Recycler库

compile 'com.android.support:recyclerview-v7:+'

2. 资源文件
资源文件

 <android.support.v7.widget.RecyclerView
  android:id="@+id/test_recycler_view"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

3. 代码
LayoutManager: 管理RecyclerView的结构.
Adapter: 处理每个Item的显示.
ItemDecoration: 添加每个Item的装饰.
ItemAnimator: 负责添加\移除\重排序时的动画效果.

LayoutManager\Adapter是必须,ItemDecoration\ItemAnimator是可选.
 /**
  * 初始化RecyclerView
  *
  * @param recyclerView 主控件
  */
 private void initRecyclerView(RecyclerView recyclerView) {
  recyclerView.setHasFixedSize(true); // 设置固定大小
  initRecyclerLayoutManager(recyclerView); // 初始化布局
  initRecyclerAdapter(recyclerView); // 初始化适配器
  initItemDecoration(recyclerView); // 初始化装饰
  initItemAnimator(recyclerView); // 初始化动画效果
 }

4. LayoutManager
管理RecyclerView的布局结构.

 private void initRecyclerLayoutManager(RecyclerView recyclerView) {
  // 错列网格布局
  recyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL));
 }

提供了多种LayoutManager,瀑布流使用错列网格布局.
5. Adapter
适配器,处理RecyclerView的Item事务.

 private void initRecyclerAdapter(RecyclerView recyclerView) {
  mAdapter = new MyAdapter(getData());
  recyclerView.setAdapter(mAdapter);
 }

对于Adapter,我们需要展开来说,先看看类.

public class MyAdapter extends RecyclerView.Adapter<MyViewHolder> {

 private List<DataModel> mDataModels;
 private List<Integer> mHeights;

 MyAdapter(List<DataModel> dataModels) {
  if (dataModels == null) {
   throw new IllegalArgumentexception("DataModel must not be null");
  }
  mDataModels = dataModels;
  mHeights = new ArrayList<>();
 }

 @Override
 public MyViewHolder onCreateViewHolder(ViewGroup parent,int viewTypE) {
  View itemView = LayoutInflater.from(parent.getContext())
    .inflate(R.layout.item_recycler_view,parent,falsE);
  return new MyViewHolder(itemView);
 }

 @Override
 public void onBindViewHolder(MyViewHolder holder,int position) {
  DataModel dataModel = mDataModels.get(position);

  // 随机高度,模拟瀑布效果.
  if (mHeights.size() <= position) {
   mHeights.add((int) (100 + Math.random() * 300));
  }

  ViewGroup.LayoutParams lp = holder.getTvLabel().getLayoutParams();
  lp.height = mHeights.get(position);

  holder.getTvLabel().setLayoutParams(lp);

  holder.getTvLabel().setText(dataModel.getLabel());
  holder.getTvdatetiR_228_11845@e().setText(new SimpleDateFormat("yyyy-MM-dd",Locale.ENGLISH)
    .format(dataModel.getdatetiR_228_11845@e()));
 }

 @Override
 public int getItemCount() {
  return mDataModels.size();
 }

 public void addData(int position) {
  DataModel model = new DataModel();
  model.setdatetiR_228_11845@e(getBeforeDay(new Date(),position));
  model.setLabel("No. " + (int) (new Random().nextDouble() * 20.0f));

  mDataModels.add(position,model);
  notifyItemInserted(position);
 }

 public void removeData(int position) {
  mDataModels.remove(position);
  notifyItemRemoved(position);
 }

 /**
  * 获取日期的前一天
  *
  * @param date 日期
  * @param i 偏离
  * @return 新的日期
  */
 private static Date getBeforeDay(Date date,int i) {
  Calendar calendar = Calendar.geTinstance();
  calendar.setTime(datE);
  calendar.add(Calendar.DAY_OF_YEAR,i * (-1));
  return calendar.getTime();
 }
}

（1）onCreateViewHolder创建ViewHolder.

（2）onBindViewHolder绑定每一项数据.

（3）getItemCount返回列表长度.

（4）RecyclerView强制使用ViewHolder.

public class MyViewHolder extends RecyclerView.ViewHolder {

 private TextView mTvLabel; // 标签
 private TextView mTvdatetiR_228_11845@e; // 日期

 public MyViewHolder(View itemView) {
  super(itemView);
  mTvLabel = (TextView) itemView.findViewById(R.id.item_text);
  mTvdatetiR_228_11845@e = (TextView) itemView.findViewById(R.id.item_datE);
 }

 public TextView getTvLabel() {
  return mTvLabel;
 }

 public TextView getTvdatetiR_228_11845@e() {
  return mTvdatetiR_228_11845@e;
 }

}

在onCreateViewHolder方法,创建类; 在onBindViewHolder方法,绑定数据.
DataModel

public class DataModel {

 private String mLabel;
 private Date mdatetiR_228_11845@e;

 public String getLabel() {
  return mLabel;
 }

 public void setLabel(String label) {
  mLabel = label;
 }

 public Date getdatetiR_228_11845@e() {
  return mdatetiR_228_11845@e;
 }

 public void setdatetiR_228_11845@e(Date datetiR_228_11845@E) {
  mdatetiR_228_11845@e = datetiR_228_11845@e;
 }
}

6. ItemDecoration
项的装饰,比如ListView中的分割线,在本例中,左右两条粉线.

 private void initItemDecoration(RecyclerView recyclerView) {
  recyclerView.addItemDecoration(new MyItemDecoration(this));
 }

ItemDecoration,注意parent和child的使用方式.

public class MyItemDecoration extends RecyclerView.ItemDecoration {

 private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
 private Drawable mDivider;

 public MyItemDecoration(Context context) {
  final TypedArray array = context.obtainStyledAttributes(ATTRS);
  mDivider = array.getDrawable(0);
  array.recycle();
 }

 @Override
 public void onDraw(Canvas c,RecyclerView parent,State statE) {
  drawHorizontal(c,parent);
  drawVertical(c,parent);
 }

 // 水平线
 public void drawHorizontal(Canvas c,RecyclerView parent) {

  final int childCount = parent.getChildCount();

  // 在每一个子控件的底部画线
  for (int i = 0; i < childCount; i++) {
   final View child = parent.getChildAt(i);

   final int left = child.getLeft() + child.getPaddingLeft();
   final int right = child.getWidth() + child.getLeft() - child.getPaddingRight();
   final int top = child.getBottom() - mDivider.geTintrinsicHeight() - child.getPaddingBottom();
   final int bottom = top + mDivider.geTintrinsicHeight();
   mDivider.setBounds(left,top,right,bottom);
   mDivider.draw(c);
  }
 }

 // 竖直线
 public void drawVertical(Canvas c,RecyclerView parent) {

  final int childCount = parent.getChildCount();

  // 在每一个子控件的右侧画线
  for (int i = 0; i < childCount; i++) {
   final View child = parent.getChildAt(i);
   int right = child.getright() - child.getPaddingRight();
   int left = right - mDivider.geTintrinsicWidth();
   final int top = child.getTop() + child.getPaddingTop();
   final int bottom = child.getTop() + child.getHeight() - child.getPaddingBottom();

   mDivider.setBounds(left,bottom);
   mDivider.draw(c);
  }
 }

 // Item之间的留白
 @Override
 public void getItemOffsets(Rect outRect,@R_674_3868@,State statE) {
  outRect.set(0,mDivider.geTintrinsicWidth(),mDivider.geTintrinsicHeight());
 }
}

本例重写了listDivider

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
  ...
  <item name="android:listDivider">@drawable/divider_bg</item>
 </style>
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://scheR_228_11845@as.android.com/apk/res/android"
  android:shape="rectangle">
 <solid android:color="#ff00ff"/>
 <size android:height="4dp"/>
 <size android:width="4dp"/>
</shape>

7. ItemAnimator
动画效果比较复杂,使用默认动画. 如要定制的话,继承DefaultItemAnimator; 如设置null,则@L_618_25@任何动画.

 private void initItemAnimator(RecyclerView recyclerView) {
  recyclerView.setItemAnimator(new DefaultItemAnimator()); // 默认动画
 }

8. 最终Activity

public class MainActivity extends AppCompatActivity {

 private MyAdapter mAdapter;

 @Override
 protected void onCreate(Bundle savedInstanceStatE) {
  super.onCreate(savedInstanceStatE);
  setContentView(R.layout.activity_main);
  Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  setSupportActionBar(toolbar);

  FloaTingActionButton fab = (FloaTingActionButton) findViewById(R.id.fab);
  fab.setOnClickListener(new View.onClickListener() {
   @Override
   public void onClick(@R_674_3868@) {
    Snackbar.make(view,"replace with your own action",Snackbar.LENGTH_LONG)
      .setAction("Action",null).show();
   }
  });

  // 初始化RecyclerView
  initRecyclerView((RecyclerView) findViewById(R.id.test_recycler_view));
 }

 /**
  * 初始化RecyclerView
  *
  * @param recyclerView 主控件
  */
 private void initRecyclerView(RecyclerView recyclerView) {
  recyclerView.setHasFixedSize(true); // 设置固定大小
  initRecyclerLayoutManager(recyclerView); // 初始化LayoutManager
  initRecyclerAdapter(recyclerView); // 初始化Adapter
  initItemDecoration(recyclerView); // 初始化边界装饰
  initItemAnimator(recyclerView); // 初始化动画效果
 }

 /**
  * 初始化RecyclerView的LayoutManager
  *
  * @param recyclerView 主控件
  */
 private void initRecyclerLayoutManager(RecyclerView recyclerView) {
  // 错列网格布局
  recyclerView.setLayoutManager(new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL));
 }

 /**
  * 初始化RecyclerView的Adapter
  *
  * @param recyclerView 主控件
  */
 private void initRecyclerAdapter(RecyclerView recyclerView) {
  mAdapter = new MyAdapter(getData());
  recyclerView.setAdapter(mAdapter);
 }

 /**
  * 初始化RecyclerView的(ItemDecoration)项目装饰
  *
  * @param recyclerView 主控件
  */
 private void initItemDecoration(RecyclerView recyclerView) {
  recyclerView.addItemDecoration(new MyItemDecoration(this));
 }

 /**
  * 初始化RecyclerView的(ItemAnimator)项目动画
  *
  * @param recyclerView 主控件
  */
 private void initItemAnimator(RecyclerView recyclerView) {
  recyclerView.setItemAnimator(new DefaultItemAnimator()); // 默认动画
 }

 /**
  * 模拟的数据
  *
  * @return 数据
  */
 private ArrayList<DataModel> getData() {
  int count = 57;
  ArrayList<DataModel> data = new ArrayList<>();
  for (int i = 0; i < count; i++) {
   DataModel model = new DataModel();

   model.setdatetiR_228_11845@e(getBeforeDay(new Date(),i));
   model.setLabel("No. " + i);

   data.add(model);
  }

  return data;
 }

 /**
  * 获取日期的前一天
  *
  * @param date 日期
  * @param i 偏离
  * @return 新的日期
  */
 private static Date getBeforeDay(Date date,i * (-1));
  return calendar.getTime();
 }


 @Override
 public Boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.menu_main,menu);
  return true;
 }

 @Override
 public Boolean onOptionsItemSELEcted(MenuItem item) {
  // Handle action bar item clicks here. The action bar will
  // automatically handle clicks on the Home/Up button,so long
  // as you specify a parent activity in AndroidManifest.xml.
  int id = item.getItemId();

  switch (item.getItemId()) {
   case R.id.id_action_add:
    mAdapter.addData(1);
    break;
   case R.id.id_action_delete:
    mAdapter.removeData(1);
    break;
  }

  //noinspection SimplifiableIfStatement
  if (id == R.id.action_setTings) {
   return true;

  }

  return super.onOptionsItemSELEcted(item);
 }
}

为了测试动画,Menu额外添加两个按钮。

9.运行ReactNative示例
既然感觉ReactNative开发靠谱,那么我们就来看看ReactNative都能做哪些好玩的东西,和原生的有哪些区别?
示例图

Android应用开发中RecyclerView组件使用入门教程

按照文档安装一些命令行工具,再下载Git代码.
Github: https://github.com/facebook/react-native

内容很多,包含一些依赖库和示例(ExamplE),下载的有点慢,耐心等待.

下载完成后,在react-native内,执行npm install.

Android项目执行,参考ReactAndroid的README.md.

在react-native目录,新建local.properties

sdk.dir=/Users/wangchenlong/Installations/android-sdk
ndk.dir=/Users/wangchenlong/Installations/android-ndk-r10e

执行

cd react-native
./gradlew :reactAndroid:assembleDebug

再执行

./gradlew :reactAndroid:installArchives

启动服务

./packager/packager.sh

安装项目

cd react-native
./gradlew :Examples:UIExplorer:android:app:installDebug

一定要先启动服务,再安装项目.
出现transforming 100%,即导入成功.

Android应用开发中RecyclerView组件使用入门教程

在最新版本中,我的红米note4无法运行项目.
报错: Upload package to device fails.
原因是编译的gradle版本太高,默认1.5.0,实际1.2.0~1.3.0都可以运行.
我的是1.2.3.
真机调试,本人红米note(Android 4.2)
摇动手机,选择Dev SetTings->Debug sever host & port for device. 设置IP地址,观察本机的IP,填入即可. 我当前的是

192.168.2.202:8081
注意设置端口8081,否则无法加载. 有些情况可以直接输入IP即可.
Android5.0以上,直接设置端口即可.