Android使用Fresco加载图片的用法

在Android的App开发中,延时加载图片是硬需求。有好几个开源的项目也提供了延时加载图片的功能,常用的有:FrescoGlideUniversal Image Loader。这里主要简单介绍下Fresco。

添加依赖

在build.gradle添加依赖如下:

dependencies {
  ... 
  compile 'com.facebook.fresco:fresco:0.12.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'
}

初始化Fresco

在使用Fresco之前需要初始化Fresco。因为Fresco只需要初始化一次,如果需要在多个地方使用Fresco加载图片,建议在Application里初始化Fresco。

import android.app.Application;
import com.facebook.drawee.backends.pipeline.Fresco;
 
public class MyApplication extends Application {
    @Override
  public void onCreate() {
      super.onCreate();
      Fresco.initialize(this);
    }
}

在AndroidManifest.xml声明网络请求的权限

<manifest
  ...
  >
  <uses-permission android:name="android.permission.INTERNET" />
  <application
    ...
    android:label="@string/app_name"
    android:name=".MyApplication"
    >
    ...
  </application>
  ...
</manifest>

使用Fresco

开始使用Fresco之前,需要理解Fresco的三个基本概念。Fresco加载图片类似于MVC模式,对应的三个组件如下:

  • DraweeView:表示MVC里的View。它继承于View,负责显示图片。其中SimpleDraweeView是它的一个简单的实现。
  • DraweeHierarchy:表示MVC里的Model。用于组织和维护最终绘制和呈现的 Drawable 对象
  • DraweeController:表示MVC里的Controller。它负责图片的加载。

如果是简单的加载图,可以直接使用SimpleDraweeView。

XML

为了在XML里使用com.facebook.drawee.view.SimpleDraweeView,需要天津啊fresco的xml命名空间

xmlns:fresco="http://schemas.android.com/apk/res-auto"

示例如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.MainActivity">
 
    <com.facebook.drawee.view.SimpleDraweeView
        android:layout_width="400dp"
        android:layout_height="match_parent"
        android:id="@+id/main_simple_drawee_view"
        fresco:placeholderImage="@mipmap/ic_launcher"/>
</RelativeLayout>

SimpleDraweeView的相关属性如下

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

需要注意:

  • 必须设置android:layout_width 和 android:layout_height,否则不显示图片
  • 不支持android:layout_width 和 android:layout_height同时设置为wrap_content
  • wrap_content只有在固定宽高的情况下可以使用

固定宽高

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/my_image_view"
    android:layout_width="20dp"
    android:layout_height="wrap_content"
    fresco:viewAspectRatio="1.33"

在Activity调用

import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
 
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.drawee.view.SimpleDraweeView;
 
public class MainActivity extends AppCompatActivity {
 
    private SimpleDraweeView mSimpleDraweeView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mSimpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_simple_drawee_view);
        Uri uri = Uri.parse("http://example.com/mypic.png");
                mSimpleDraweeView .setImageURI(uri);
    }
}

最简单的使用时直接使用setImageURI设置uri。

如果在加载图片时需要更多的效果可以使用DraweeController

import android.net.Uri;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
 
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.drawee.view.SimpleDraweeView;
 
public class MainActivity extends AppCompatActivity {
 
    private SimpleDraweeView mSimpleDraweeView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mSimpleDraweeView = (SimpleDraweeView) findViewById(R.id.main_simple_drawee_view);
        Uri uri = Uri.parse("http://example.com/mypic.png");
                DraweeController controller = Fresco.newDraweeControllerBuilder()
                        .setUri(uri)
                        .setAutoPlayAnimations(true)
                        .build();
        mSimpleDraweeView .setController(controller);
    }
}

更多可以参考:https://www.fresco-cn.org/docs/

版权声明:著作权归作者所有。

相关推荐

Android无损压缩图片方法

这是把图片以无损的方式压缩。public String compressImage(String imageUri) { String filePath = getRealPathFromURI(imageUri); Bitmap scaledBitmap = null; BitmapFactory.Options options =

Html对加载失败的图片使用默认图片替换

在img标签使用onerror监听图片的加载,如果出现错误:1、设置onerror=null,这是为了避免default.png也加载失败2、把图片的src属性设置为默认图片的url,加载默认图片替换。<img src="myimg.png" onError="this.onerror=null;this.src='default.png';&quo

纯JavaScript检测页面是否加载完成(理解JavaScript页面加载事件)

JavaScript与页面加载相关的事件先介绍JavaScript与页面加载相关的几个事件:document.readystatechangereadystatechage事件会监控document.readyState。readyState有三个值:loading:文档正在加载interactive:文档已加载完成且已被解析,但子资源(如image,css,iframe等)仍在加载。comple

Android Room的用法

SQLite是Android内置的轻量级关系型数据库,但直接使用SQLite core包做数据库操作有以下劣势:需要编写长且重复的代码,这会很耗时且容易出错。管理SQL困难,特别对于复杂的数据库结构。Room是在这样的背景下应运而生。Room充当现有SQLite API的抽象层。 SQLiite API所有必需的包,参数,方法和变量都使用简单的注释Annot

Rxjs expand的用法分析

Rxjs的expand()函数声明:public expand(project: function(value: T, index: number), concurrent: number, scheduler: Scheduler): Observable expand()会递归调用project函数,project函数把源值映射为一个Observable,每次递归