1. 程式人生 > >仿微信朋友圈檢視圖片下拽返回。整合輕鬆,效果超讚~

仿微信朋友圈檢視圖片下拽返回。整合輕鬆,效果超讚~

ImageWatcher

大圖檢視,它能夠

  • 動畫順暢切換到檢視狀態,同樣動畫順暢退出檢視介面
  • 左右滑動多圖檢視
  • 仿微信下拽退出

image image image image

對比之前1.0.3,

  • 修復-寬高計算錯誤導致起始圖片位置顯示錯誤。
  • 優化-取消了無意義的旋轉,提示下拽體驗(放大且圖片已顯示頂端時亦可下拽)。
  • 優化-支援顯示本地圖片。
  • 新增-支援長圖顯示(beta)。 使用的網路圖片,被遮蔽了請自己換地址,或提醒我。
  • 新增-自定義loadingUI
  • 新增-自定義indexUI

整合

Add it in your root build.gradle at the end of repositories:

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

Add the dependency

dependencies {
    implementation 'com.github.iielse:ImageWatcher:1.1.0'
}

初始化API簡介

name description
*setLoader *圖片地址載入的實現者
setTranslucentStatus 當沒有使用透明狀態列,傳入狀態列的高度
setErrorImageRes 圖片載入失敗時顯示的樣子
setOnPictureLongPressListener 長按回調
setIndexProvider 自定義頁碼UI
setLoadingUIProvider 自定義載入UI
setOnStateChangedListener 開始顯示和退出顯示時的回撥

專案地址

初始化配置

Activity.onCreate()

vImageWatcher = ImageWatcherHelper.with(this) // 一般來講,ImageWatcher尺寸佔據全屏
    .setLoader(new GlideImageWatcherLoader()) // demo中有簡單實現
    .setIndexProvider(new DotIndexProvider()) // 自定義
    .create();

Activity.onBackPressed()

if (!vImageWatcher.handleBackPressed()) {
    super.onBackPressed();
}

使用

ImageView clickedImage = 被點選的ImageView;
SparseArray<ImageView> mapping = new SparseArray<>(); // 這個請自行理解,
mapping.put(0, clickedImage);
List<Uri> dataList = 被顯示的圖片們;

vImageWatcher.show(clickedImage, mapping, dataList);

相關推薦

仿朋友檢視圖片返回整合輕鬆效果~

ImageWatcher 大圖檢視,它能夠 動畫順暢切換到檢視狀態,同樣動畫順暢退出檢視介面 左右滑動多圖檢視 仿微信下拽退出     對比之前1.0.3, 修復-寬高計算錯誤導致起

Android 修改源碼自定義SwipeRefreshLayout樣式——高仿朋友拉刷新

樣式 post and 微信 修改 size roi 自定義 details 修改源碼自定義SwipeRefreshLayout樣式——高仿微信朋友圈下拉刷新Android 修改源碼自定義SwipeRefreshLayout樣式——高仿微信朋友圈下拉

Luban(魯班) —— Android圖片壓縮工具仿朋友壓縮策略

專案描述 目前做App開發總繞不開圖片這個元素。但是隨著手機拍照解析度的提升,圖片的壓縮成為一個很重要的問題。單純對圖片進行裁切,壓縮已經有很多文章介紹。但是裁切成多少,壓縮成多少卻很難控制好,裁切過頭圖片太小,質量壓縮過頭則顯示效果太差。 於是自然想到App巨頭“微信”會是怎麼處理,

Android仿朋友九宮格圖片展示自定義控制元件支援縮放動畫~

