列表视图(ListView和ListActivity)

在ListView中显示网络图片

 ImageView 类虽然有一个 setImageUri 方法,但不能直接接受一个由网络地址生成的uri作为参数从而显示图片,我们只好使用其 setImageBitmap 方法来转换。 

我们来做一个如下的文章列显示:

先声明一个类文章类来初始化数据:

public class ListViewItemData {
        private String itemTitle;
        private String itemPhoto;
        private String itemSummary;
        private String itemAuthor;
        private String itemPublishtime;

        public ListViewItemData() {
            super();
        }

        public ListViewItemData(String itemTitle, String itemPhoto, String itemSummary, String itemAuthor, String itemPublishtime) {
            super();
            this.itemTitle = itemTitle;
            this.itemPhoto = itemPhoto;
            this.itemSummary = itemSummary;
            this.itemAuthor = itemAuthor;
            this.itemPublishtime = itemPublishtime;
        }

        public String getTitle() {
            return this.itemTitle;
        }

        public Bitmap getPhoto() {
            String url = this.itemPhoto;
            URL myFileUrl = null;
            Bitmap bitmap = null;
            try {
                myFileUrl = new URL(url);
                HttpURLConnection conn = (HttpURLConnection) myFileUrl.openConnection();
                conn.setDoInput(true);//连接设置获得数据流
                conn.connect();
                InputStream is = conn.getInputStream();
                bitmap = BitmapFactory.decodeStream(is);
                is.close();
            } catch (IOException e) {
                e.printStackTrace();
            }

            return bitmap;
        }

        public String getSummary() {
            return this.itemSummary;
        }

        public String getAuthor() {
            return this.itemAuthor;
        }

        public String getPublishtime() {
            return this.itemPublishtime;
        }
    }

其中getPhoto方法根据URL用来获得在线图片,返回对应的Bitmap。

制造数据,一般来说是从网络上获得,此处为了方便手工造:

public List<ListViewItemData> getListData() {
        List<ListViewItemData> listData = new ArrayList<ListViewItemData>();
        listData.add(new ListViewItemData("android异常总结一", "http://pic.cnitblog.com/face/u471123.jpg?id=07112321", "一、场景再现=========================同事甲:搞什么搞,已经两年没参加忘年会了,今年又在这里加班。同事乙:都一样,赶上今天你值夜班,能有什么办法。同事甲:人家忘年会有东西吃,你饿不饿?叫外卖?同事乙:好哦,还是上次那家吧。========================= 二", "烈火残躯", "2014-03-19 22:19"));
        listData.add(new ListViewItemData("HTML5 History API实现无刷新跳转", "http://pic.cnitblog.com/face/306530/20140307103012.png", "本篇和大家一起了解一下Windows 8.1 中磁贴的更新,我们来看看如何利用它做出更好的应用磁贴。首先我们从展现形式上来对比一下Windows 8 与 Windows 8.1 中的磁贴:Windows 8支持两种尺寸的磁贴,正方形磁贴(150 * 150 像素)和长方形磁贴(310 * 150 像", "sdsdsds", "2014-03-19 22:19"));
        listData.add(new ListViewItemData("c++ 异常处理(1)", "http://pic.cnitblog.com/face/u46305.jpg", "图文化的说明,.net程序员,入职后的发展路线。我将发展路线归为三类。1、技术专精;2、产品策划;3、数据运营。并对每条路线进行了优劣势分析。欢迎各位一起来讨论,不能这么浑浑噩噩的折腾了", "幕后黑手-Boss", "2014-03-19 22:19"));
        listData.add(new ListViewItemData("服务器批量管理工具的快速开发", "http://pic.cnitblog.com/face/603528/20140316211142.png", "当我们需要控制一个局域网中的很多台服务器时,一个简单的全局操作可能会被放大地异常繁琐,这时我们就会需要新的工具来帮助我们快速完成这种工作。在本文中,我们在ssh客户端提供的一些工具的基础上完成这一工具的开发,我们的开发平台是GNU/Linux。我们将会开发四个有用的小工具,下面即是我们整个系统的鸟瞰", "东邪独孤", "2014-03-19 22:19"));
        listData.add(new ListViewItemData("揭秘uc浏览器一", "http://pic.cnitblog.com/face/440253/20140306132605.png", "首先,看一下项目完成后的,最终效果是这样的:一.主界面二,书签界面三、主界面四.操作对话框界面这几个界面你是否看到了uc浏览器的影子了,其实我说你也可以了,在接下来篇幅中,我将手把手叫大家完成这个浏览器。首先,我们从主界面开始吧,这是一个主线,项目的一些开始由他开始了。从图一中,我们可以看出其布局文", "laozhu1124", "2014-03-19 22:19"));
        listData.add(new ListViewItemData("【WPF】制作自定义的列表项面板", "http://pic.cnitblog.com/face/367389/20140226103259.png", "我们在使用像ListBox的列表控件时,我们都知道可以通过其ItemsPanel的依赖项属性来自定义一个面板来放置列表控件中的列表项。除了CLR库提供的几个面板外,我们完全可以把自己写的面板作为项列表的容器。先给各位看看效果。如何?效果还好吧?面板的原理是这样的:1、从Panel类派出一个类,我命名", "东邪独孤2", "2014-03-19 22:19"));
        return listData;
    }

然后生成SimpleAdapter需要的数据:

