您的位置：首页 > 移动开发 > Android开发

Fresco 专为ANDROID加载图片（简单使用）

2016-05-12 20:47 495 查看

首先扯点别的：今天从公司请了假，准备去看病，回家，回学校做毕业设计，准备答辩。大学最后一个假期估计也是人生最后一个大假期，开始了。哎，“流光容易把人抛，红了樱桃绿了芭蕉。”，“逝者如斯夫，不舍昼夜啊！”

Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库，可以从网络、本地存储和本地资源中加载图片。其中的Drawees可以显示占位符，直到图片加载完成。而当图片从屏幕上消失时，会自动释放内存。项目的gitHub上的地址 https://github.com/facebook/fresco

项目的README.md中是这样描述Fresco的：

Fresco是在安卓应用中一个强大的系统，用来加载和显示图片。

Fresco专注于图片的加载和展示，可以从网络上、本地存储和本地资源中加载图片，并在图片加载之前显示一个占位图片。Fresco使用两级缓存，一级是内存缓存，一级是内部存储缓存。

在Android4.x和更低的版本中，Fresco把图片放在android系统中的一个特殊的区域。这会使你的应用运行的更快，减少内存溢出的情况。

Fresco 也支持：

渐进式JPEGs

支持GIFs动画和WebP格式的图片

支持用户自定义图片加载和展示方式

更多。。。

今天就先简单的使用一下，不给效果图了，以后的功能再慢慢研究。关于Fresco的详细使用和高级用法，请移步 http://www.fresco-cn.org/ 官方的

在Android studio中使用方便，在你的module的build.gradle中加上一行

dependencies {
compile 'com.facebook.fresco:fresco:0.9.0+'
}

在你的AndroidManifest.xml文件中加上两个权限，不然没法加载网络图片和本地图片

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

1：使用Fresco加载网络图片、drawable目录下的图片、asset目录下的图片、加载手机中存储的图片

新建一个MainActivity

package com.hellorxjava;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.os.Environment;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;

import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.view.SimpleDraweeView;

import java.io.File;

public class MainActivity extends AppCompatActivity {

Button button,button2;
SimpleDraweeView draweeView, draweeView1, draweeView2, draweeView3;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);

/**
* 重要,要在 setContentView(R.layout.activity_main);
* 进行初始化。也可以在App的onCreate()中初始化
*/
Fresco.initialize(getApplicationContext());

setContentView(R.layout.activity_main);

button = (Button) findViewById(R.id.button);
button2 = (Button) findViewById(R.id.button2);

/*启动Main2Activity在ListView中使用Fresco*/
button2.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this,Main2Activity.class));
}
});
draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView1 = (SimpleDraweeView) findViewById(R.id.my_image_view1);
draweeView2 = (SimpleDraweeView) findViewById(R.id.my_image_view2);
draweeView3 = (SimpleDraweeView) findViewById(R.id.my_image_view3);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//加载网络上的一张图片
Uri uri = Uri.parse("http://img.my.csdn.net/uploads/201407/26/1406383214_7794.jpg");
draweeView.setImageURI(uri);
//加载asset中的一张图片,com.hellorxjava是包名
Uri uri1 = Uri.parse("asset://com.hellorxjava/x.jpg");
draweeView1.setImageURI(uri1);
//加载drawable下面的一张图片
Uri uri2 = Uri.parse("res://com.hellorxjava/" + R.drawable.ic_launcher);
draweeView2.setImageURI(uri2);
//加载手机中的一张图片。得保证你有这张图片(/storage/emulated/0/DCIM/Camera/ff.jpg)
String path = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_DCIM) + File.separator + "Camera" + File.separator + "ff.jpg";
// File file=new File(Environment.getExternalStoragePublicDirectory("image").toString());
try {
Uri uri3 = Uri.parse("file://"+path);
draweeView3.setImageURI(uri3);
} catch (Exception e) {
e.printStackTrace();
}

}
});
}
}

MainActivity的布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:orientation="horizontal">

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="150dp"
android:layout_height="150dp"
app:roundedCornerRadius="30dp"
app:placeholderImage="@drawable/ic_launcher"
/>
<!--app:roundedCornerRadius="30dp" 设置圆角图片-->

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view1"
android:layout_width="150dp"
android:layout_height="150dp"
app:placeholderImage="@drawable/ic_launcher"
app:roundAsCircle="true"
/>
<!-- app:roundAsCircle="true"设置为圆型图片-->
</LinearLayout>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:orientation="horizontal">

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view2"
android:layout_width="150dp"
android:layout_height="150dp"
app:placeholderImage="@drawable/ic_launcher" />
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view3"
android:layout_width="150dp"
android:layout_height="150dp"
app:placeholderImage="@drawable/ic_launcher" />
</LinearLayout>

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="@+id/my_image_view"
android:layout_alignRight="@+id/my_image_view"
android:layout_below="@+id/my_image_view"
android:layout_marginTop="97dp"
android:text="New Button" />

