Android Binding+RecyclerView+网络+本地（请求图片）

已于 2022-08-25 10:10:33 修改
阅读量2.6k 收藏 3
点赞数
文章标签： android android studio java
于 2022-08-25 10:08:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/f234344435/article/details/126518048
版权

 效果展示： 

 

项目目录：

具体实现步骤： 

1.在build.gradle添加基础配置依赖 

1.具体代码 

  buildFeatures{
        dataBinding = true
    }

 implementation 'com.squareup.picasso:picasso:2.71828' //加载网络图片的
    implementation 'androidx.recyclerview:recyclerview:1.1.0'//布局依赖

2.添加网络访问权限：

2.具体代码 

  <uses-permission android:name="android.permission.INTERNET"/>

 3.activity_main.xml整体布局

<?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"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="data"
            type="com.skzn.binding.User" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/rcv_data"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/guideline2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:ignore="MissingConstraints" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.89" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Binding实现RecyclerView"
            android:textSize="30dp"
            tools:text="Binding实现RecyclerView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/guideline2" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

4.新建一个stu布局文件：

 stu.xml具体代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="data"
            type="com.skzn.binding.User" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="0dp"
            android:layout_height="151dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="96dp"
                android:gravity="center"
                android:text="@{data.name}"
                android:textSize="35dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.288"
                tools:text="姓名" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="32dp"
                android:text="@{data.stra}"
                android:textSize="25dp"
                android:gravity="center"
                tools:text="五星"
                app:layout_constraintEnd_toEndOf="@+id/textView"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="@+id/textView"
                app:layout_constraintTop_toBottomOf="@+id/textView" />

            <ImageView
                android:id="@+id/imageView"
                app:image="@{data.image}"
                android:layout_width="150dp"
                android:layout_height="140dp"
                android:layout_marginStart="40dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_bias="0.695"
                tools:srcCompat="@tools:sample/avatars" />
        </androidx.constraintlayout.widget.ConstraintLayout>

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guideline3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.5" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

布局文件已经完成了，现在就到java代码具体实现了：

5.创建一个实体类User：

public class User {
    public String name; //姓名
    public String stra; //星数
    public String image;//网络图片地址
    public String localImage;//本地图片地址

    public User() {
    }
    public User(String name, String stra, String image, String localImage) {
        this.name = name;
        this.stra = stra;
        this.image = image;
        this.localImage = localImage;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getStra() {
        return stra;
    }

    public void setStra(String stra) {
        this.stra = stra;
    }

    public String getImage() {
        return image;
    }

    public void setImage(String image) {
        this.image = image;
    }

    public String getLocalImage() {
        return localImage;
    }

    public void setLocalImage(String localImage) {
        this.localImage = localImage;
    }
}

6.创建布局适配器RecycClerViewAdapter

/**
 * RecyClerViewAdapter 布局文件的适配器 利用BinDing降低耦合度
 */
public class RecyClerViewAdapter extends RecyclerView.Adapter<RecyClerViewAdapter.MyViewHolder> {
    /**
     * 实现步骤
     * 1.创建实体类集合 并实现构造方法
     * 2.实现自带的构造方法
     * 3.固定写法 获取布局绑定
     */
    private List<User> idolList;

    public RecyClerViewAdapter(List<User> idolList) {
        this.idolList = idolList;
    }

    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        //这里使用LayoutDataItemBinding,这是由代码Build生成的，一般输入ItemBinding会有提示 获取布局
        StuBinding stuBinding= DataBindingUtil.inflate(LayoutInflater.from(parent.getContext()),R.layout.stu,parent,false);
        return new MyViewHolder(stuBinding);
    }

    @Override
    public void onBindViewHolder(@NonNull MyViewHolder holder, int position) {
      User user=idolList.get(position);
        holder.layoutDataItemBinding.setData(user);

    }

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

    static class MyViewHolder extends RecyclerView.ViewHolder{
        private StuBinding layoutDataItemBinding;
        public MyViewHolder(@NonNull View itemView) {
            super(itemView);
        }

        public MyViewHolder(@NonNull StuBinding layoutDataItemBinding) {
            super(layoutDataItemBinding.getRoot());
            this.layoutDataItemBinding=layoutDataItemBinding;
        }

    }


}

7.实现网络请求数据适配器类ImageViewBindingAdapter

/**
 * 网络或者本地加载图片数据
 */
public class ImageViewBindingAdapter {
    /**
     * 网络请求加载数据 当网络地址不可用的时候就默认访问本地图片地址
     * @param imageView
     * @param url
     */
    //注解里面的字符串对应xml文件里面属性  app:image="@{idol.image}" 一定要对应
    @BindingAdapter("image")
    public static void setImage(ImageView imageView,String url){
        if (!TextUtils.isEmpty(url)){
            Picasso.get()
                    .load(url)
                    .placeholder(R.drawable.lyf)//本地图片资源
                    .into(imageView);
        }
    }
}

