Android Fresco图片处理库用法API英文原文文档2-1(Facebook开源Android图片库)

这是英文文档的第二部分(1):DRAWEE GUIDE

由于第二部分内容多一些,所以分为2个文章发。方便大家查看。

Using Drawees in XML

Drawees have very extensive customization facilities. The best way to customize your Drawee is to do so in the XML.

Here is an example that sets nearly all possible options:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="20dp"
    fresco:fadeDuration="300"
    fresco:actualImageScaleType="focusCrop"
    fresco:placeholderImage="@color/wait_color"
    fresco:placeholderImageScaleType="fitCenter"
    fresco:failureImage="@drawable/error"
    fresco:failureImageScaleType="centerInside"
    fresco:retryImage="@drawable/retrying"
    fresco:retryImageScaleType="centerCrop"
    fresco:progressBarImage="@drawable/progress_bar"
    fresco:progressBarImageScaleType="centerInside"
    fresco:progressBarAutoRotateInterval="1000"
    fresco:backgroundImage="@color/blue"
    fresco:overlayImage="@drawable/watermark"
    fresco:pressedStateOverlayImage="@color/red"
    fresco:roundAsCircle="false"
    fresco:roundedCornerRadius="1dp"
    fresco:roundTopLeft="true"
    fresco:roundTopRight="false"
    fresco:roundBottomLeft="false"
    fresco:roundBottomRight="true"
    fresco:roundWithOverlayColor="@color/corner_color"
    fresco:roundingBorderWidth="2dp"
    fresco:roundingBorderColor="@color/border_color"
  />

Height and width mandatory

You must declare both android:layout_width and android:layout_height.
Without both of these two, the view will not be able to lay the image out correctly.

wrap_content

Drawees do not support the wrap_content value for the layout_width and layout_heightattributes.

The reason for this is that the content‘s size changes. The size of your downloaded image can be different from your placeholder - and the failure and retry images, if any, can be still different.

Use of wrap_content would force Android to do another layout pass when your image comes in - and for the layout to change before users‘ eyes, creating a jarring effect.

Fixing the aspect ratio

This is the one time you should use wrap_content.

You can force a DraweeView to be laid out in a particular aspect ratio. If you want a width:height ratio of 4:3, for instance, do this:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="wrap_content"
    <!-- other attributes -->

Then specify your aspect ratio in Java:

mSimpleDraweeView.setAspectRatio(1.33f);

Using Drawees in Code

Change the image

The easy to way is to call

mSimpleDraweeView.setImageURI(uri);

For more advanced requirements, use a controller builder.

Customizing the hierarchy

For most apps, specify the parameters of their hierarchy in XML provides all the customization
they need. In some cases, though, you may need to go further.

We create an instance of the builder and then set it to the view:

List<Drawable> backgroundsList;
List<Drawable> overlaysList;
GenericDraweeHierarchyBuilder builder =
    new GenericDraweeHierarchyBuilder(getResources());
GenericDraweeHierarchy hierarchy = builder
    .setFadeDuration(300)
    .setPlaceholderImage(new MyCustomDrawable())
    .setBackgrounds(backgroundList)
    .setOverlays(overlaysList)
    .build();
mSimpleDraweeView.setHierarchy(hierarchy);

Do not call setHierarchy more than once on the same view, even if the view is recycled. The hierarchy is expensive to create and is
intended to be used more than once. UsesetController or setImageURI to change the image shown in
it.

Modifying the hierarchy in-place

Some attributes of the hierarchy can be changed while the application is running.

You would first need to get it from the View:

GenericDraweeHierarchy hierarchy = mSimpleDraweeView.getHierarchy();

Change the placeholder

Then you could modify the placeholder, either with a resource id:

hierarchy.setPlaceholderImage(R.drawable.placeholderId);

or a full-fledged Drawable:

Drawable drawable;
// create your drawable
hierarchy.setPlaceholderImage(drawable);

Change the image display

You can change the scale type:

hierarchy.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE);

If you have chosen scale type focusCrop, you‘ll need to set a focus point:

hierarchy.setActualImageFocusPoint(point);

You can add a color filter to the image:

ColorFilter filter;
// create your filter
hierarchy.setActualImageColorFilter(filter);

Rounding

All of the rounding related params, except the rounding method, can be modified.
You get aRoundingParams object from the hierarchy, modify it, and set it back again:

RoundingParams roundingParams = hierarchy.getRoundingParams();
roundingParams.setCornersRadius(10);
hierarchy.setRoundingParams(roundingParams);

Drawee Image Branches

Contents

Definitions

