android RecyclerView 加载完成 recyclerview加载网络图片

以前一直是用传统的方式，需要写很多findviewById(),重复代码很多，最近空闲，自己写个小项目练习，也使用了一下DataBinding，发现确实简单很多，现在把过程和经验和大家分享一下。

这是需求界面，我们可以用listview去完成，但是现在介绍的是DataBinding结合RecyclerView去加载。

1.首先，我们需要在buld.gradle中添加依赖，

2.在布局中使用

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <data class="com.mymusic.musicplayer.SalesRankData"> //这个是系统自动创建的"隐形"类，我们指定了类名为SalesRankData

        <variable
            name="salesBean"  //实体类变量名
            type="com.mymusic.musicplayer.bean.RankingBean.SalesBean.BooksBeanDes" /> //这里是我们需要绑定的实体类
    </data>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="10dp">

        <TextView
            android:id="@+id/tv_item_salesrank_number"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginRight="10sp"
            android:text="01"
            android:textColor="@color/main_buttomtext_yellow"
            android:textSize="14sp" />

        <ImageView
            android:id="@+id/iv_item_salesrank"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginRight="10dp"
            android:layout_toRightOf="@+id/tv_item_salesrank_number"
            app:imgurl="@{salesBean.book.cover}" />  //图片加载，使用app:imgurl，imgurl是自己定义的变量

        <TextView
            android:id="@+id/tv_item_salesrank_title"
            style="@style/tv_standard_12sp"
            android:layout_alignTop="@+id/iv_item_salesrank"
            android:layout_toRightOf="@+id/iv_item_salesrank"
            android:text="@{salesBean.book.title}" /> //绑定实体类里面的值，需要哪一个值就指定到哪层

        <TextView
            android:id="@+id/tv_item_salesrank_description"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/iv_item_salesrank"
            android:layout_toRightOf="@+id/iv_item_salesrank"
            android:text="@{salesBean.book.author.title+@string/colon+salesBean.book.author.name+@string/space+salesBean.book.recorder.title+@string/colon+salesBean.book.recorder.name}"
            android:textColor="@color/gray_hotlists"
            android:textSize="10sp" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0.2dp"
            android:layout_below="@+id/tv_item_salesrank_description"
            android:layout_marginTop="10dp"
            android:background="@color/view" />
    </RelativeLayout>

</layout>

实体类代码太多，我直接贴hijson的截图，

3.Activity里面做好准备操作

public class SalesRankActivity extends BaseActivity implements IBookRankView {

    private SalesData salesData;//SalesData就是databinding自动生成的类，我们自己在布局中改成了此类名
    private LinearLayoutManager linearLayoutManager; //布局管理器
    private List<RankingBean.SalesBean.BooksBeanDes> salesBeen;//这是要加载的List，也就是上面截图里最外层的集合
    private SalesRankAdapter salesRankAdapter;
    private BookRankPersenter bookRankPersenter = new BookRankPersenter(this);

  
    @Override
    void initdatabinding() {
        salesData = DataBindingUtil.setContentView(this, R.layout.activity_salesrank);//载入布局
    }

    @Override
    public void initData() {
        super.initData();
        linearLayoutManager = new LinearLayoutManager(this);
        salesData.rvSalesRank.setLayoutManager(linearLayoutManager);//recyclerview加载布局管理器，不设置方向的话，默认是垂直
        salesBeen = new ArrayList<>();
        salesRankAdapter = new SalesRankAdapter(salesBeen);
        salesData.rvSalesRank.setAdapter(salesRankAdapter);

        bookRankPersenter.getData();
    }

    @Override
    public void onClick(View view) {

    } 
    
    @Override
    public void setOnclick() {
    }
    @Override
    public void getAllData(RankingBean rankingBean) {
        salesBeen.clear();
        List<RankingBean.SalesBean.BooksBeanDes> books = rankingBean.getSales().getBooks();
        salesBeen.addAll(books);
        salesRankAdapter.notifyDataSetChanged();//这里设置list，adapter刷新和以前的方式都一样
    }
}

4.Adapter里填充数据

public class SalesRankAdapter extends BaseDatabindingAdapter<RankingBean.SalesBean.BooksBeanDes, SalesRankAdapter.ViewHolder> {
    public SalesRankAdapter(List<RankingBean.SalesBean.BooksBeanDes> data) {
        super(data);
    }

    @Override
    Class<SalesRankAdapter.ViewHolder> vhClass() {
        return ViewHolder.class;
    }

    @Override
    int initLayoutId() {
        return R.layout.item_salesrank;//item布局
    }
    
    @Override
    public void onBindViewHolder(SalesRankAdapter.ViewHolder holder, int position) {
        RankingBean.SalesBean.BooksBeanDes booksBeanX = data.get(position);
        holder.databinding.setSalesBean(booksBeanX);//设置好需要的Bean值即可，控件加载数据我们在布局中已经写过了
        if (position > 8) {//这里是前面的序号，因为不是从Bean中得到的，所以还是自己写
            holder.databinding.tvItemSalesrankNumber.setText(String.valueOf(position + 1));
        } else {
            holder.databinding.tvItemSalesrankNumber.setText("0" + (position + 1));
        }

    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        public ViewHolder(View itemView) {
            super(itemView);
        }

        public SalesRankData databinding;

        public ViewHolder(ViewDataBinding itemView) {
            super(itemView.getRoot());
            this.databinding = (SalesRankData) itemView;//把ViewDataBinding强转成我们定义的类

        }
    }
}

我这里写了BaseAdapter，所以和平常的风格有些不一样，但逻辑都是一样的，我把BaseAdpater类贴出来供大家参考

public abstract class BaseAdapter<T, VH extends RecyclerView.ViewHolder> extends RecyclerView.Adapter<VH> {
    public List<T> data;

    public BaseAdapter(List<T> data) {
        this.data = data;
    }

    @Override
    public VH onCreateViewHolder(ViewGroup parent, int viewType) {
        Class<VH> vhClass = vhClass();
        VH tTH = null;
        Constructor c1 = null;
        try {
            c1 = vhClass.getDeclaredConstructor(new Class[]{View.class});
            c1.setAccessible(true);
            View inflate = View.inflate(parent.getContext(), initLayoutId(), null);
            tTH = (VH) c1.newInstance(inflate);
        } catch (Exception e) {
            System.out.println("反射泛型失败");
        }

        return tTH;
    }

    abstract Class<VH> vhClass();

    abstract int initLayoutId();

    @Override
    public int getItemCount() {
        if (data == null)
            return 0;
        return data.size();
    }
}

写完adapter效果就能出来了，这里说一下图片加载，我们需要自己去写@BindingAdapter

public class ImagBindingUtils {

    @BindingAdapter("imgurl")
    public static void bindingImage(ImageView imageView, String url) {
        Glide.with(imageView.getContext()).load(url).into(imageView);//用glide加载图片，imgurl在上面的布局里面有使用过
    }
}

最后注意一些小细节，比如文字中需要空格我们在布局中无法直接使用“  ”+,上面有个text值是  @{salesBean.book.author.title+@string/colon+salesBean.book.author.name+@string/space+salesBean.book.recorder.title+@string/colon+salesBean.book.recorder.name}

这里的@string/colon和@string/space分别定义的是冒号和空格，在values的strings里面使用

，其中&#160是空格符

这篇博客未写到联网请求代码，如不懂的话，可以先去看看我写的"Retrofit2.0的简单实用"，，如有问题，可以留言~