Android开发笔记之ListView实现网络图片的显示

来源：互联网发布：淘宝手机详情页装修编辑：程序博客网时间：2024/05/22 04:40

采用ListView来显示网络图片,需要理清思路

第一步:我们需要一个listview布局来显示我们的图片,同时我们还需要一个list_item.xml来填充我们的listview

第二步:我们要得到一张网络图片,此图片是我们通过网络获取得到,为了得到网络图片我们需要有获取网路图片的方法

第三步:网络图片我们得到了,listview布局我们也有了,我们需要一个中间数据显示的适配器即Adapter

第四步:我们去自定义一个适配器,来显示我们得到的图片

大概就是以上几步,有书本的人可以去参考下适配器知识和网络获取数据相关的知识,再结合我所写的例子会有更深的理解. 好的我们现在开始来实现我们的代码吧!!!!!!!!!!!!!

--------------------------------------------------------------------------------

第一步:我们先去实现我们的布局

--------------------------------------------------------------------------------

主布局如下

---------------------------------------------------------------

list_item.xml的布局如下

------------------------------------------------

----------------------------------------------------------------------------------------

第二步获取网路图片的方法

--------------------------------------------------------------------------------

private Bitmap getImageByGet(String path){
try {
//1、先创建一个URL的对象
URL url = new URL(path);
//2、创建一个HttpURLConnection对象
//url.openConnection
HttpURLConnection connection = (HttpURLConnection)
url.openConnection();
//3、设置请求方式
connection.setRequestMethod("GET");
//设置请求的超时时间单位毫秒
connection.setConnectTimeout(8000);
//4、判断请求是否成功 404找不到地址 500服务器错误
//返回正确码 200
if(connection.getResponseCode() == 200){
//5、获取输入流，网络请求过来的数据流
InputStream inputStream = connection.getInputStream();
//6、把inputStream转换成Bitmap
Bitmap bitmap = BitmapFactory.decodeStream(inputStream);
return bitmap;
}else{
return null;
}

} catch (Exception e) {
e.printStackTrace();
}
return null;
}

----------------------------------------------------------------------------------------------

第三步:网络图片我们得到了,listview布局我们也有了,我们需要一个中间数据显示的适配器即Adapter

第四步:我们去自定义一个适配器,来显示我们得到的图片MyAdapter

-------------------------------------------------------------------------------------------------

public class MyAdapter extends BaseAdapter {
Context context;
List<Map<String, Object>> list ;
public MyAdapter(Context context, List<Map<String, Object>> list) {
super();
this.context = context;
this.list = list;
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return null;
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
//获取到lv需要显示的item
View view = View.inflate(context, R.layout.list_item, null);
//从item布局中拿到imageview对象
ImageView iv = (ImageView) view.findViewById(R.id.item_iv);
//通过acitivty中传过来list集合给iv对象设置数据
iv.setImageBitmap((Bitmap) list.get(position).get("img"));
//item的view对象返回
return view;
}
}

--------------------------------------------------------------------------------------------------

调用获取图片的方法,通过线程来请求数据

private void setData(final String path, final int type){
new Thread(){
public void run() {
Bitmap bitmap = getImageByGet(path);
//要给主线程中的ListView对象设置数据
//当前数据在子线程，可以使用Handler机制来实现
Message message = new Message();
message.obj = bitmap;
message.what = type;
handler.sendMessage(message);
};
}.start();
}

-------------------------------------------------------------------------------------------

handler机制来处理消息,此处的handler为一个全局变量

----------------------------------------------------------------------------------------------------

//把数据更新到界面上
Handler handler = new Handler(){
public void handleMessage(android.os.Message msg) {
//更换或显示全部图片
//第一次进来是显示，点击button是更换
if(msg.what == -1){
//每次更换数据的时候，要先清空list结合
//否侧替换的数据会添加到list结合后面
list.clear();
for (int i = 0; i < 10; i++) {
Bitmap bitmap = (Bitmap) msg.obj;
Map<String, Object> map = new HashMap<String, Object>();
map.put("img", bitmap);
list.add(map);
}
}else{
//点击lv中item的时候
//list.get(position)返回的是一个map("img",bitmap)
//重新把list集合中对应位置的map对象重新赋值
list.get(msg.what).put("img", (Bitmap) msg.obj);
}
//该方法可以根据List集合的改变去更新显示的数据
adapter.notifyDataSetChanged();
};
};

---------------------------------------------------------------------------------------------------------

/**
* 初始化控件方法
*/
private void initView(){
btn = (Button) findViewById(R.id.main_btn);

//activity中使用listview必须进行的四个步骤
lv = (ListView) findViewById(R.id.main_lv);
list = new ArrayList<Map<String,Object>>();
adapter = new MyAdapter(this, list);
lv.setAdapter(adapter);

btn.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
changeImg("http://img.firefoxchina.cn/2016/04/4/201604251138080.jpg");
}

});
lv.setOnItemClickListener(new OnItemClickListener() {

@Override
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
changeItemImg("http://img.firefoxchina.cn/2016/04/4/201604251138080.jpg", position);
}
});
}

/**
* 点击listItem调用的方法
* @param path 点击item的时候需要更换图片的图片地址
* @param position 点击的是哪一个item
*/
protected void changeItemImg(String path, int position) {
setData(path, position);
}

/**
* 点击btn 调用的方法
* @param path 图片地址
*/
private void changeImg(String path) {
setData(path, -1);
}

--------------------------------------------------------------------------

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
initView();
setData("https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png",
-1);
}

----------------------------------------------------------------------------------------------

以上就是所有的代码,每一步都有详细的解释,不会的话,我也米有办法了,多看几遍,理清以下思路,借鉴以下我的案例,不一定我的就是最好的方法,后面会陆续更新相关的知识,谢谢

0 0