This page outlines the different image branches that can be displayed in a Drawee, and how they are set.

Except for the actual image, all of them can be set by an XML attribute. The value in XML must be either an Android drawable or color resource.

They can also be set by a method in the GenericDraweeHierarchyBuilder class,
if setting programmatically. In code, the value can either be from resources or be a
custom subclass ofDrawable.

Some of the items can even be changed on the fly after the hierarchy has been built. These have a method in the GenericDraweeHierarchy class.

Several of the drawables can be scaled.

Actual

The actual image is the target; everything else is either an alternative or a decoration. This is specified using a URI, which can point to an image over the Internet, a local file, a resource, or a content provider.

This is a property of the controller, not the hierarchy. It therefore is not set by any of the methods used by the other Drawee components.

Instead, use the setImageURI method or set
a controller
 programmatically.

In addition to the scale type, the hierarchy exposes other methods only for the actual image. These are:

  • the focus point (used for the focusCrop scale
    type only)
  • a color filter

Default scale type: centerCrop

Placeholder

The placeholder is shown in the Drawee when it first appears on screen. After you have called setController or setImageURI to
load an image, the placeholder continues to be shown until the image has loaded.

In the case of a progressive JPEG, the placeholder only stays until your image has reached the quality threshold, whether the default, or one set by your app.

XML attribute: placeholderImage

Hierarchy builder method: setPlaceholderImage

Hierarchy method: setPlaceholderImage

Default value: a transparent ColorDrawable

Default scale type: centerInside

Failure

The failure image appears if there is an error loading your image. The most common cause of this is an invalid URI, or lack of connection to the network.

XML attribute: failureImage

Hierarchy builder method: setFailureImage

Default value: The placeholder image

Default scale type: centerInside

Retry

The retry image appears instead of the failure image if you have set your controller to enable the tap-to-retry feature.

You must build your own Controller to do this. Then add the following line

.setTapToRetryEnabled(true)

The image pipeline will then attempt to retry an image if the user taps on it. Up to four attempts are allowed before the failure image is shown instead.

XML attribute: retryImage

Hierarchy builder method: setRetryImage

Default value: The placeholder image

Default scale type: centerInside

Progress Bar

If specified, the progress bar image is shown as an overlay over the Drawee until the final image is set.

Currently the progress bar remains the same throughout the image load; actually changing in response to progress is not yet supported.

XML attribute: progressBarImage

Hierarchy builder method: setProgressBarImage

Default value: None

Default scale type: centerInside

Backgrounds

Background drawables are drawn first, "under" the rest of the hierarchy.

Only one can be specified in XML, but in code more than one can be set. In that case, the first one in the list is drawn first, at the bottom.

Background images don‘t support scale-types and are scaled to the Drawee size.

XML attribute: backgroundImage

Hierarchy builder method: setBackground, setBackgrounds

Default value: None

Default scale type: N/A

Overlays

Overlay drawables are drawn last, "over" the rest of the hierarchy.

Only one can be specified in XML, but in code more than one can be set. In that case, the first one in the list is drawn first, at the bottom.

Overlay images don‘t support scale-types and are scaled to the Drawee size.

XML attribute: overlayImage

Hierarchy builder method: setOverlay, setOverlays

Default value: None

Default scale type: N/A

Pressed State Overlay

The pressed state overlay is a special overlay shown only when the user presses the screen area of the Drawee. For example, if the Drawee is showing a button, this overlay could have the button change color when
pressed.

The pressed state overlay doesn‘t support scale-types.

XML attribute: pressedStateOverlayImage

Hierarchy builder method: setPressedStateOverlay

Default value: None

Default scale type: N/A

Scaling

You can specify a different scale type for each of the different drawables in your Drawee.
The

Available scale types

Scale Type Explanation
center Center the image in the view, but perform no scaling.
centerCrop Scales the image so that both dimensions will be greater than or equal to the corresponding dimension of the parent.

One of width or height will fit exactly.

The image is centered within parent‘s bounds.

focusCrop Same as centerCrop, but based around a caller-specified focus point instead of the center.
centerInside Downscales the image so that it fits entirely inside the parent.

Unlike fitCenter, no upscaling will be performed.

Aspect ratio is preserved.

The image is centered within parent‘s bounds.

fitCenter Scales the image so that it fits entirely inside the parent.

One of width or height will fit exactly.

Aspect ratio is preserved.

The image is centered within the parent‘s bounds.

fitStart Scales the image so that it fits entirely inside the parent.

One of width or height will fit exactly.

Aspect ratio is preserved.

The image is aligned to the top-left corner of the parent.