public ArrayList<HashMap<String, Object>> getItem() {

        List<ListViewItemData> listData = this.getListData();
        ArrayList<HashMap<String, Object>> item = new ArrayList<HashMap<String, Object>>();
        for (ListViewItemData data : listData) {
            HashMap<String, Object> map = new HashMap<String, Object>();
            map.put("itemTitle", data.getTitle());
            map.put("itemPhoto", data.getPhoto());
            map.put("itemSummary", data.getSummary());
            map.put("itemAuthor", data.getAuthor());
            map.put("itemPublishtime", data.getPublishtime());
            item.add(map);
        }
        return item;
    }

ListView中item布局:

<?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:descendantFocusability="afterDescendants"
    android:orientation="vertical" >

    <!-- 博文题目 -->

    <TextView
        android:id="@+id/viewTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:lines="1"
        android:textColor="#0000FF"
        android:textStyle="bold" />
    <!-- 作者头像和博文概要 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="2dp"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/imgPhoto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="2dp"
            android:src="@drawable/ic_launcher"
             />

        <TextView
            android:id="@+id/viewSummary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="2dp"
            android:lines="3" />
    </LinearLayout>
    <!-- 作者昵称和发布日期 -->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="2dp"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="2dp"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/viewAuthor"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:textColor="#0000FF" />

        <TextView
            android:id="@+id/viewPublishtime"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

还需要一个ListView,此处我用了一个list_separator_line图片来分隔上下行:

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

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:divider="@drawable/list_separator_line" />

</LinearLayout>

在SimpleAdapter中需要一个数据源,用来存储数据的,在显示图片时我们要用HashMap<>存储一个Bitmap;但仅存取了Bitmap时在ListView中是无法显示图片的,我们需要对SimpleAdapter进行处理 。

如下是对SimpleAdaptr处理的主要代码

simpleAdapter.setViewBinder(new ViewBinder() {

            @Override
            public boolean setViewValue(View view, Object data, String textRepresentation) {
                // 判断是否为我们要处理的对象
                if (view instanceof ImageView && data instanceof Bitmap) {
                    ImageView iv = (ImageView) view;
                    iv.setImageBitmap((Bitmap) data);
                    return true;
                } else
                    return false;

            }
        });

然后给ListView绑定,MainActivity完整代码:

package com.example.androidlistview;

import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.R.integer;
import android.R.string;
import android.os.Bundle;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.SimpleAdapter.ViewBinder;

public class MainActivity extends Activity {

    private ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listView = (ListView) this.findViewById(R.id.listView);
        // 创建简单适配器SimpleAdapter
        SimpleAdapter simpleAdapter = new SimpleAdapter(this, this.getItem(), R.layout.listview_item, new String[] { "itemTitle", "itemPhoto", "itemSummary", "itemAuthor", "itemPublishtime" }, new int[] { R.id.viewTitle, R.id.imgPhoto, R.id.viewSummary, R.id.viewAuthor, R.id.viewPublishtime });
        simpleAdapter.setViewBinder(new ViewBinder() {

            @Override
            public boolean setViewValue(View view, Object data, String textRepresentation) {
                // 判断是否为我们要处理的对象
                if (view instanceof ImageView && data instanceof Bitmap) {
                    ImageView iv = (ImageView) view;
                    iv.setImageBitmap((Bitmap) data);
                    return true;
                } else
                    return false;

            }
        });
        // 加载SimpleAdapter到ListView中
        listView.setAdapter(simpleAdapter);

以上就是一般的对于网络图片绑定ListView处理方式,好一点的处理方式是定制扩展一个SimpleAdapter专用来处理图片绑定。

注意:此例是显示网络图片 要记得添加权限,否则报错:java.net.SocketException: Permission denied

<uses-permission android:name="android.permission.INTERNET">

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏刘望舒

感受LiveData与ViewModel结合之美

虽说这篇是说LiveData与ViewModel,但是或多或少都有涉及另外一个组件:Lifecycles 。它们连同Room都是在17年谷歌IO大会推出的,当时...

1322
来自专栏小灰灰

Spring之动态注册bean

如我之前做个的一个支持扫表的基础平台,使用者只需要添加基础配置 + Groovy任务,就可以丢到这个平台上面来运行了,而这个基础平台是一直都在运行的,所以在新来...

1613
来自专栏向治洪

讯飞语音

、你需要android手机应用开发基础 2、科大讯飞语音识别SDK android版 3、科大讯飞语音识别开发API文档 4、android手机 关于科大讯飞S...

30910
来自专栏向治洪

仿今日头条顶部导航效果

 之前发现很多人在群里面、论坛上求网易新闻客户端的源码,之后我就去下了个网易新闻客户端和今日头条新闻客户端,发现他们的大体是一样的,于是在最近的空闲时间,便去琢...

1K8
来自专栏向治洪

nfc近场通信

NFC简介: Near Field Communication 近场通信,是一种数据传输技术。 与wifi、蓝牙、红外线等数据传输技术的一个主要差异就是有...

3769
来自专栏用户2442861的专栏

公司(视频 社交)项目分享

http://blog.csdn.net/u011733020/article/details/46786471

1486
来自专栏Android-JessYan

我一行代码都不写实现Toolbar!你却还在封装BaseActivity?

原文地址: http://www.jianshu.com/p/75a5c24174b2 qq群:301733278

1564
来自专栏Vamei实验室

安卓第五夜 维纳斯的诞生

作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明。谢谢!

1963
来自专栏Vamei实验室

安卓第五夜 维纳斯的诞生

之前各讲中,分别讲解了安卓的开发环境、架构和基本概念。从这一讲开始,我将制作一个简单的应用,并通过逐步升级它的功能,连带出安卓开发的多个情境。 《维纳斯的诞生》...

1967
来自专栏codelang

纯手工打造Easy支付库

1854

扫码关注云+社区

领取腾讯云代金券