DataBinding結合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是空格符