8.自定义的列表数据显示数据工具类：

public class UserUtils {
    public static List<User> get(Activity activity){
        List<User> idolList=new ArrayList<>();


       User idol1=new User("刘亦菲","3星"
                ,"https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E5%9B%BE%E7%89%87&step_word=&hs=0&pn=10&spn=0&di=7117150749552803841&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3918318470%2C697875748&os=2282494938%2C3960989204&simid=55130538%2C818446988&adpicid=0&lpn=0&ln=1512&fr=&fmq=1661332682262_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1Z9121P3012E9-0-lp.jpg%26refer%3Dhttp%3A%2F%2Fimg.jj20.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1663924686%26t%3De2ee06bbe07000e54e958a4ee14a5892&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3B33da_z%26e3Bv54AzdH3FprAzdH3F889ln8_z%26e3Bip4s&gsm=c&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDYsMSw0LDIsNSw3LDgsOQ%3D%3D","");

       User idol2=new User("刘亦菲","4星"
                ,"https://tse3-mm.cn.bing.net/th/id/OIP-C.XSWZSktJjBqkLh15rWayJwHaNK?pid=ImgDet&rs=1","");

       User idol3=new User("刘亦菲","5星"
                ,"https://tse3-mm.cn.bing.net/th/id/OIP-C.XSWZSktJjBqkLh15rWayJwHaNK?pid=ImgDet&rs=1","");

        User idol4=new User("刘亦菲","5星"
                ,"https://tse3-mm.cn.bing.net/th/id/OIP-C.XSWZSktJjBqkLh15rWayJwHaNK?pid=ImgDet&rs=1",activity.getResources().getResourceName(R.mipmap.ic_launcher));

        User idol5=new User("刘亦菲","4星"
                ,"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F94%2Fb6%2F89%2F94b68906e381a3d64736dda6e8fb6cd8.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657357684&t=d89392a5e854c7ee546d2a13ee3f74b0","");
        idolList.add(idol1);
        idolList.add(idol2);
        idolList.add(idol3);
        idolList.add(idol4);
        idolList.add(idol5);
        return  idolList;
    }

}

9.最后就是MainActivity里面的代码具体实现了

public class MainActivity extends AppCompatActivity {
    private List<User> userList=new ArrayList<>();
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ActivityMainBinding activityMainBinding= DataBindingUtil.setContentView(this,R.layout.activity_main);
        /**
         * 两种显示数据方式
         * 1.通过循环显示数据 缺点：在写死的状态下只能是同一条数据循环显示
         * 2.通过自定义的工具类类UserUtils，展示的数据就是工具类里面的数据
         */
        //自定义显示数据条数 循环
        for (int i=0;i<20;i++) {
           User user = new User();
            user.setName("刘亦菲");
            user.setStra("五星");
            user.setImage("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F94%2Fb6%2F89%2F94b68906e381a3d64736dda6e8fb6cd8.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657357684&t=d89392a5e854c7ee546d2a13ee3f74b0");
            user.setLocalImage("");
            userList.add(user);
        }
        
        //以下的语句是根据工具类里面的地址请求数据，显示条数由工具类具体条数决定
//        userList = UserUtils.get(this);
        RecyClerViewAdapter recyClerViewAdapter=new RecyClerViewAdapter(userList);


        //设置布局的显示为竖直结构
        activityMainBinding.rcvData.setLayoutManager(new LinearLayoutManager(this));
        //布局适配数据
        activityMainBinding.rcvData.setAdapter(recyClerViewAdapter);
    }
}

两种显示结果; 显示刘亦菲的图片就是本地图片，说明访问的网地址有误

第一种就是通过工具类来实现访问网络数据显示的是工具类里面的数据条数

 第二种就是写死状态下，网络图片同一条数据循环