一直對微信朋友圈九宮格圖片顯示控制元件比較好奇,找到一篇介紹相關騷操作的部落格 部落格雖好但是不夠完美,缺少點選圖片預覽頁面和縮放動畫,作為一個不斷追求完美主義的人,我想把這個控制元件結合到專案中而不是單純作為一個控制元件。 下面是我的實現效果圖: (

Android仿朋友高清圖檢視控制元件可縮放、雙擊、移動

該庫支援和包含的功能: 1.圖片支援手勢操作, 可縮放、雙擊、移動 2.圖片載入時的進度條, 支援自定義 該庫的效果圖如下: 本地相簿圖片效果圖: 點選預覽大圖的效果 本想直接新增gradle依賴庫,不巧的是,之前版本已作廢,待現在版本穩定後,

仿朋友圖片點選放大效果

這兩天寫了個小專案,其中用到了點選一組圖片中的一張可以檢視它的放大版,用手向左滑動能看到下一張的這組圖片中的第二張的放大版。。。依次類推,單擊放大版的圖片實現關閉效果,對於js能力不太好的我只能找度娘,然後就發現了photoswiper.js,不得不說真的好用,

安卓專案實戰之仿朋友的九宮格自定義控制元件

效果圖 圖片展示形式 1、當只有1張圖時,可以自己定製圖片寬高,也可以使用預設九宮格的寬高; 2、當只有4張圖時,以2*2的方式顯示; 3、除以上兩種情況下,都是按照3列方式顯示,但這時有一些細節: a、如果只有9張圖,當然是以3*3的方式顯示;

仿朋友圖冊瀏覽及其擴充套件

書到用時方恨少 我很笨,歷時3天半,才把這個圖冊瀏覽的外掛搞定了。很感謝前輩寫完的外掛,不然我弄一個月也弄不出來。 功能點: 1、PC端的圖片要類似ppt,有放大但不失真功能(放大有了,圖片太小肯定會失真),可點選圖片和鍵盤控制翻頁; 2、移動端支援縮放、滑動,左右控制翻頁;

仿朋友【九宮格的實現】

最近有個想法,想用環信的sdk去做個社交類的小demo玩。在此之前,先來模仿下微信的朋友圈九宮格效果。同時也相容了QQ的做法,如果資料集大於九張時,就在最後一張圖片上顯示一層遮罩效果,並顯示剩餘圖片的數量。之後的計劃是仿微信的朋友圈評論、回覆這方面的效果,在實際

仿朋友預覽功能

話不多說,先上圖主要功能就是如圖中所示,點選圖片放大,拖拽圖片縮小到列表中圖片位置處消失。這個功能其實原理是這樣的(我猜):首先點選列表中的圖片跳轉到新的Acticity進行預覽,當然這個Activity必須是透明的;跳轉的時候需要將列表圖片的螢幕位置和寬高傳遞到新Activ

Android仿朋友10s視訊編輯

以前遇到一個需求就是要做一個類似微信朋友圈10s視訊上傳的功能,因此就需要視訊裁剪與壓縮,需要做一個類似微信朋友圈視訊編輯的頁面,就需要將視訊按照時間一秒一秒解碼成一幅幅的圖片,讓使用者滑動選擇。之前在網上找到了一個類似專案用的 MediaMetadat

Android 仿朋友 Textview 全文 收起展示

先看效果圖:適用listview recycleview 滑動流暢,無BUG上程式碼,直接寫在adapter裡private final int MAX_LINE_COUNT = 3;//最大顯示行數

自定義控制元件 仿朋友文字展開全文功能

自定義TextView仿微信朋友圈文字資訊,展開全文功能 程式碼及註釋如下: 首先寫一個xml檔案 showmore.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout x

仿朋友回覆資訊-點選空白處軟鍵盤以及回覆佈局消失

開啟微信朋友圈,點選回覆按鈕,會立馬跳出一個回覆欄和一個軟鍵盤,點選其他空白處這2個又消失了。這種功能我們怎麼實現呢? 類似下面這種功能,由於用的是夜神模擬器,沒有軟鍵盤,大家可以自行腦補,或者去自己的朋友圈看看效果。 思路是這樣的:點選這個回覆狀態列以外的其他區域,讓這

Android實現仿朋友釋出動態(拍照、相簿選擇、照片壓縮、顯示、儲存、縮圖、點選縮圖刪除對應檔案等)附原始碼

         原創作品,轉載請註明出處:http://blog.csdn.net/zhang3776813/article/details/52092591 最近專案需求中要用到類似微信朋友圈釋出動態選擇圖片的UI效果,研究了一下,特來分享成果,多的不說來看程式碼。

iOS:仿朋友程式碼

仿WeChat朋友圈的介面效果,程式碼整潔易讀,靜態頁面,無網路互動。裡面的功能並沒有全部完善,可以根據自己的需求去補充一下。 程式碼結構 每個類檔案中都有詳細的備註和註釋,模組劃分和流程都還蠻清晰的,這裡就不贅述了,讀程式碼更直接一些。 檢視結構 Cell的

iOS轉場動畫之朋友圖片檢視

前言 什麼是轉場動畫呢?顧名思義,就是切換介面所用的動畫效果。本文主要介紹的是modal的效果。當我們使用modal的時候,只需要使用 presentViewController:animated:completion 和 dismissViewControl

移動web HTML5使用photoswipe模仿朋友圖片放大瀏覽

默認 html5 ace 模仿 響應式 觸摸手勢 朋友圈 int 放大 http://www.cnblogs.com/theroad/p/5397229.html 使用js框架是PhotoSwipe。 PhotoSwipe是一個圖片放大插件,兼容pc和移動端,經歷過多個版本

HTML5仿聊天界面、朋友實例

很好 order 分享圖片 ext mount case 天使 inf 仿微信 這幾天使用H5開發了一個仿微信聊天前端界面,尤其微信底部編輯器那塊處理的很好,使用HTML5來開發,雖說功能效果並沒有微信那麽全,但是也相當不錯了,可以發送消息、表情,發送的消息自動回滾定位到底

CSS——朋友圖片樣式實現方法

spl absolut position url head density pad OS use <!DOCTYPE html> <html lang="en"> <head> <meta ch