【译】与Adapter一起使用（ListView, GridVi

• 原文链接： Adapter Use (ListView, GridView, ...)
• 原文作者： Future Studio
• 译文出自： 小鄧子的简书
• 译者： 小鄧子
• 状态： 完成

简单的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;
    }
}

最有趣的东西发生在ImageListAdapter的getView()方法中。你会发现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的加载方式是始终不变的。