一、Fresco简介
Fresco是facebook出品的一款图片加载框架,使用了Fresco之后,不需要再考虑图片的加载和内存占用的问题,堪称图片加载的神器。Fresco将图片存储到一个特殊的区域,避免了OOM。
Fresco:github.com/facebook/fr…
二、使用Fresco实现大图浏览
先上效果图:
1、需求
- 点击图片出现大图浏览的界面
- 背景要全黑
- 没有状态栏
- 支持手势放大及拖拽
- 点击关闭大图浏览
2、功能实现
(1)、引入Fresco和PhotoDraweeView
要实现手势放大和拖拽,还需要引入PhotoDraweeView
PhotoDraweeView:github.com/ongakuer/Ph…
在项目中添加依赖
compile 'com.facebook.fresco:fresco:1.2.0'
compile 'me.relex:photodraweeview:1.1.2'复制代码
(2)、初始化Fresco
创建MyApp,继承自Application,在onCreate()方法中初始化Fresco
public class MyApp extends Application {
@Override
public void onCreate() {
super.onCreate();
Fresco.initialize(this);
}
}复制代码
在清单文件中指定Application类,
<application
android:name=".MyApp"
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
intent-filter>
activity>
application>复制代码
(3)、添加SimpleDraweeView控件
在主页面添加SimpleDraweeView控件,设置下载链接,然后设置点击事件,跳转到图片浏览页面
添加SimpleDraweeView控件
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/sd_view"
android:clickable="true"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="match_parent"/>复制代码
设置下载链接并设置点击事件
public class MainActivity extends AppCompatActivity {
private SimpleDraweeView mImageView;
private String IMG_URL = "https://juemuren4449.com/uploads/mouse.jpg";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
initEvent();
}
private void initView() {
mImageView = (SimpleDraweeView) findViewById(R.id.sd_view);
}
private void initData() {
mImageView.setImageURI(IMG_URL);
}
private void initEvent() {
mImageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this, ImageViewActivity.class);
intent.putExtra("img_url", IMG_URL);
startActivity(intent);
}
});
}
}复制代码
(4)、添加PhotoDraweeView控件
在大图浏览布局中添加PhotoDraweeView控件
<me.relex.photodraweeview.PhotoDraweeView
android:id="@+id/photoView"
android:layout_width="match_parent"
android:layout_height="match_parent"/>复制代码
将PipelineDraweeController设置给PhotoDraweeView,并设置点击关闭
public class ImageViewActivity extends Activity {
private PhotoDraweeView mPhotoDraweeView;
private String img_url;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image_view);
initView();
initData();
initEvent();
}
private void initView() {
mPhotoDraweeView = (PhotoDraweeView) findViewById(R.id.photoView);
}
private void initData() {
img_url = getIntent().getStringExtra("img_url");
if (!TextUtils.isEmpty(img_url)) {
PipelineDraweeControllerBuilder controller = Fresco.newDraweeControllerBuilder();
controller.setUri(img_url);//设置图片url
controller.setOldController(mPhotoDraweeView.getController());
controller.setControllerListener(new BaseControllerListener() {
@Override
public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) {
super.onFinalImageSet(id, imageInfo, animatable);
if (imageInfo == null || mPhotoDraweeView == null) {
return;
}
mPhotoDraweeView.update(imageInfo.getWidth(), imageInfo.getHeight());
}
});
mPhotoDraweeView.setController(controller.build());
} else {
Toast.makeText(this, "图片获取失败", Toast.LENGTH_SHORT).show();
}
}
private void initEvent() {
//添加点击事件
mPhotoDraweeView.setOnPhotoTapListener(new OnPhotoTapListener() {
@Override
public void onPhotoTap(View view, float x, float y) {
finish();
}
});
}
}复制代码
(5)、设置大图浏览Activity的主题
在清单文件中设置ImageViewActivity的主题为全屏
<activity
android:name=".ImageViewActivity"
android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen">
activity>复制代码
至此,我们就使用Fresco实现了大图浏览的功能
注意:如果使用上面的方法,那么ImageViewActivity要继承自Activity,当然也可以通过其他方式实现全屏,例如自定义主题样式。
代码已上传至Github:github.com/juemuren444…
欢迎访问我的博客:juemuren4449.com/