Android-如何開發(fā)一個(gè)功能強(qiáng)大的圖片選擇器

圖片選擇器是Android開發(fā)中會(huì)經(jīng)常用到的一個(gè)功能,特別對(duì)于社交類的應(yīng)用,比如頭像設(shè)置,比如發(fā)圖片。自然ImagePicker的輪子很多,今天介紹一個(gè)功能強(qiáng)大的輪子SImagePicker

https://github.com/martin90s/ImagePicker

介紹

首先功能強(qiáng)大之處

  • 首先基本的圖片讀取顯示,以及圖片更新監(jiān)控
  • 超大圖片預(yù)覽,比如一張19M,10000*5000px的圖片
  • 圖片的裁剪功能
  • 豐富的可配置項(xiàng),支持拍照選取,選取張數(shù)定義,支持選擇的圖片過濾,
    支持多種圖片加載器(Fresco,Glide等)

廢話不說(shuō),先看效果
第一張頭像模式,第二張選擇多張圖片(包括動(dòng)畫和順暢的跳轉(zhuǎn)),第三張是分片加載超大圖(19.5M,10000*5000px)


頭像模式,支持裁剪
頭像模式,支持裁剪
多選圖片,流暢的頁(yè)面跳轉(zhuǎn)
多選圖片,流暢的頁(yè)面跳轉(zhuǎn)
超大圖預(yù)覽,可以看到漸變加載
超大圖預(yù)覽,可以看到漸變加載

如何使用

1.首先初始化(推薦在Application的oncreate中調(diào)用)

 SImagePicker.init(new PickerConfig.Builder().setAppContext(this)
            .setImageLoader(new FrescoImageLoader())
            .setToolbaseColor(getColor(R.color.colorPrimary))
            .build());

2.在需要選擇圖片的地方調(diào)用

 SImagePicker
            .from(MainActivity.this)
            .maxCount(9)
            .rowCount(3)
            .pickMode(SImagePicker.MODE_IMAGE)
            .fileInterceptor(new SingleFileLimitInterceptor())
            .forResult(REQUEST_CODE_IMAGE);

可配置項(xiàng)

1.全局配置(即初始化時(shí)傳入的PickerConfig,此配置作用于SImagePicker整個(gè)使用過程)

配置參數(shù) 參數(shù)含義
setImageLoader(ImageLoader) 使用的圖片加載器。demo工程中實(shí)現(xiàn)了Fresco和Glide兩種ImageLoader,可以參考
setToolbarColor(int) Picker的主色調(diào),默認(rèn)值是App的primaryColor
setAppContext(Context) Picker內(nèi)部用到的Context,傳入ApplicationContext即可

2.單次配置(即每次調(diào)用SImagePicker時(shí)傳入的參數(shù),此參數(shù)只對(duì)這次調(diào)用生效)

配置參數(shù) 參數(shù)含義
from(Activity or Fragment) 調(diào)用圖片選擇器可從Activity或者Fragment進(jìn)入,最后的結(jié)果會(huì)在onActivityResult()返回,現(xiàn)在返回的結(jié)果有兩個(gè)值,用戶選擇的圖片的路徑列表data.getStringArrayListExtra(PhotoPickerActivity.EXTRA_RESULT_SELECTION);用戶是否選擇了原圖data.getBooleanExtra(PhotoPickerActivity.EXTRA_RESULT_ORIGINAL, false);
maxCount(int) 此次選擇允許的最大選擇數(shù)量,默認(rèn)是1.比如發(fā)朋友圈最多選擇9張圖就傳9
rowCount(int) 圖片列表單排展示多少?gòu)垐D
setSelected(List<String>) 默認(rèn)已經(jīng)被選中的圖片
pickMode(int) 選圖的模式,現(xiàn)在有頭像模式和普通模式兩種,頭像模式選中圖片后默認(rèn)會(huì)跳到圖片裁剪頁(yè)面且默認(rèn)只能選擇一張
cropFilePath(String) 頭像模式下裁剪圖片存放地址
showCamera(boolen) 是否要展示拍照入口
pickText(int) Picker里右下角展示的文字信息(比如配置選擇,發(fā)送,完成)
fileInterceptor(FileChooseInterceptor) 圖片過濾器,比如用戶選擇的單張圖片大小有限制,即可寫在這個(gè)攔截器中,當(dāng)用戶選擇過大圖片時(shí)可以提示并且過濾
forResult(int requestCode) 打開圖片選擇器,并且傳入requestCode

獲取結(jié)果

在調(diào)用圖片選擇器的Fragment或者Activity中

@Override
  protected void onActivityResult(int requestCode, int resultCode, Intent data) {
    super.onActivityResult(requestCode, resultCode, data);
    if (resultCode == Activity.RESULT_OK && requestCode == REQUEST_CODE_IMAGE) {
      final ArrayList<String> pathList =
          data.getStringArrayListExtra(PhotoPickerActivity.EXTRA_RESULT_SELECTION);
      final boolean original =
          data.getBooleanExtra(PhotoPickerActivity.EXTRA_RESULT_ORIGINAL, false);
    }
  }

實(shí)現(xiàn)

圖片數(shù)據(jù)庫(kù)讀取CursorLoader

