上个星期是个忙碌的一周,全周都在赶进度,可能是过年过的太舒畅了吧。现在终于有空来坐下来,安安静静的思考下这忙碌后的收获。在此也回顾一下,做个分享!
今天的内容是关于大图浏览的实现,可能各种实现方法都很多,但我这里要说的是基于Fresco
来实现。(其实主要是项目中用的就是Fresco
)
Fresco
可能还有人不了解Fresco
,这里我来简单的介绍一下。
Fresco
是facebook
推出的开源项目,该项目主要用来解决Android
图片加载的,它是一个强大的图片加载组件,使用它之后,你不需要再去关心图片的加载和显示的繁琐事件。对于专注于图片App
强烈推荐使用它。
Feature
下面是它的一些突出特性
-
Fresco
中的Image Pipeline
负责从网络、本地文件系统、本地资源加载图片,最大的节省空间与CPU
时间,同时含有3级缓存(2级内存,1级磁盘),支持缩略图与清晰度的转换等 -
Fresco
的Drawees
,负责图片加载完成前的占位图与图片不可见时的释放,同时还支持圆形图片的实现 -
Fresco
支持渐进式图片展示,Android
本身是不支持的。 -
Fresco
完美支持Gif
与WebP
动图,轻松解决每一帧都是很大的Bitmap
烦恼。
传送门: Fresco
大图浏览
添加依赖
既然是基于Fresco
,在实现之前自然要导入Fresco
的相关依赖包。
compile 'com.facebook.fresco:fresco:1.0.0'
compile 'com.facebook.fresco:animated-gif:1.0.0'
compile 'com.facebook.fresco:animated-webp:1.0.0'
compile 'com.facebook.fresco:webpsupport:1.0.0'
如果只要实现普通图片的加载,那么只要导入第一个就可以了。好了现在你就可牛逼哄哄的使用这么高大上的组件来加载图片,至于使用步骤,随便看下相关教程就能轻松搞定,例如前面所说的圆形图片。想当初我还是苦逼是找相关的库来实现的...
SimpleDraweeView
上面只是针对于普通的图片展示,但不是今天的主题。下面是一段基本的使用代码
private void displayImage(SimpleDraweeView draweeView, String url) {
GenericDraweeHierarchy hierarchy = draweeView.getHierarchy();
//设置占位图
if (hierarchy == null) {
hierarchy = GenericDraweeHierarchyBuilder.newInstance(getResources())
.setPlaceholderImage(getResources().getDrawable(R.mipmap.ic_launcher)
, ScalingUtils.ScaleType.CENTER).build();
draweeView.setHierarchy(hierarchy);
} else {
hierarchy.setPlaceholderImage(getResources().getDrawable(R.mipmap.ic_launcher)
, ScalingUtils.ScaleType.CENTER);
}
//构建ImageRequestBuilder,传入请求Uri
ImageRequestBuilder requestBuilder = ImageRequestBuilder.newBuilderWithSource(Uri.parse(url));
//构建Controller
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setOldController(draweeView.getController())
.setImageRequest(requestBuilder.build())
.build();
//设置图片,Fresco设置显示图片都是通过Controller来实现
draweeView.setController(controller);
}
相信上面的注释已经非常明显了
ZoomableView
我们都知道现在只要是个App
且里面有图片的展示,那么基本上就有图片浏览这一个功能。对于大图浏览需要支持缩放、拖拽、双击放大。Fresco
原生的SimpleDraweeView
是不支持这些功能的,所以我们这里要使用另外一个控件ZoomableView
。当然它也是Fresco
官方提供的,我们现在要做的就是接入到我们的项目中。前面的传送门中可以找到ZoomableView
。但毕竟是Fresco
项目的集合体,本片文章的末尾我会提供我已经提取好的相关代码。
实现
我们创建一个界面ZoomableActivity
,至于布局大图浏览自然少不了ViewPager
,这里就不多介绍ViewPager
了,直接上ZoomableActivity
代码
public class ZoomableActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {
private static final String EXTRA_ZOOMABLE_PATHS = "extra_zoomable_paths";
private static final String EXTRA_ZOOMABLE_INDEX = "extra_zoomable_index";
private ViewPager mViewPager;
private TextView mZoomableIndex;
private ArrayList<String> mPaths;
private int mIndex;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.zoommable_activity);
getExtraData();
initView();
setupViewPager();
}
private void getExtraData() {
mPaths = getIntent().getStringArrayListExtra(EXTRA_ZOOMABLE_PATHS);
mIndex = getIntent().getIntExtra(EXTRA_ZOOMABLE_INDEX, 0);
}
private void initView() {
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mZoomableIndex = (TextView) findViewById(R.id.zoomable_index);
}
private void setupViewPager() {
mViewPager.setAdapter(new ZoomableViewPagerAdapter(this, mPaths));
mViewPager.setCurrentItem(mIndex);
mZoomableIndex.setText(mIndex + 1 + "/" + mPaths.size());
mViewPager.addOnPageChangeListener(this);
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mZoomableIndex.setText(position + 1 + "/" + mPaths.size());
}
@Override
public void onPageScrollStateChanged(int state) {
}
public static void goToPage(Context context, ArrayList<String> paths, int index) {
Intent intent = new Intent(context, ZoomableActivity.class);
intent.putStringArrayListExtra(EXTRA_ZOOMABLE_PATHS, paths);
intent.putExtra(EXTRA_ZOOMABLE_INDEX, index);
context.startActivity(intent);
}
}
下面就是Adapter
了,主要就是图片的显示,因为我这里直接是ViewPager
所以使用PagerAdapter
,核心代码就是它的instantiateItem
方法。
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = LayoutInflater.from(mContext).inflate(R.layout.zoomable_view_pager_item, null);
ZoomableDraweeView zoomableDraweeView = (ZoomableDraweeView) view.findViewById(R.id.zoomable_image);
//允许缩放时切换
zoomableDraweeView.setAllowTouchInterceptionWhileZoomed(true);
//长按
zoomableDraweeView.setIsLongpressEnabled(false);
//双击击放大或缩小
zoomableDraweeView.setTapListener(new DoubleTapGestureListener(zoomableDraweeView));
DraweeController draweeController = Fresco.newDraweeControllerBuilder()
.setUri(mPaths.get(position))
.build();
//加载图片
zoomableDraweeView.setController(draweeController);
container.addView(view);
view.requestLayout();
return view;
}
这样就实现了大图浏览的效果,是不是很简单了,我们借助ZoomableView
后,只要实现交互的展示逻辑就Ok了
效果图
项目传送门:https://github.com/idisfkj/Zo...
个人blog:https://idisfkj.github.io/arc...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。