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"
/>