Picasso入门教程(三)

最新推荐文章于 2020-11-07 15:21:09 发布

xinglianfly

最新推荐文章于 2020-11-07 15:21:09 发布

阅读量994

点赞数

分类专栏： android 文章标签： listview android Picasso GridView 加载图片

android 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

使用Listview实现一个简单的画廊

首先我们需要一些测试的图片，我们在服务器上上传了一些比较好的图片供我们测试。

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测试一下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));
    }
}

第三，写一个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"/>

在看到效果之前，我们需要实现ListView的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;
    }
}

从上面的代码中你可以看到，Picasso加载图片主要发生在getView()这个方法中，Picasso类库的调用和之前的常规的代码的调用并没有什么不同。
作为一个高级的安卓开发者你应该知道，我们需要在listview中重用布局，这样可以使listview滑动起来更流畅。对于Picasso来说，当你取消请求的时候，清除ImageView的时候，它都会自动帮你处理。
（fit()这个方法你将会在接下来的教程中看到）
下面是效果图：
运行效果图

Picasso的一大优势：缓存

当你滑动列表或者下载了很多图片的时候，你将会看到图片比原来加载的速度更快了。正如你所猜想的：这些图片是从缓存中加载的而不是从网络上下载的。Picasso在图片缓存方面做得很好，所以你要做得事情变得很简单。缓存的大小取决于你的设备硬盘的大小。
当加载一张图片的时候，Picasso可以使用三种资源：内存中的资源（memory），硬盘中的资源和网络上的资源。（加载速度由快到慢）。再重复一遍，这里没有什么是你需要做的。Picasso创建了一个合适的缓存大小，自动帮你做了这些事。当然，你可以改变或者替换掉缓存组件。在接下来的博客中，你可以看到关于这方面的详细描述。