Giter VIP home page Giter VIP logo

mikaelzero / mojito Goto Github PK

View Code? Open in Web Editor NEW
1.5K 18.0 164.0 7.23 MB

微信、bilibili大图、长图、gif、视频、自定义view的转场效果,The transition effect of wechat, bilibili large image, long image, GIF, video and custom view

License: Apache License 2.0

Java 86.63% Kotlin 13.37%
drag dragimageview dragvideo video photoview transformer android gif longimage bigimageviewer

mojito's Introduction

mojito Language Language

English

由于工作繁忙,关于该项目,暂时不做维护,如果有大佬想要完善,非常提倡大佬们能够提pull requests,有时间我会进行合并;该项目整体的架构设计还算ok,各位需要想要进行开发或者拓展也是非常方便的。

功能列表

  • 支持Coil图片加载器
  • 支持Glide图片加载器
  • 支持Fresco图片加载器
  • 支持视频图片混合、GIF、图片预览
  • 支持拖拽关闭
  • 支持自定义页面索引指示器、进度条、Cover
  • 支持原图加载策略

二维码下载体验

通过视频查看效果

SAMPLE VIDEO LINK

动图效果

开始


添加 dependencies

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
    }
}

implementation "com.github.mikaelzero.mojito:mojito:$mojito_version"
//support long image and gif with Sketch
implementation "com.github.mikaelzero.mojito:SketchImageViewLoader:$mojito_version"

//load with coil
implementation "com.github.mikaelzero.mojito:coilimageloader:$mojito_version"
//load with glide
implementation "com.github.mikaelzero.mojito:GlideImageLoader:$mojito_version"
//load with fresco
implementation "com.github.mikaelzero.mojito:FrescoImageLoader:$mojito_version"

初始化

// in your application
Mojito.initialize(
    GlideImageLoader.with(this),
    SketchImageLoadFactory()
)

//or

//YourMojitoConfig:IMojitoConfig
Mojito.initialize(
    GlideImageLoader.with(this),
    SketchImageLoadFactory(),
    YourMojitoConfig()
)

开始使用

Mojito.with(context)
    .urls(SourceUtil.getSingleImage())
    .views(singleIv)
    .start()

使用

RecyclerView

binding.recyclerView.mojito(R.id.srcImageView) {
    urls(SourceUtil.getNormalImages())
    position(position)
    mojitoListener(
        onClick = { view, x, y, pos ->
            Toast.makeText(context, "tap click", Toast.LENGTH_SHORT).show()
        }
    )
    progressLoader {
        DefaultPercentProgress()
    }
    setIndicator(NumIndicator())
}

单个 View

binding.longHorIv.mojito(SourceUtil.getLongHorImage())

无 View

 Mojito.start(context) {
    urls(SourceUtil.getNormalImages())
}

视频 View or 视频/图片 混合View

Mojito.start(context) {
    urls(SourceUtil.getVideoImages(), SourceUtil.getVideoTargetImages())
    setMultiTargetEnableLoader(object : MultiTargetEnableLoader {
        override fun providerEnable(position: Int): Boolean {
            return position != 1
        }
    })
    setMultiContentLoader(object : MultiContentLoader {
        override fun providerLoader(position: Int): ImageViewLoadFactory {
            return if (position == 1) {
                ArtLoadFactory()
            } else {
                SketchImageLoadFactory()
            }
        }
    })
    position(position)
    views(recyclerView, R.id.srcImageView)
}

Callback回调

 abstract class SimpleMojitoViewCallback : OnMojitoListener {
    // image click
    override fun onClick(view: View, x: Float, y: Float, position: Int) {

    }

    //image long press
    override fun onLongClick(fragmentActivity: FragmentActivity?, view: View, x: Float, y: Float, position: Int) {
    }

    //end of min image to max image 
    override fun onShowFinish(mojitoView: MojitoView, showImmediately: Boolean) {
    }

    //activity finish,backToMin,single click
    override fun onMojitoViewFinish() {
    }

    //when you drag your image 
    override fun onDrag(view: MojitoView, moveX: Float, moveY: Float) {
    }

    //the ratio of long image when you scroll
    override fun onLongImageMove(ratio: Float) {
    }
}

