GridView加载网络图片

在平时的开发中当我们想要获取服务器上或者网络上的图片并加载到我们的项目中的时候

如果图片时一张还好，直接定义一个ImageView来加载，但是往往我们都是获取到很多图片URL

这个时候我们就得考虑使用GridView来加载显示我们的照片了,下面分5步来实现我们的功能

1：如下是我们的GridView的XML定义

<!--朋友圈发布的照片-->
<GridView
    android:id="@+id/circle_baby_grid_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:numColumns="3"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginRight="10dp"
    android:background="@color/white" />

2：定义我们的子项布局circle_grid_view.xml

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

    <ImageView
        android:id="@+id/ItemImage"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center"/>
</LinearLayout>

3:这个是在我们的主类中，或者我们要显示的Fragment中

（1）首先得到数据源（这样你自己从网络上或者服务器上获取的数据源）：即是个List中保存的都是我们要获得的图片的URL

（2）对数据源进行加载如下所示：

//下面对GridView进行加载
//下面的list是保存我们的图片组URL的
ArrayList<HashMap<String,String>> list=new ArrayList<>();
for(int i=0;i<diaryData.getDiaryImg().size();i++)
{
//单个的Map保存我们的URL
    HashMap<String,String> map=new HashMap<>();
    map.put("ItemImage",diaryData.getDiaryImg().get(i));
    list.add(map);
}
//下面是SimpleAdapter的构建过程（参数依次是：1：上下文，2：数据源，3：子项布局，4：我们的子项布局的键值对的键 5：子项布局中键值对的值）
SimpleAdapter adapter = new SimpleAdapter(DiaryDetailActivity.this,list,R.layout.circle_grid_view,new String[]{"ItemImage"},new int[]{R.id.ItemImage});
//判断是否为我们要处理的对象,在这里adapter自动为子项赋值
adapter.setViewBinder(new SimpleAdapter.ViewBinder(){
    public boolean setViewValue(View view, Object data,
                                String textRepresentation) {
        if(view instanceof ImageView){
            ImageView iv = (ImageView)view;
            GlideUtil.GlideWithPlaceHolder(DiaryDetailActivity.this, data.toString()).into(iv);
//给子项布局加个点击事件
            iv.setOnClickListener(new View.OnClickListener(){
                @Override
                public void onClick(View v){
                    Toast.makeText(DiaryDetailActivity.this, "image"+1, Toast.LENGTH_SHORT).show();
                }
            });
            return true;
        }else
            return false;
    }
});
circleBabyGridView.setAdapter(adapter);

5：加载图片到控件上的时候我们使用到了GlideUtil，如下

public class GlideUtil {
    public static RequestBuilder<Drawable> GlideWithPlaceHolder(Context context, Object object) {
        return Glide.with(WinnerApplication.getContext()).load(object).apply(new RequestOptions().placeholder(R.drawable.load_err_empty).dontAnimate());
    }
}

6：大公告成！！

GridView加载网络图片

猜你喜欢