fitEnd Scales the image so that it fits entirely inside the parent.

One of width or height will fit exactly.

Aspect ratio is preserved.

The image is aligned to the bottom-right corner of the parent.

fitXY Scales width and height independently, so that the image matches the parent exactly.

Aspect ratio is not preserved.

none Used for Android‘s tile mode.

These are mostly the same as those supported by the Android ImageView class.

The one unsupported type is matrix. In its place, Fresco offers focusCrop, which will usually work
better.

How to set

Actual, placeholder, retry, and failure images can all be set in XML, using attributes
likefresco:actualImageScaleType. You can also set them in
code
 using theGenericDraweeHierarchyBuilder class.

Even after your hierarchy is built, the actual image scale type can be modified on the fly using GenericDraweeHierarchy.

However, do not use the android:scaleType attribute, nor the .setScaleType method.
These have no effect on Drawees.

focusCrop

Android, and Fresco, offer a centerCrop scale type, which will fill the entire viewing area while preserving the aspect ratio of the image, cropping as necessary.

This is very useful, but the trouble is the cropping doesn‘t always happen where you need it. If, for instance, you want to crop to someone‘s face in the bottom right corner of the image,centerCrop will
do the wrong thing.

By specifying a focus point, you can say which part of the image should be centered in the view. If you specify the focus point to be at the top of the image, such as (0.5f, 0f), we guarantee that, no matter what, this point will be visible and centered in
the view as much as possible.

Focus points are specified in a relative coordinate system. That is, (0f, 0f) is the top-left corner, and (1f, 1f) is the bottom-right corner. Relative coordinates allow focus points to be scale-invariant, which is highly useful.

A focus point of (0.5f, 0.5f) is equivalent to a scale type of centerCrop.

To use focus points, you must first set the right scale type in your XML:

  fresco:actualImageScaleType="focusCrop"

In your Java code, you must programmatically set the correct focus point for your image:

PointF focusPoint;
// your app populates the focus point
mSimpleDraweeView
    .getHierarchy()
    .setActualImageFocusPoint(focusPoint);

none#

If you are using Drawables that make use of Android‘s tile mode, you need to use the nonescale type for this to work correctly.

Rounded Corners and Circles

Not every image is a rectangle. Apps frequently need images that appear with softer, rounded corners, or as circles. Drawee supports a variety of scenarios, all without the memory overhead of copying bitmaps.

What

Images can be rounded in two shapes:

  1. As a circle - set roundAsCircle to true.
  2. As a rectangle, but with rounded corners. Set roundedCornerRadius to some value.

Rectangles support having each of the four corners have a different radius, but this must be specified in Java code rather than XML.

How

Images can be rounded with two different methods:

  1. BITMAP_ONLY - Uses a shader to draw the bitmap with rounded corners. This is the default rounding method. This works only on the actual
    image and the placeholder. Other branches, like failure and retry images, are not rounded.
    Furthermore, this rounding method doesn‘t support animations.
  2. OVERLAY_COLOR - Draws rounded corners by overlaying a solid color, specified by the caller. The Drawee‘s background should be static
    and of the same solid color. UseroundWithOverlayColor in XML, or setOverlayColor in code, for this
    effect.

In XML

The SimpleDraweeView class will forward several attributes over to RoundingParams:

<com.facebook.drawee.view.SimpleDraweeView
   ...
   fresco:roundedCornerRadius="5dp"
   fresco:roundBottomLeft="false"
   fresco:roundBottomRight="false"
   fresco:roundWithOverlayColor="@color/blue"
   fresco:roundingBorderWidth="1dp"
   fresco:roundingBorderColor="@color/red"

In code#

When constructing a hierarchy, you can pass an instance of RoundingParams to
yourGenericDraweeHierarchyBuilder:

RoundingParams roundingParams = RoundingParams.fromCornersRadius(7f);
roundingParams.setOverlayColor(R.color.green);
// alternatively use fromCornersRadii or asCircle
genericDraweeHierarchyBuilder
    .setRoundingParams(roundingParams);

You can also change most of the rounding parameters on the fly:

RoundingParams roundingParams =
    mSimpleDraweeView.getHierarchy().getRoundingParams();
roundingParams.setBorder(R.color.red, 1.0);
roundingParams.setRoundAsCircle(true);
mSimpleDraweeView.getHierarchy().setRoundingParams(roundingParams);

The one exception to this is that the RoundingMethod cannot be changed when changing dynamically. Attempting to do so will throw an IllegalStateException.

时间: 2024-10-10 20:52:22