API

Name desc
url(src,target) 设置缩略图和原图url数据
position 点击的位置
views 1. recylclerView,imageViewId
2. single view
3. multi views
autoLoadTarget 默认为true,如果你设置了原图的url并且设置了autoLoadTarget(false)
你需要使用setFragmentCoverLoader来自定义view
setProgressLoader 当你设置了 autoLoadTarget false 才会生效
setIndicator 可以选择 NumIndicator 或者 CircleIndexIndicator
setActivityCoverLoader 自定义Activity的覆盖层view
setMultiContentLoader 如果使用视频和图片混合模式,需要设置 ImageViewLoadFactory

Thanks

sketch

BigImageViewer

mojito's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mojito's Issues

正方形图片问题

DragDiootoView 当走到310行代码时,会出现手动关闭滑动大图动画位置和大小不对的情况,下面GIF中的第一张放大的图
1

放大缩小

在图片放大的时候,还原原图大小是哪个方法,另外可以做旋转么?

After proguard, compilation passed, but an IllegalStateException reported when init

I init mojito in my custom Application,so the IllegalStateException came when the app started

Caused by: java.lang.IllegalStateException: OkHttpClient::class.java.`package` must not be null
  at sW1.<clinit>(AndroidLog.kt:3)
  at pW1.<clinit>(Platform.kt:2) 
  at WT1.<init>(OkHttpClient.kt:73) 

And I guess the reason is that mojito-1.1.0 relies on a version of okhttp package with this bug--Okhttp3 4.7.2
I solved this problem by relying on the new fixed version--Okhttp3 4.8.1

Here is my solution code:

    //Glide
    implementation ('com.github.bumptech.glide:glide:4.11.0')
    annotationProcessor 'com.github.bumptech.glide:compiler:4.11.0'
    implementation ('com.github.bumptech.glide:okhttp3-integration:4.11.0'){
        exclude group: 'com.squareup.okhttp3', module: 'okhttp'
    }
    //mojito
    implementation 'net.mikaelzero.mojito:core:1.1.0'
    implementation 'net.mikaelzero.mojito:SketchImageFactory:1.1.0'
    implementation ('net.mikaelzero.mojito:GlideImageLoader:1.1.0'){
        exclude group: 'com.squareup.okhttp3', module: 'okhttp'
        exclude group: 'com.github.bumptech.glide', module: 'okhttp3-integration'
    }
     //Okhttp3
    implementation("com.squareup.okhttp3:okhttp:4.8.1")

bugly报了这个错

java.lang.NullPointerException

Attempt to invoke virtual method 'void net.moyokoo.diooto.DragDiootoView.backToMin()' on a null object reference

fatal

Fatal signal 11 (SIGSEGV), code 1, fault addr 0x7f8d62f010 in tid 15807 (ImageRegionDeco)
多次打开关闭长图崩溃,设备:vivo y33, android 5.0

长图滑动监听

作者您好,有没有长图在滑动时候的监听,就是类似Bilibili滑动长图的时候会隐藏一些文字之类的信息

带头尾的布局把头尾都算进去了

发现貌似不兼容带头尾的布局的recyclerview,也存在偶发性的图片崩溃,
image
刚开始接入的时候会有这个问题,后来情况就少了,不知道为啥.

显示图片会闪一下

之前设置了drawable,然后去加载网络图片,加载完成之后,界面会闪一下,如果这张网络图片已经加载过一次,就不会闪一下。

打包正式版出现SIGSEGV(SEGV_MAPERR)

1543909033 1
1543909065
1543909116 1

debug运行所有机型没有问题,打包成release版本后,部分机型(VIVO Y67L),点击展示大图(或者左右滑动)会闪退。将展示大图的代码注释后用dialog展示没有问题。表示很无力。。。

