Glide开源库结合RecyclerView实现加载图片

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_25901775/article/details/50152353
问题?
如何在RecyclerView上面动态图片,同时这个图片的地址存储在Json字符串中的呢?

这里写图片描述

准备工作:
我们需要在用到两个jar包

这里写图片描述
其中glide,是加载图片的框架,gson则是用来解析json数据和将javabean转换为json字符串的jar包。
开始撸代码
1 在主界面定义一个recyclerview的布局文件activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


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

</RelativeLayout>

2 在java代码中定义

package com.glc.test;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;

import com.google.gson.Gson;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView;
    private List<Student> mStudents = new ArrayList<>();
    //自己模拟的json字符串
    private String jsonStr = "{\"name\":\"图图\",\"PicIUri\":\"http://pic14.nipic.com/20110522/7411759_164157418126_2.jpg\"}\n";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initData();
        initView();
    }

    private void initView() {
        recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
    }

    private void initData() {
    //这里使用Gson来解析成javabean,用法比较简单,可百度
        Gson gson = new Gson();
        for(int i = 0;i<20;i++){
        mStudents.add(gson.fromJson(jsonStr, Student.class));
        }
    }
}

3 然后给recyclerview定制适配器

    myRecyclerViewAdapter = new MyRecyclerViewAdapter(this, mStudents);
        recyclerView.setAdapter(myRecyclerViewAdapter);
//recyclerview的布局管理器必须要添加,否则不能显示
        LinearLayoutManager manager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        recyclerView.setLayoutManager(manager);
package com.glc.test;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.List;

/**
 * Created by GLC on 2015/12/2.
 */
public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.MyViewHolder> {
    private List<Student> mStudents;
    private Context mContext;
    private LayoutInflater inflater;

    public MyRecyclerViewAdapter(Context mContext, List<Student> mStudents) {
        this.mContext = mContext;
        this.mStudents = mStudents;
        inflater = LayoutInflater.from(mContext);
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = inflater.inflate(R.layout.item, parent, false);
        return new MyViewHolder(v);
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
//这里就是加载了网络中的图片        Glide.with(mContext).load(mStudents.get(position).getUrl()).into(holder.imageView);
        holder.textView.setText(mStudents.get(position).getName());
    }
    @Override
    public int getItemCount() {
        return mStudents.size();
    }

    class MyViewHolder extends RecyclerView.ViewHolder {
        ImageView imageView;
        TextView textView;

        public MyViewHolder(View itemView) {
            super(itemView);
            imageView = (ImageView) itemView.findViewById(R.id.image);
            textView = (TextView) itemView.findViewById(R.id.text);
        }
    }
}

另外的recyclerview的子布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="这是一个姓名" />
</LinearLayout>

还有一个Student的JavaBean

package com.glc.test;

/**
 * Created by GLC on 2015/12/2.
 */
public class Student {
    private String name;
    private String url;

    public String getName() {
        return name;
    }

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

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }
}

这样整个效果已经完成了

展开阅读全文

没有更多推荐了,返回首页