<Button

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button2" />

</LinearLayout>

注意：com.facebook.drawee.view.SimpleDraweeView的宽和高不能设为wrap_content

2：在listView中使用Fresco，测试了一下性能，也是没谁了。

新建一个Main2Activity,布局文件中只有一个ListView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.hellorxjava.Main2Activity">

<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"></ListView>
</RelativeLayout>

ListView的子项的布局文件，只有一个com.facebook.drawee.view. SimpleDraweeView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical">

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/item_image"
android:layout_width="150dp"
android:layout_height="150dp"
app:placeholderImage="@drawable/ic_launcher" />

</LinearLayout>

Main2Activity

package com.hellorxjava;

import android.content.Context;
import android.net.Uri;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.view.SimpleDraweeView;

public class Main2Activity extends AppCompatActivity {

ListView listView;
//网络上的图片地址。是从郭霖老师中的一篇博客中找的。
public final static String[] imageThumbUrls = new String[] {
"http://img.my.csdn.net/uploads/201407/26/1406383299_1976.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383291_6518.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383291_8239.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383290_9329.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383290_1042.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383275_3977.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383265_8550.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383264_3954.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383264_4787.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383264_8243.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383248_3693.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383243_5120.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383242_3127.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383242_9576.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383242_1721.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383219_5806.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383214_7794.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383213_4418.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383213_3557.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383210_8779.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383172_4577.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383166_3407.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383166_2224.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383166_7301.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383165_7197.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383150_8410.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383131_3736.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383130_5094.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383130_7393.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383129_8813.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383100_3554.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383093_7894.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383092_2432.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383092_3071.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383091_3119.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383059_6589.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383059_8814.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383059_2237.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383058_4330.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406383038_3602.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382942_3079.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382942_8125.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382942_4881.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382941_4559.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382941_3845.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382924_8955.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382923_2141.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382923_8437.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382922_6166.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382922_4843.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382905_5804.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382904_3362.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382904_2312.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382904_4960.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382900_2418.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382881_4490.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382881_5935.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382880_3865.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382880_4662.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382879_2553.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382862_5375.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382862_1748.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382861_7618.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382861_8606.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382861_8949.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382841_9821.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382840_6603.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382840_2405.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382840_6354.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382839_5779.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382810_7578.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382810_2436.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382809_3883.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382809_6269.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382808_4179.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382790_8326.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382789_7174.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382789_5170.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382789_4118.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382788_9532.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382767_3184.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382767_4772.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382766_4924.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382766_5762.jpg",
"http://img.my.csdn.net/uploads/201407/26/1406382765_7341.jpg"
};

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
/**
* 重要,初始化
*/
Fresco.initialize(getApplicationContext());

setContentView(R.layout.activity_main2);
listView = (ListView) findViewById(R.id.listView);
//给ListView设置适配器。
listView.setAdapter(new MyAdapter(Main2Activity.this,R.layout.item,imageThumbUrls));
}

/*ListView的适配器类*/
class MyAdapter extends ArrayAdapter {

private Context context;
String[] imgUrls;
int resource;

public MyAdapter(Context context, int resource, String[] imgUrls) {
super(context, resource, imgUrls);
this.context = context;
this.imgUrls = imgUrls;
this.resource=resource;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {

Uri uri = Uri.parse(imgUrls[position]);
ViewHolder viewHolder;
if (convertView == null) {

convertView = LayoutInflater.from(context).inflate(resource, parent, false);
viewHolder = new ViewHolder();
viewHolder.simpleDraweeView = (SimpleDraweeView) convertView.findViewById(R.id.item_image);
convertView.setTag(viewHolder);

} else {
viewHolder = (ViewHolder) convertView.getTag();

}
viewHolder.simpleDraweeView.setImageURI(uri);
return convertView;
}
}

class ViewHolder {
SimpleDraweeView simpleDraweeView;
}
}

片文章没给出效果，自己运行的时候忘了截图，不好意思。写的比较简陋还望见谅，以后有时间还会进一步研究Fresco的高级用法和原理。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航