Glide开源库结合RecyclerView实现加载图片
2015-12-02 20:24
417 查看
问题? 如何在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; } }
这样整个效果已经完成了
相关文章推荐
- 正则表达式(笔记)
- 新找到的一款字体 fantasque-sans-mono
- React.js + Node.js使网站快速渲染
- 如何利用QT设计师设计的ui生成相应头文件
- WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptRe
- 【openjudge】公共子序列
- nyoj 99 单词拼接 【欧拉回路】
- Qualcomm Snapdragon Debugger for Visual Studio
- 1078. Hashing
- UIPickView 和 UIDatePicker
- Java集合类
- 用starUML画出自己项目的类图
- void 指针类型例子
- 模拟项目概要
- 开启蓝牙之旅(督促自己)
- 编译器的工作过程
- MATLAB GUI 程序设计中将axes保存为高质量矢量图的方法
- 1048. Find Coins (25)
- 第6周项目3——括号的匹配
- 【openjudge】宠物小精灵之收服