专栏首页小鄧子的技术博客专栏【译】与Adapter一起使用(ListView, GridView, ...)

【译】与Adapter一起使用(ListView, GridView, ...)

简单的Gallery的实现:ListView

首先,我们需要为测试提供一些图像。我们从eatfoody.com截取了部分美味的食谱图,上传至imgur

public static String[] eatFoodyImages = {
        "http://i.imgur.com/rFLNqWI.jpg",
        "http://i.imgur.com/C9pBVt7.jpg",
        "http://i.imgur.com/rT5vXE1.jpg",
        "http://i.imgur.com/aIy5R2k.jpg",
        "http://i.imgur.com/MoJs9pT.jpg",
        "http://i.imgur.com/S963yEM.jpg",
        "http://i.imgur.com/rLR2cyc.jpg",
        "http://i.imgur.com/SEPdUIx.jpg",
        "http://i.imgur.com/aC9OjaM.jpg",
        "http://i.imgur.com/76Jfv9b.jpg",
        "http://i.imgur.com/fUX7EIB.jpg",
        "http://i.imgur.com/syELajx.jpg",
        "http://i.imgur.com/COzBnru.jpg",
        "http://i.imgur.com/Z3QjilA.jpg",
};

其次,我们需要一个Activity,在这里面,我们将创建一个adapter,然后把添加到ListView中。

public class UsageExampleAdapter extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_usage_example_adapter);

        listView.setAdapter(new ImageListAdapter(UsageExampleAdapter.this, eatFoodyImages));
    }
}

最后,让我们来看一下Adapter的布局文件。这个Listview的Item非常的简单:

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="200dp"/>

最终结果就是展示图像集合,每一个Item都有200dp高,宽度将充满整个屏幕。很明显,这样的Gallery看上去不是特别漂亮,但这并不属于本文应该关注的重点。

在这之后,我们还应该为ListView实现一个Adapter。并尽量保证其逻辑简单,然后绑定eatfoody的示例图像到Adapter中。每个Item展示一张图片。

public class ImageListAdapter extends ArrayAdapter {
    private Context context;
    private LayoutInflater inflater;

    private String[] imageUrls;

    public ImageListAdapter(Context context, String[] imageUrls) {
        super(context, R.layout.listview_item_image, imageUrls);

        this.context = context;
        this.imageUrls = imageUrls;

        inflater = LayoutInflater.from(context);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (null == convertView) {
            convertView = inflater.inflate(R.layout.listview_item_image, parent, false);
        }

        Picasso
            .with(context)
            .load(imageUrls[position])
            .fit() // will explain later
            .into((ImageView) convertView);

        return convertView;
    }
}

最有趣的东西发生在ImageListAdaptergetView()方法中。你会发现Picasso的调用方式与前面讲到的“常规”加载方式一样。无论你处于什么项目中,Picasso的调用方式始终不变。

作为一个有经验的Android开发者,你可能已经想到了我们需要复用ListView中的布局,来实现快速流畅的滑动体验。Picasso有一个非常出色的特性,那就是它能够自动取消加载请求,清空ImageView上的图像,然后为适当的ImageView加载正确的图像。

边注:fit()tags()作为可选项,可用来进一步优化Adapter,我们将在接下来的文章中介绍。

Picasso的强项:缓存

当你上下滑动时,你会发现图像的展示比之前快多了。你可能已经猜到了,这些图像来自于缓存,并非再次通过网络加载。Picasso的缓存实现非常的全面,帮你把事情变得简单。缓存的大小取决设备的磁盘容量。

每当加载一张图像时。Picasso有三种加载来源:内存,磁盘和网络(顺序由快到慢)。再强调一遍,这里并没有什么是你必须要做的。在创建缓存大小方面,Picasso对你隐藏了所有的复杂细节。当然,从Picasso的实现理念来看,你可以替换缓存组件。我们将会在以后的文章中进一步了解缓存机制。

GridView

GridView的Item与ListView的实现保持无异。实际上,你可以使用同一个Adapter。只需把Activity所持有的Layout变为相应的GridView即可:

<?xml version="1.0" encoding="utf-8"?>
<GridView
    android:id="@+id/usage_example_gridview"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:numColumns="2"/>

最终展示效果如下:

其它应用:多个ImageView作为元素

至此,我们只演示了整个Adapter只有一个ImageView元素的情况。如果一个或多个ImageView作为Adapter的一小部分存在,这种方法仍然适用,只不过getView()中的代码看起来会有些不同,但是Picasso的加载方式是始终不变的。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Master-Worker模式实现立方和相加

    Master-Worker框架如下,首先实现的Master线程,主要用作分配任务,和返回结果集。

    小鄧子
  • 【译】Android泄漏模式:View中的订阅

    我们通过一些自定义的view来构建Square register模块。有时候这些view需要监听一个比他们自身声明周期还要长的对象。

    小鄧子
  • 三行情诗

    小鄧子
  • 常见机器学习效果调优思路整理

    实际工作中,对模型和算法的效果如果不满意,需要进行调优,但往往不知道该怎么下手,本文是一篇博客的学习笔记,分享给大家。

    张红林
  • android studio 的几个好用的工具

    用户1127566
  • QuickPager分页组件,v2.0.4.6发布

      以前QuickPager分页组件的样式都不怎么好看,但是突然有一天看到了《24款超实用的Web 2.0风格翻页代码》,感谢wayshan 提供了这么多的样式...

    用户1174620
  • 新餐饮变革之下,小程序如何为餐饮赋能?

    当餐饮“守旧派”还在坚持传统的餐饮经营方式,餐饮“维新派”已经开始利用移动互联网技术开启餐饮经营模式的变革。今年上半年推出的微信小程序与线下餐饮消费场景有哪些结...

    用户1745481
  • 新餐饮变革之下,小程序如何为餐饮赋能?

    当餐饮“守旧派”还在坚持传统的餐饮经营方式,餐饮“维新派”已经开始利用移动互联网技术开启餐饮经营模式的变革。今年上半年推出的微信小程序与线下餐饮消费场景有哪些结...

    用户1745481
  • 还在「@微信官方」?想给头像加圣诞帽,用这个小程序就可以!

    微信什么时候有了这么高端的操作?作为一名老司机,知晓君眉头一皱,发现事情并不简单。

    知晓君
  • Spring MVC组件

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    多凡

扫码关注云+社区

领取腾讯云代金券