采用ListView实现网络图片的显示

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

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

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

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

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

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

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

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

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

主布局如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

>

<Button

android:id="@+id/main_btn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="换图" />

<ListView

android:id="@+id/main_lv"

android:layout_width="match_parent"

android:layout_height="wrap_content"

></ListView>

</LinearLayout>

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

list_item.xml的布局如下

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

>

<ImageView

android:id="@+id/item_iv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@drawable/ic_launcher"/>

</LinearLayout>

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

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

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

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);

}

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

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