Convert Figma logo to code with AI

bm-x logoPhotoView

图片浏览缩放控件

2,628
539
2,628
93

Top Related Projects

18,777

Implementation of ImageView for Android that supports zooming, by various touch gestures.

Customizable Android full screen image viewer for Fresco library supporting "pinch to zoom" and "swipe to dismiss" gestures. Made by Stfalcon

Android library (AAR). Highly configurable, easily extendable deep zoom view for displaying huge images without loss of detail. Perfect for photo galleries, maps, building plans etc.

A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器

Big image viewer supporting pan and zoom, with very little memory usage and full featured image loading choices. Powered by Subsampling Scale Image View, Fresco, Glide, and Picasso. Even with gif and webp support! 🍻

Quick Overview

PhotoView is an Android library that provides a customizable ImageView for photo viewing with zooming and panning capabilities. It offers smooth transitions, gesture support, and integration with various image loading libraries, making it ideal for photo gallery applications and image-centric user interfaces.

Pros

  • Smooth and responsive zooming and panning functionality
  • Easy integration with popular image loading libraries like Glide and Picasso
  • Customizable attributes for tailoring the view to specific app requirements
  • Support for both single and multi-touch gestures

Cons

  • Limited documentation and examples for advanced use cases
  • Potential performance issues with very large images or numerous PhotoViews in a single layout
  • Lack of built-in image loading capabilities, requiring integration with third-party libraries

Code Examples

  1. Basic PhotoView implementation:
<com.github.chrisbanes.photoview.PhotoView
    android:id="@+id/photo_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>
  1. Loading an image into PhotoView using Glide:
import com.bumptech.glide.Glide

val photoView: PhotoView = findViewById(R.id.photo_view)
Glide.with(this)
    .load("https://example.com/image.jpg")
    .into(photoView)
  1. Adding a scale change listener:
photoView.setOnScaleChangeListener { scaleFactor, focusX, focusY ->
    Log.d("PhotoView", "Scale changed to: $scaleFactor")
}
  1. Programmatically zooming to a specific scale:
photoView.setScale(2.5f, true)

Getting Started

To use PhotoView in your Android project, follow these steps:

  1. Add the dependency to your app's build.gradle file:
dependencies {
    implementation 'com.github.chrisbanes:PhotoView:2.3.0'
}
  1. Add the JitPack repository to your project's build.gradle file:
allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}
  1. Use the PhotoView in your layout XML or create it programmatically in your Activity or Fragment.

  2. Load images into the PhotoView using your preferred image loading library.

Competitor Comparisons

18,777

Implementation of ImageView for Android that supports zooming, by various touch gestures.

Pros of PhotoView (Baseflow)

  • Written in Kotlin, offering modern language features and better null safety
  • More recent updates and active maintenance
  • Supports Jetpack Compose for modern Android UI development

Cons of PhotoView (Baseflow)

  • Less comprehensive documentation compared to the bm-x version
  • Fewer stars and forks on GitHub, potentially indicating a smaller community

Code Comparison

PhotoView (bm-x):

PhotoView photoView = (PhotoView) findViewById(R.id.photo_view);
photoView.setImageResource(R.drawable.image);
photoView.setMaximumScale(6);

PhotoView (Baseflow):

val photoView = findViewById<PhotoView>(R.id.photo_view)
photoView.setImageResource(R.drawable.image)
photoView.maximumScale = 6f

Both libraries provide similar functionality for displaying and manipulating images in Android applications. The bm-x version is written in Java and has been around longer, with more stars and forks on GitHub. It offers extensive documentation and examples.

The Baseflow version, being newer and written in Kotlin, provides a more modern approach with potential performance improvements and better integration with recent Android development practices. However, it has a smaller community and less comprehensive documentation.

Choose based on your project's requirements, preferred language, and need for long-term support or cutting-edge features.

Customizable Android full screen image viewer for Fresco library supporting "pinch to zoom" and "swipe to dismiss" gestures. Made by Stfalcon

Pros of FrescoImageViewer

  • Built on top of Fresco library, providing efficient image loading and caching
  • Supports zooming and panning with smooth animations
  • Customizable overlay views for additional information or controls