Android3.0中引入了加載器/裝載器(Loader)的功能,主要用于異步的方式加載數(shù)據(jù)庫(kù)。裝載器Loader的特點(diǎn):

  1. 裝載器提供異步數(shù)據(jù)加載的能力
  2. 裝載器監(jiān)視數(shù)據(jù)資源并且當(dāng)內(nèi)容改變時(shí)發(fā)送新的結(jié)果;
  3. 在配置改變后重建的時(shí)候,裝載器自動(dòng)的重連最后的裝載器游標(biāo),因此,不需要重新查詢數(shù)據(jù)。

此項(xiàng)目也是使用loader去加載和監(jiān)控圖片數(shù)據(jù),對(duì)于Photo和Album即圖片和相冊(cè)分別有一個(gè)loader和一個(gè)controller,loader主要用于加載對(duì)應(yīng)的數(shù)據(jù),controller主要用于數(shù)據(jù)讀取到后的刷新已經(jīng)loader的釋放。
源碼中的對(duì)應(yīng)


WechatIMG90.jpeg
WechatIMG90.jpeg

PhotoLoader初始化

  public static CursorLoader newInstance(Context context, Album album, long minSize) {
    if (album == null || album.isAll()) {
      return new PhotoLoader(context, MediaStore.Images.Media.EXTERNAL_CONTENT_URI, PROJECTION,
          SELECTION_SIZE, new String[] {minSize + ""}, ORDER_BY);
    }
    return new PhotoLoader(context, MediaStore.Images.Media.EXTERNAL_CONTENT_URI, PROJECTION,
        MediaStore.Images.Media.BUCKET_ID + " = ? and (" + SELECTION_SIZE + ")", new String[] {
            album.getId(), minSize + ""}, ORDER_BY);
  }

超大圖片加載

對(duì)于超大的圖片如何展示,這個(gè)是個(gè)比較棘手的問題
比如這張圖http://7xpb9x.com1.z0.glb.clouddn.com/2017/01/20/b578e4755a32ac56a9c4b9a1f7e2822d.jpg
10000*5000的像素,接近20M。

這種圖片肯定無(wú)法一次全部load到內(nèi)存中,可以稍微計(jì)算一下即使是RGB_565的方式全部load進(jìn)內(nèi)存也要占用幾乎90M的內(nèi)存,顯然是不太可能??梢曰仡^看一下第三張demo gif,顯然用戶打開一張圖時(shí),在默認(rèn)情況下,并不要求能看到細(xì)節(jié),當(dāng)用戶點(diǎn)擊某區(qū)域放大時(shí)此時(shí)才會(huì)需要這一塊的清晰圖。那么如何展示這種超大圖的思路基本基本就是

  1. 首先拿到文件路徑,讀取出圖片的寬高,并且根據(jù)屏幕和圖片寬高計(jì)算出一個(gè)展示全圖的情況下的Samplesize,根據(jù)這個(gè)值去加載出一個(gè)全景的圖
  2. 對(duì)圖片進(jìn)行分塊,分塊會(huì)分出不同放大倍數(shù)下(即選擇不同SampleSize)下的一個(gè)塊列表,比如放大2倍時(shí),放大4倍時(shí)對(duì)應(yīng)怎么分塊
  3. 當(dāng)用戶點(diǎn)擊放大某一區(qū)域時(shí),根據(jù)放大的倍數(shù)以及當(dāng)前的中心點(diǎn)選擇對(duì)應(yīng)的塊進(jìn)行l(wèi)oad和渲染

在SImagePicker項(xiàng)目中主要是用了subsamplingImageView
并且根據(jù)picker的需求做了些修改,來(lái)實(shí)現(xiàn)超大圖的預(yù)覽

圖片列表展示

展示

由于使用了cursorLoader,對(duì)于ListView的話有CursorAdapter可以使用,但是對(duì)于RecyclerView確沒有對(duì)應(yīng)的Adapter,所以在源碼中可以看到實(shí)現(xiàn)了一個(gè)RecycleCursorAdapter,用于實(shí)現(xiàn)從cursor獲取數(shù)據(jù)已經(jīng)自動(dòng)刷新。

兼容

為了能夠兼容多個(gè)圖片加載器,SImagePicker抽象了一個(gè)ImageLoader接口用于讓使用者自定義對(duì)應(yīng)的圖片加載器。

使用建議

SImagePicker提供了jitpack上的依賴庫(kù),可以很快的接入業(yè)務(wù)中,但是由于大部分的APP對(duì)于ImagePicker的使用都有各種業(yè)務(wù)需求,且SImagePicker只是抽象出了比較通用的一些配置,用于讓使用者能快速集成,所以此處還是建議使用者盡可能源碼引用的方式的使用SImagePicker,既方便做一些調(diào)試,也可以很快的了解實(shí)現(xiàn)原理,說(shuō)起來(lái)這種UI組件代碼應(yīng)該是很好讀的,因?yàn)楸旧聿⒉粡?fù)雜。

寫一篇技術(shù)文真心累,這個(gè)B實(shí)在是裝不下去了

再次附上github鏈接:

如果覺得還可以,希望輕點(diǎn)一個(gè)star!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容