android listview展示图片

最近学习android开发，感触颇多，和网站开发对比，还是有很大的差距，在这里记录一下。

android listview展示图片

在网站开发上，展示图片非常简单，一个HTML img标签就搞定，加上服务器无非就是在view里动态展示，或者用ajax动态获取，或者用vue等动态获取js展示。

但在android上就非常麻烦，先要把网络图片下载，转换成流文件，再转换成drawable资源文件才能在app上显示，里面的xml各种配置，对于一个写惯HTML的人来说很烦。

主要步骤。

假设在一个Listshow的二级页面展示，

首先要准备的东西，

Adapter，Adapter是连接后端数据和前端显示的适配器接口，

一些自定义的类，下载图片的类imageloader，缓存的类memorycache,存文件的类filecache

xml文件，主列表的xml，listview的xml，每次下载图片覆盖的drawable资源xml

具体代码：

主要的activity

package com.example.huibeb;
import android.os.Bundle;
import android.widget.ListView;
import androidx.appcompat.app.AppCompatActivity;
import com.example.huibeb.model.ListmAdapter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class Listshow extends AppCompatActivity {
    private List<Map<String, Object>> cats = new ArrayList<Map<String, Object>>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_listshow);
        ArrayList<HashMap<String, String>> songsList = new ArrayList<HashMap<String, String>>();
        for (int i = 0; i < 4; i++) {
            HashMap<String, String> map = new HashMap<String, String>();

            map.put("listname", "暹罗猫"+i);
            map.put("listimgs", "http://img.bjyiyoutech.com/appimage/5de78277d60ee.jpg");
            songsList.add(map);
        }

        ListmAdapter adapter = new ListmAdapter(this,songsList);
        ((ListView) findViewById(R.id.listlist)).setAdapter(adapter);
    }
}

ListmAdapter，Adapter是连接后端数据和前端显示的适配器接口，

package com.example.huibeb.model;
import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import com.example.huibeb.R;
import com.example.huibeb.help.ImageLoader;
import java.util.ArrayList;
import java.util.HashMap;

public class ListmAdapter extends BaseAdapter {
    private Activity activity;
    private ArrayList<HashMap<String, String>> data;
    private static LayoutInflater inflater=null;
    public ImageLoader imageLoader; //用来下载图片的类，后面有介绍

    public ListmAdapter(Activity a, ArrayList<HashMap<String, String>> d) {
        activity = a;
        data=d; //赋值列表
        inflater = (LayoutInflater)activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        imageLoader=new ImageLoader(activity.getApplicationContext());
    }
    public int getCount() {
        return data.size();
    }

    public Object getItem(int position) {
        return position;
    }

    public long getItemId(int position) {
        return position;
    }
    @NonNull
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View vi=convertView;
        if(convertView==null)
            vi = inflater.inflate(R.layout.lists, null);

        TextView listname = (TextView)vi.findViewById(R.id.listname); // 标题
        ImageView listimg=(ImageView)vi.findViewById(R.id.listimg); // 缩略图

        HashMap<String, String> listm = new HashMap<String, String>();
        listm = data.get(position);
        // 设置ListView的相关值
        String aa = listm.get("listname");// 标题
        listname.setText(listm.get("listname"));// 缩略图
        imageLoader.DisplayImage(listm.get("listimgs"), listimg);//下载并返回图片资源
        return vi;

    }

}
memorycache缓存MemoryCache 

package com.example.huibeb.help;
import android.graphics.Bitmap;

import java.lang.ref.SoftReference;
import java.util.Collections;
import java.util.HashMap;
import java.util.Map;

public class MemoryCache {
    private Map<String, SoftReference<Bitmap>> cache=Collections.synchronizedMap(new HashMap<String, SoftReference<Bitmap>>());//软引用

    public Bitmap get(String id){
        if(!cache.containsKey(id))
            return null;
        SoftReference<Bitmap> ref=cache.get(id);
        return ref.get();
    }

    public void put(String id, Bitmap bitmap){
        cache.put(id, new SoftReference<Bitmap>(bitmap));
    }

    public void clear() {
        cache.clear();
    }

}
file缓存FileCache 

package com.example.huibeb.help;
import android.content.Context;

import java.io.File;

public class FileCache {

    private File cacheDir;

    public FileCache(Context context){
        //找一个用来缓存图片的路径
        if (android.os.Environment.getExternalStorageState().equals(android.os.Environment.MEDIA_MOUNTED))
            cacheDir=new File(context.getExternalCacheDir(),"huibenb");
        else
            cacheDir=context.getCacheDir();
        if(!cacheDir.exists())
            cacheDir.mkdirs();
    }

    public File getFile(String url){

        String filename=String.valueOf(url.hashCode());
        File f = new File(cacheDir, filename);
        return f;

    }

    public void clear(){
        File[] files=cacheDir.listFiles();
        if(files==null)
            return;
        for(File f:files)
            f.delete();
    }

}

xml文件
主activity布局文件 activity_listshow.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Listshow">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="1dp"
        tools:layout_editor_absoluteY="1dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <Button
                    android:id="@+id/button5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Button" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                    <Button
                        android:id="@+id/button2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Button" />

                    <Button
                        android:id="@+id/button3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Button" />

                    <Button
                        android:id="@+id/button4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Button" />

                </LinearLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">

                <Button
                    android:id="@+id/button5"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Button" />

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal">

                    <Button
                        android:id="@+id/button2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Button" />

                    <Button
                        android:id="@+id/button3"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Button" />

                    <Button
                        android:id="@+id/button4"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="Button" />

                </LinearLayout>
            </LinearLayout>

            <ListView
                android:id="@+id/listlist"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </LinearLayout>
    </ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
listView内容文件lists.xml

<?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="match_parent"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/listimg"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>

            <TextView
                android:id="@+id/listname"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="TextView" />
        </LinearLayout>

    </LinearLayout>
</LinearLayout>
每次下载图片要替换的drawable资源文件listimgtest.xml,注意这个要放在drawable文件夹下，@drawable/ihblogo是一个jpg图片，默认加载的图片请自行添加

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@drawable/ihblogo"
    android:antialias="true"
    android:dither="true"
    android:filter="true"
    android:gravity="center"
    android:mipMap="false"
    android:tileMode="disabled"
    />