@Jerry-
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android-recyclerview-binding:RecyclerView +数据绑定+ LiveData示例
04-28
RecyclerView +数据绑定示例简单样本直接将LiveData与数据绑定一起使用<? xml version = " 1.0 " encoding = " utf-8 " ?>< layout xss=removed xss=removed> < data> < variable xss=removed xss=removed> &...
glide_在Android中将数据绑定与Glide结合使用
cunfeng7797的博客
01-12 354
glide 在这篇有关数据绑定的文章中，我们将研究如何在imageview中使用带有glide的数据绑定来加载图像。 首先，我要说您不需要自定义图像视图。 使用绑定适配器声明自定义属性，我们可以轻松地通过数据绑定将远程图像加载到imageview中。 我将为此创建一个示例项目。 它在屏幕中央会有一个图像。 我将从“关于”页面加载图片。 所以，让我们开始吧！ 要在项目中包含数据绑定，请转到...
【Android Studio】使用Binding代替R.layout.xxx显示kotlin.UninitializedPropertyAccessException（已解决）
m0_49256730的博客
09-15 2028
初始代码： class MainActivity : AppCompatActivity() { private lateinit var binding: ActivityMainBinding val datas = arrayOf("张三","李四","王五","麻子","小强") var adapter: ArrayAdapter<String>? = null override fun onCreate(savedInstanceState: Bun
Android databinding之RecycleView使用与讲解(二)
12-02 1238
Activity和fragment的数据绑定相对比较简单一些，在Android开发中recycleview使用频率也比较高。关于recycleview的数据绑定，接下来会做一个简单的介绍
Kotlin jetpack BindingAdapter 简单的给布局添加自定义属性
丿灬安之若死
05-21 356
BindingAdapter 可以给布局加上自定义的注解进行自定义的处理。非常的好玩。 上布局文件 <?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" xmlns:tools="http://schemas.
Android，jetpack与recyclerView
weixin_43228946的博客
02-09 88
jetpack与recyclerView
android RecyClerView与dataBinding显示文字和图片列表
u013519290的博客
06-09 1205
RecyClerView dataBinding
RecyclerView获取网络数据并解析显示的过程
u012156341的专栏
02-28 4619
首先先屡一下思路，把步骤在脑海当中形成：1.倒入包 okhttp相关包放到libs文件夹下---》右键选择Add As Library---&gt;选择ok 选择Project Structure---&gt;选择当前的module---》选择 library dependenices---&gt;找到RecyclerView点击---&gt;该版本号，改成和v7一样的版本号---》点击f...
android databinding recyclerview多种itembinding
yinxiaopei的专栏
11-10 1659
// 数据列表 public ObservableList items = new ObservableArrayList; // 子item public ItemViewSelector itemView = new ItemViewSelector() { @Override public void select(ItemView itemView, int position,
用RecyclerView请求网络数据
Ssssherry的博客
10-08 1971
过程中要注意细节 导两个包 gson和Imageloder 添加网络请求权限 和 自定义application中的name 现在开始上干货吧！ ======================================MianActivity=============================== package test.com.a20171008; import android
RecyclerView多条目加载（网络请求数据）
qq_39792005的博客
10-25 3381
RecyclerView多条目加载（网络请求数据）
安卓-Data Binding+RecyclerView打造可以选择的三级列表
09-08
安卓-Data Binding+RecyclerView打造可以选择的三级列表 博客链接http://blog.csdn.net/Daxue_haha/article/details/77684085
自定义android开发MVP+ViewBinding架构Demo
08-21
附件为个人编写的自定义android开发MVP+ViewBinding架构Demo，已经在多个项目中使用，相对比较成熟了。使用当前主流的MVP+Viewbing架构模式，喜欢的小伙伴请给个好评，谢谢！
ViewBinding+DataBinding+MVVM.zip
08-09
一个简单的Demo，供新手快速入门ViewBinding+DataBinding+MVVM
自定义android开发MVP+ViewBinding架构Demo（升级版）
08-21
附件为个人编写的自定义android开发MVP+ViewBinding架构Demo，已经在多个项目中使用，相对比较成熟了。使用当前主流的MVP+Viewbing架构模式，喜欢的小伙伴请给个好评，谢谢！（以此篇为准）
【错误记录】Android Studio 编译报错 ( To use data binding annotations in Kotlin, apply the ‘kotlin-kapt‘ plu )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-04 1132
To use data binding annotations in Kotlin, apply the 'kotlin-kapt' plugin in your module's build.gradle 一、报错信息 二、kotlin-kapt 插件简介 三、解决方案
Kotlin+DataBinding+MVVM 做ImageView 图片加载 详细教程
天涯海风的博客
06-02 1966
一、 项目准备 1. 引入DataBinding 在项目 build.gradle 文件 android 节点下添加 buildFeatures { dataBinding = true // for data binding } 2. 引入一个MVVM 框架 implementation 'com.github.AranAndroid009:CustomView:0ca395ae60' implementation 'com.github.AranAn
ObservableField双向绑定/BindingAdapter注解设置自定义属性/RecyclerView绑定
WULILL的博客
03-27 601
ObservableField双向绑定/BindingAdapter注解设置自定义属性/RecyclerView绑定
android+studio动态布局
最新发布
09-30
动态布局是指在运行时根据条件或数据的变化来调整界面的布局。在Android Studio中，可以使用代码动态地创建、添加和修改布局元素。 要实现动态布局，可以使用以下几种方式： 1. 使用代码创建布局元素： 在Java文件中，可以使用`ViewGroup`及其子类（如`LinearLayout`、`RelativeLayout`等）的构造函数动态地创建布局元素，并通过`addView()`方法将其添加到父容器中。 2. 使用布局文件作为模板： 可以在xml布局文件中定义好一个布局模板，然后在Java代码中通过`LayoutInflater`的`inflate()`方法动态加载该布局，并将其添加到父容器中。 3. 使用数据绑定库： Android Data Binding库允许将布局和数据进行绑定，可以在xml布局文件中使用表达式和变量绑定来动态地调整布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值