Cons of FrescoImageViewer

  • Limited to Fresco library, which may not be suitable for all projects
  • Less actively maintained compared to PhotoView
  • Fewer customization options for gestures and transitions

Code Comparison

PhotoView:

PhotoView photoView = findViewById(R.id.photo_view);
photoView.setImageResource(R.drawable.image);
photoView.setScaleType(ImageView.ScaleType.CENTER_CROP);

FrescoImageViewer:

new ImageViewer.Builder<>(this, images)
    .setStartPosition(startPosition)
    .setOverlayView(customView)
    .show();

PhotoView offers a more straightforward implementation for basic image viewing, while FrescoImageViewer provides a builder pattern for configuration and supports multiple images out of the box.

Both libraries offer image viewing capabilities with zooming and panning, but they differ in their approach and underlying technologies. PhotoView is more lightweight and flexible, while FrescoImageViewer leverages the Fresco library for efficient image loading and caching. The choice between the two depends on project requirements and existing dependencies.

Android library (AAR). Highly configurable, easily extendable deep zoom view for displaying huge images without loss of detail. Perfect for photo galleries, maps, building plans etc.

Pros of subsampling-scale-image-view

  • Efficient memory usage for large images through subsampling
  • Supports very large images (up to 20,000x20,000 pixels)
  • Smooth scrolling and zooming performance

Cons of subsampling-scale-image-view

  • Limited animation support compared to PhotoView
  • Lacks some advanced features like rotation gestures
  • May require more initial setup for basic functionality

Code Comparison

PhotoView:

PhotoView photoView = findViewById(R.id.photo_view);
photoView.setImageResource(R.drawable.image);

subsampling-scale-image-view:

SubsamplingScaleImageView imageView = findViewById(R.id.imageView);
imageView.setImage(ImageSource.resource(R.drawable.image));

Both libraries offer easy-to-use image loading, but subsampling-scale-image-view requires an additional step of wrapping the image source.

PhotoView provides a more straightforward API for basic image viewing, while subsampling-scale-image-view offers better performance for large images at the cost of slightly more complex setup.

subsampling-scale-image-view is ideal for applications dealing with high-resolution images or maps, where memory efficiency and smooth scrolling are crucial. PhotoView, on the other hand, might be preferable for simpler image viewing needs with more animation options.

A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器

Pros of imageviewer

  • More recent updates and active development
  • Supports video playback in addition to images
  • Offers a wider range of customization options for UI elements

Cons of imageviewer

  • Larger library size, potentially impacting app performance
  • Less comprehensive documentation compared to PhotoView
  • Steeper learning curve for implementation due to more complex API

Code Comparison

PhotoView:

PhotoView photoView = findViewById(R.id.photo_view);
photoView.setImageResource(R.drawable.image);

imageviewer:

val imageViewer = ImageViewer.Builder(activity, images)
    .setStartPosition(0)
    .setBackgroundColorRes(R.color.black)
    .show()

Summary

PhotoView is a simpler, more lightweight library focused solely on image viewing with pinch-to-zoom functionality. It's easier to implement but offers fewer features.

imageviewer provides a more comprehensive solution with support for both images and videos, along with additional UI customization options. However, it comes with a larger footprint and may require more effort to integrate into projects.

Both libraries serve their purposes well, with PhotoView being ideal for basic image viewing needs and imageviewer better suited for more complex media viewing requirements.

Big image viewer supporting pan and zoom, with very little memory usage and full featured image loading choices. Powered by Subsampling Scale Image View, Fresco, Glide, and Picasso. Even with gif and webp support! 🍻

Pros of BigImageViewer

  • Supports multiple image loading libraries (Fresco, Glide, and custom implementations)
  • Handles very large images efficiently with tiling and subsampling
  • Provides smooth animations for transitions and gestures

Cons of BigImageViewer

  • More complex setup and configuration compared to PhotoView
  • Larger library size due to additional features and dependencies
  • May have a steeper learning curve for basic use cases

Code Comparison

PhotoView:

PhotoView photoView = findViewById(R.id.photo_view);
Glide.with(this).load(imageUrl).into(photoView);

BigImageViewer:

BigImageView bigImageView = findViewById(R.id.big_image_view);
BigImageViewer.initialize(FrescoImageLoader.with(this));
bigImageView.showImage(Uri.parse(imageUrl));

Summary

PhotoView is simpler to implement and suitable for basic image viewing needs, while BigImageViewer offers more advanced features and flexibility for handling large images and complex scenarios. PhotoView has a smaller footprint and easier integration, but BigImageViewer provides better performance for very large images and supports multiple image loading libraries.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

PhotoView 图片浏览缩放控件

一个流畅的photoview

效果图

PhotoView PhotoView

注意

由于facebook的Fresco图片加载组件所加载出来的drawable图片并非真实的drawable,无法直接获取图片真实宽高,也无法直接响应ImageMatrix的变换, 且根据Fresco文档的介绍,在后续的版本中,DraweeView会直接继承自View,所有暂不考虑支持Fresco。 对于其他第三方图片加载库如Glide,ImageLoader,xUtils都是支持的

使用

1.Gradle添加依赖 (推荐)

dependencies {
    compile 'com.bm.photoview:library:1.4.1'
}

(或者也可以将项目下载下来,将Info.java和PhotoView.java两个文件拷贝到你的项目中,不推荐)

2.xml添加

 <com.bm.library.PhotoView
     android:id="@+id/img"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:scaleType="centerInside"
     android:src="@drawable/bitmap1" />

3.java代码

PhotoView photoView = (PhotoView) findViewById(R.id.img);
// 启用图片缩放功能
photoView.enable();
// 禁用图片缩放功能 (默认为禁用,会跟普通的ImageView一样,缩放功能需手动调用enable()启用)
photoView.disenable();
// 获取图片信息
Info info = photoView.getInfo();
// 从普通的ImageView中获取Info
Info info = PhotoView.getImageViewInfo(ImageView);
// 从一张图片信息变化到现在的图片,用于图片点击后放大浏览,具体使用可以参照demo的使用
photoView.animaFrom(info);
// 从现在的图片变化到所给定的图片信息,用于图片放大后点击缩小到原来的位置,具体使用可以参照demo的使用
photoView.animaTo(info,new Runnable() {
       @Override
       public void run() {
           //动画完成监听
       }
   });
// 获取/设置 动画持续时间
photoView.setAnimaDuring(int during);
int d = photoView.getAnimaDuring();
// 获取/设置 最大缩放倍数
photoView.setMaxScale(float maxScale);
float maxScale = photoView.getMaxScale();
// 设置动画的插入器
photoView.setInterpolator(Interpolator interpolator);

关于

若遇到使用上的问题,请先翻看Issues,大部分问题是已经有人提出过的。(如#9,#5)
若没找到相关的问题,可以先在Issues中提出,这样以便其他人遇到同样问题时可快速找到答案。
若长时间未回复,可邮件给我bmme@vip.qq.com

版本

v1.4.0

  • 增加对普通ImageView的支持,可通过PhotoView的静态方法getImageViewInfo(ImageView)从一个普通的ImageView中获取Info,参照ImageViewActivity
  • 添加长按事件的监听,setOnLongClickListener()
  • 提高图片缩放到屏幕边缘的情况下滑动的流畅性
  • 新增get/setAnimaDuring() get/setMaxScale 获取设置动画的持续时间和图片最大缩放倍数
  • 通过setInterpolator可设置动画插入器

v1.3.6

  • 增加图片的旋转功能
  • 版本号命名改变

v2.0.7

  • 宽高属性可以设置为wrap_content,添加对adjustViewBounds属性的支持
  • 修复某些情况下会闪动
  • 增加对ScaleType.FIT_START,FIT_END对animaFrom的支持

v2.0.0

  • 添加animaTo,animaFrom方法,支持图片点击放大缩小浏览功能
  • 添加enable()和disenable() 打开和关闭触摸缩放方法,默认打开 (当普通ImageView使用的时候建议关闭触摸缩放功能)
  • 支持所有ScaleType属性

v1.0