这个好像和StaggeredGridLayoutManager有冲突

这个控件真的是屌,但是好像和StaggeredGridLayoutManager有冲突 如果用瀑布流的布局 就记录不了位置 返回的时候 mOriginTop全是0 而且如果用瀑布流的话 在加载fragment的时候 如果还用contentViewOriginModels.size 会越界 其他的我都不在意 我只想问问大佬 怎么在使用瀑布流的时候 正确记录位置 我已经研究好几天了 还没找到解决方法

打正式包报错

集成的1.23版本,文档上写的不需要依赖sketch,但是点击会崩溃,依赖上sketch就正常了,就相当于要集成这个功能我需要添加两个依赖:implementation 'com.github.moyokoo:Diooto:1.23'
implementation 'me.panpf:sketch:2.6.2-b1',但这样打Release包就会报:生成签名apk/bundle时任务‘:app:transformClassesAndResourcesWithR8ForRelease’执行失败

非常棒的项目~

看了下作者写的DragDiootoView 里面代码逻辑都很清晰。
在过渡到最小化的时候最后一帧的效果有点生硬,没有完整的复合到原来图片的位置上。
也看了好几个其他项目都不太完整。
有个小建议~~
如果把缩小的动作加上alpha的过渡 不用强行复合原来的位置 像微博效果妥协也不错。
现在就发现共享元素的过渡效果才有完美的复合动画。

大图显示效果根据传进去的views(imageviews)决定

当imageview的宽度为wrap_content的时候 大图显示正确 长宽按原图比例显示 但是会导致原图因为wrap 造成宽度显示不全(比如宽度高度都为100dp ,显示的是一个长方形图片,宽度会显示不全)

当imageview的宽度为match的时候 ,小图显示正确 ,但是大图显示会局限在一个正方形区域里,导致原图是长方形的话 ,大图图片高度显示不全

目前需求 小图为正方形区域显示 , 大图原图比例显示 ,上面两个宽度的设置都会有一方不满足

No field loadingLayout

java.lang.NoSuchFieldError: No field loadingLayout of type I in class Lnet/moyokoo/dio/R$id; or its superclasses (declaration of 'net.moyokoo.dio.R$id' appears in /data/app/b.com.module_image-1/base.apk)
image
image

显示表情包小图的问题

表情包的小图尺寸较小,放大后就非常模糊,如下:

模糊

正常应该这样显示:

正常

如果直接在代码里将ScaleType.FIT_CENTER改成ScaleType.CENTER_INSIDE的话,动画执行完毕会突然从大图变成小图,体验不好,我应该怎么做呢?

`

override fun loadAnimFinish() {
    if (isLongHeightImage || isLongWidthImage) {
    } else {
        sketchImageView.scaleType = ImageView.ScaleType.CENTER_INSIDE
    }
}

`

这是表情图片地址:图片

依赖问题

大佬,我依赖这个implementation 'net.mikaelzero.mojito:GlideImageLoader:1.1.0'
依赖报错
Failed to resolve: net.mikaelzero.mojito:GlideImageLoader:1.1.0
Show in Project Structure dialog
Affected Modules: app
项目是java代码,不是Kotlin

有些不需要的权限建议移除

可以移除的权限:

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

SDK 里面的所有权限:

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.RECEIVE_USER_PRESENT" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.VIBRATE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

图片放大问题

多张图片列表中,点开单张图片,手势放大图片发现布局的宽高已经定死,不能放大为全屏显示图片,只能在初始进入的图片大小范围内放大。

不使用RecycleView的时候使用指示器无效

noViewBtn.setOnClickListener {
Mojito.with(context)
.urls(SourceUtil.getSingleImage())
.setIndicator(NumIndicator()) //不使用RecycleView的时候使用指示器无效
.start()
}
noViewViewPagerBtn.setOnClickListener {
Mojito.with(context)
.urls(SourceUtil.getNormalImages())
.setIndicator(NumIndicator())
.start()
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.