关闭

Fresco简单使用

标签: androidfresco
107人阅读 评论(0) 收藏 举报
分类:

1.入门介绍

1.添加依赖(Android Studio)

build.gradle 文件:

dependencies {
    compile 'com.facebook.fresco:fresco:0.13.0'
}

下面的依赖需要根据需求添加:

dependencies {
  // 在 API < 14 上的机器支持 WebP 时,需要添加
  compile 'com.facebook.fresco:animated-base-support:0.12.0'

  // 支持 GIF 动图,需要添加
  compile 'com.facebook.fresco:animated-gif:0.12.0'

  // 支持 WebP (静态图+动图),需要添加
  compile 'com.facebook.fresco:animated-webp:0.12.0'
  compile 'com.facebook.fresco:webpsupport:0.12.0'

  // 仅支持 WebP 静态图,需要添加
  compile 'com.facebook.fresco:webpsupport:0.12.0'
}

2.使用

1).在使用之前必须初始化:

只需调用Fresco.initialize(this)一次即可完成初始化,因此放在Application中最合适

[MyApplication.java]
public class MyApplication extends Application {
    @Override
    public void onCreate() {
        super.onCreate();
        Fresco.initialize(this);
    }
}

同时不要忘了在 AndroidManifest.xml 中指定你的 Application 类,并配置网络权限

<manifest
    ...
    >
    <uses-permission android:name="android.permission.INTERNET" />
    <application
      ...
      android:label="@string/app_name"
      android:name=".MyApplication"
      >
      ...
    </application>
    ...
  </manifest>
2).在xml布局文件中, 加入命名空间
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
3).加入SimpleDraweeView
<com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        fresco:placeholderImage="@mipmap/bg"
        />
4).加载图片
Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);

剩下的,Fresco会替你完成:
显示占位图直到加载完成;
下载图片;
缓存图片;
图片不再显示时,从内存中移除;

2.Drawees

1.在XML中使用Drawees

<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"
/>

需要注意的点:

  1. 必须设置android:layout_width 和 android:layout_height。如果没有在XML中声明这两个属性,将无法正确加载图像。
  2. Drawees 不支持 wrap_content 属性。
  3. 固定宽高比
    只有希望显示固定的宽高比时,可以使用wrap_content。如果希望图片以特定的宽高比例显示,例如 4:3,可以在XML中指定:
<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="wrap_content"
    fresco:viewAspectRatio="1.33"
    <!-- other attributes -->

也可以在代码中设置宽高比:

mSimpleDraweeView.setAspectRatio(1.33f);

2.在JAVA代码中使用Drawees

1.自定义DraweeHierarchy

一般情况下,在XML设置显示效果即可, 如果想更多定制化,可以这样:
创建一个 builder 然后设置给 DraweeView:

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);

对于同一个View,请不要多次调用setHierarchy,即使这个View是可回收的。创建 DraweeHierarchy 的较为耗时的一个过程,应该多次利用。

注意:一个DraweeHierarchy 是不可以被多个 View 共用的!

2.运行时修改 DraweeHierarchy

要改变这些属性,首先获取一个引用:

GenericDraweeHierarchy hierarchy = mSimpleDraweeView.getHierarchy();
1).修改占位图

修改占位图为资源id:

hierarchy.setPlaceholderImage(R.drawable.placeholderId);

你也可以将它修改为一个 Drawable:

Drawable placeholderImage = ...;
hierarchy.setPlaceholderImage(placeholderImage);

其他图层也可以修改:

Drawable failureImage = ...;
hierarchy.setFailureImage(failureImage, ScaleType.CENTER);
2).改变图像的显示

修改缩放类型:

hierarchy.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE);

如果你选择缩放类型为 focusCrop,需要指定一个居中点:

hierarchy.setActualImageFocusPoint(point);

你可以为图像添加一个 color filter:

ColorFilter filter;
// 创建filter
hierarchy.setActualImageColorFilter(filter);
3).圆角

原来为圆角的不能修改为圆圈,反之亦然

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

3.圆角

圆角实际有2种呈现方式:
1. 圆圈 - 设置roundAsCircle为true
2. 圆角 - 设置roundedCornerRadius
置圆角时,支持4个角不同的半径。XML中无法配置,但可在Java代码中配置。
设置圆角
1. 默认使用一个 shader 绘制圆角,但是仅仅占位图和所要显示的图有圆角效果。失败示意图和重下载示意图无圆角效果,且这种圆角方式不支持动画。
2. 叠加一个solid color来绘制圆角。但是背景需要固定成指定的颜色。
在XML中指定 roundWithOverlayColor, 或者通过调用setOverlayColor来完成此设定。

XML中配置

<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"

代码中配置

在创建 DraweeHierarchy 时,可以给 GenericDraweeHierarchyBuilder 指定一个RoundingParams 用来绘制圆角效果。

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

你也可以在运行时,改变圆角效果

RoundingParams roundingParams = RoundingParams.fromCornersRadius(5f);
roundingParams.setBorder(R.color.red, 1.0);
roundingParams.setRoundAsCircle(true);
mSimpleDraweeView.getHierarchy().setRoundingParams(roundingParams);
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:412次
    • 积分:54
    • 等级:
    • 排名:千里之外
    • 原创:5篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档