【译】占位图与渐变效果

原文链接： Placeholders, Errors and Fading

原文作者： Future Studio

译文出自：小鄧子的简书

译者：小鄧子

状态：完成

预加载占位图: .placeholder()

我们甚至不用解释或者讨论：一个空的ImageView在视觉体验上真的很差，因为这是毋庸置疑的。如果你使用Picasso，你可能更倾向于通过网络连接来加载图像。依赖于你所处的网络环境，加载过程可能需要大量时间。一个比较优雅的方式就是先放置一个占位图，直到真正的图像被加载和处理完成之后，再进行替换。

Picasso的流式接口调用方式让操作变得异常简单。只需要调用.placeHolder()，并传入一个Drawable的资源引用，它就会先展示这个占位图，直到真正的图像准备好。

Picasso
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .into(imageViewPlaceholder);

出于明显的理由，不能把一个网络地址作为占位图，因为一旦占位图需要时间下载便失去了它原本的意义。App本身的资源文件是很方便使用和访问的。然而，对于.load()来说，Picasso能够接受各种参数值，因此可能出现不可加载（如，无网络链接，服务器宕机等），资源被删除或者无访问权限等现象。下一节中，我们将讨论如何使用异常占位图。

异常占位图: .error()

假设我们的应用需要从一个网站加载图像，不幸的是，这个网站目前宕机了。Picasso确实为我们提供了一个处理异常的回调，来应对这种情况的发生。但是对于现在来讲，它的实现或许有些复杂，因此我们会在随后的文章对其讨论。其实在大多数场景中，使用一个特殊的占位图来标识那些不能被加载的图像，显然是足够的。

使用方式与前面讲到的设置预加载占位图一样，唯一不同的是我们要调用是.error()函数。

Picasso
    .with(context)
    .load("http://futurestud.io/non_existing_image.png")
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
    .into(imageViewError);

就是这样！如果你定义在.load()中的值不能被加载，Picasso将会展示R.mipmap.future_studio_launcher。再次强调，.error()中所能接受的参数只能是已经初始化的drawable对象或指向资源的引用（如，R.drawable.<drawable-keyword>）。

noFade()的运用

无论你是要在加载完成之前展示一个展位图还是其他，Picasso为了让UI视图的改变更加揉和，会使用一个渐变效果将图像添加到ImageView上。如果你希望直接展示图像而不需要这种渐变效果，可以在Picasso请求上调用.noFade()。

Picasso
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .error(R.mipmap.future_studio_launcher) // will be displayed if the image cannot be loaded
    .noFade()
    .into(imageViewFade);

这将会直接显示你的图片，ImageView上将不会看到任何的渐变效果。请确保你有充分的理由这样做！

重要的是要知道，这些方法的调用彼此之间不需要相互依赖，也就是说，你可以只使用.error()，而不调用.placeholder()。任意的流式调用组合都是有可能的。

noPlaceholder()的运用

最后，你可能在文档中发现了.noPlaceholder()这个函数。了解它很重要，因为这个调用会禁用之前通过.placeholder()或者.error()传入的占位图。因此它也涵盖着不同的使用场景。

让我们考虑一下这个场景：你想为一个ImageView加载图像，一段时间之后，你又想为这个ImageView加载另一个图像。在默认配置条件下，你创建第二次Picasso调用的时候，ImageView将会清除之前的图像并显示通过.placeholder()设置的占位图。如果ImageView上的图像在数秒内发生了连续变化，你的用户不仅会感到困惑而且也很影响体验。更好的解决办法就是在第二次Picasso请求上调用.noPlaceholder()。这样就能一直保持之前的图像直到第二次加载完成。从而获得更更舒服的用户体验。

// load an image into the imageview
Picasso
    .with(context)
    .load(UsageExampleListViewAdapter.eatFoodyImages[0])
    .placeholder(R.mipmap.ic_launcher) // can also be a drawable
    .into(imageViewNoPlaceholder, new Callback() {
        @Override
        public void onSuccess() {
            // once the image is loaded, load the next image
            Picasso
                .with(context)
               .load(UsageExampleListViewAdapter.eatFoodyImages[1])
               .noPlaceholder() // but don't clear the imageview or set a placeholder; just leave the previous image in until the new one is ready
               .into(imageViewNoPlaceholder);
        }

        @Override
        public void onError() {

        }
    });

这段代码片精准的做到了我们的期望。当第一个图像加载完成后，立即开始第二个图像加载请求。然而，由于.noPlaceholder()的使用，它在恰当的时机保持了之前的图像不变。