Android Fresco图片处理库用法API英文原文文档2-1(Facebook开源Android图片库)的相关文章

Android Fresco图片处理库用法API英文原文文档2-2(Facebook开源Android图片库)

Android Fresco图片处理库用法API英文原文文档2-2(Facebook开源Android图片库) 这是英文文档的第二部分(2):DRAWEE GUIDE 由于第二部分内容多一些,所以分为2个文章发.方便大家查看. Using the ControllerBuilder SimpleDraweeView has two methods for specifying an image. The easy way is to just callsetImageURI. If you wa

Android Fresco图片处理库用法API英文原文文档1(Facebook开源Android图片库)

Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库,可以从网络.本地存储和本地资源中加载图片.其中的Drawees可以显示占位符,直到图片加载完成.而当图片从屏幕上消失时,会自动释放内存. 功能很强大,为了大家学习方便,我将英文原文文档给大家迁移过来,供参考学习. 这是英文文档的第一部分:QUICK START QUICK START Adding Fresco to your Project Here's how to add Fresco to your

Android Fresco图片处理库用法API英文原文文档3(Facebook开源Android图片库)

这是英文文档的第三部分:IMAGE PIPELINE GUIDE Introduction to the Image Pipeline The image pipeline does everything necessary to get an image into a form where it can be rendered into an Android device. The pipeline goes through the following steps when given an

Android Fresco图片处理库用法API英文原文文档4(Facebook开源Android图片库)

这是英文文档的第三部分:THIRD PARTY LIBRARIES Using Other Network Layers By default, the image pipeline uses the HttpURLConnection networking library bundled with Android. Apps may have their own network layer they may wish to use instead. Using OkHttp OkHttp is

Android图片剪裁库

最近利用一周左右的业余时间,终于完成了一个Android图片剪裁库,核心功能是根据自己的理解实现的,部分代码参考了Android源码的图片剪裁应用.现在将该代码开源在Github上以供大家学习和使用,地址:https://github.com/Jhuster/ImageCropper,效果如下所示: 我的大致计划是首先介绍一下这个库的用法,然后再写几篇文章介绍一下其中的一些原理和关键技术,希望对Android开发新手有所帮助. [特性] 支持通过手势移动和缩放剪裁窗口 支持固定剪裁窗口大小.固定

Android之图片加载框架Fresco基本使用(一)

PS:Fresco这个框架出的有一阵子了,也是现在非常火的一款图片加载框架.听说内部实现的挺牛逼的,虽然自己还没研究原理.不过先学了一下基本的功能,感受了一下这个框架的强大之处.本篇只说一下在xml中设置属性的相关用法. 0.引入Fresco以及相关注意事项. 1.PlaceHolderImage占位图 2.FailureImage加载失败时显示的图片 3.RetryImage重新加载的图片 4.ProgressBarImage加载时显示的进度图片 5.BackgroundImage背景图 6.

Android 一起来看看知乎开源的图片选择库

前言 在实际开发中,图片选择器一直都是必不可少的一个部分,不管是 QQ 头像的设置,还是发送一条装逼的微信朋友圈,都要用到图片选择器来给用户选择他们想要上传的图片,最近知乎开源了一款图片选择库 Matisse 简直美哭了,而且完全遵循 Android 交互设计规范,实在是很良心. 在开始正文之前,先欣赏一下这个图片选择器的效果 是不是感觉相当的简洁好看,反正我是这么认为的. 一.基本使用 1.导入相应的依赖库 Gradle: repositories { jcenter() } dependen

Android压缩图片和libjpeg库

前言 Fjpeg使用 Fjpeg 注意 如何使用 如何压缩图片只改变在硬盘的存储大小 如何改变图片分辨率让其Bitmap对象可以加载到内存中 关于重载版本 开始学习之旅 补充知识的结论 修改图片分辨率 防止在Android加载Bitmap的时候oom内存溢出 解决方案1 解决方案2 希望压缩图片方便网络传输 第一种方案利用Bitmapcompress方法压缩 第二种利用libjpeg压缩 在Android50测试两个 图片压缩 在Android60测试两个 图片压缩 解释Android50和60

Android # 图片自动适配屏幕,APK反编译详解,Google Maps Android API,Keytool

本文主题:(图片缩放)自动适配屏幕,APK反编译详解,Google Maps Android API,Keytool  (图片缩放)自动适配屏幕支持缩放旋转,自动居中的imageview http://deanandbai-gmail-com.iteye.com/blog/1850329 apk反编译工具 http://pan.baidu.com/s/1qWFcueC Android APK反编译详解 http://blog.csdn.net/ithomer/article/details/67