碼上歡樂
相關內容    簡體    繁體

漂亮的圖片選擇器，高性能防崩潰圖片選擇工具

本文轉載自   查看原文   2016-11-18 12:28   1742    防崩潰兼容/ Android開發/ 圖片選擇器/ Android圖片/ 漂亮圖片選擇

實現效果

 
 
 
--------------------------------------------------------------------------------------------------------------------
請在Github下查閱用法(最新更新和用法都在github上第一時間更新)：
--------------------------------------------------------------------------------------------------------------------
 

功能說明

Android-ImagesPickers是一個集圖片選擇（單選/多選）、拍照、裁剪、圖片預覽、圖片顯示容器的圖片選擇顯示工具。使用方便，開發者僅需要幾行的代碼就可以集成Android整套圖片“選裁顯刪”功能，可以通過設置參數選擇自己想要使用的功能，Android-ImagesPickers自身並沒有強制綁定某個圖片加載器（如UIL,Glide,Fresco,Picasso），開發者可以根據自己項目需求給Android-ImagesPickers配置圖片加載器。
 
也許有人會問：系統不是自帶相冊選擇器嗎，為什么還有做一個圖片選擇器呢，有必要嗎？我告訴你很有必要。微信，QQ等等App它們都是自己帶圖片選擇器，並沒有直接調系統的圖片選擇器。為什么要這么做呢？我總結出以下幾點，使用本圖片選擇器下面的問題你都不用考慮，就是這么的任性：
· 最大的問題就是兼容性了，手機廠商那么多，相冊軟件那么多從而引起各種奇葩的問題
· 有些手機拍照圖片倒立情況（如三星和魅族）
· 拿到的bitmap或uri為空
· 非常頻繁出現OOM
· 不支持多選
· 拍照/選擇圖片/裁剪視乎用起來有些麻煩，加上處理一些旋轉、裁剪、壓縮就更加麻煩了，代碼多得不行不行的。
· 系統的圖片選擇UI上與自己APP樣式不統一
· 有些不支持圖片旋轉
· ....
 

Demo展示

下面的Demo圖片按顯示順序：
· 圖片裁剪
· 圖片預覽
· 圖片容器
· 圖片容器帶刪除
· 圖片容器自定義每行數量
   
  
 

如何部署

一：配置Gradle抓取

[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. //目前只上傳到了jcenter,在項目gradle下使用jcenter  
  2. //Currently only uploaded to the jcenter, under the project gradle use jcenter  
  3. allprojects {  
  4.     repositories {  
  5.         jcenter()  
  6.     }  
  7. }  
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. //在module模塊的gradle中添加依賴  
  2. //Add dependencies in the module's gradle  
  3. dependencies {  
  4.     compile 'com.jaikydota.imagespickers:imagespickers:1.0.6'  
  5.   
  6.     //如果使用圖片加載框架，添加依賴，下面用Glide示例  
  7.     compile 'com.github.bumptech.glide:glide:3.6.1'  
  8. }  

二：在 AndroidManifest.xml 中 添加 如下權限

[html]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. <!-- 從sdcard中讀取數據的權限 -->  
  2. <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />  
  3. <!-- 往sdcard中寫入數據的權限 -->  
  4. <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  

三：創建圖片加載器 (其中可以按照 喜好 使用不同的 第三方圖片加載框架 以下為Glide示例)

[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. public class GlideLoader implements ImageLoader {  
  2.   
  3.    @Override  
  4.    public void displayImage(Context context, String path, ImageView imageView) {  
  5.         Glide.with(context)  
  6.                 .load(path)  
  7.                 .placeholder(com.jaiky.imagespickers.R.drawable.global_img_default)  
  8.                 .centerCrop()  
  9.                 .into(imageView);  
  10.     }  
  11.   
  12. }  

四：配置 ImageConfig

UI 視圖配置
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. ImageConfig imageConfig   
  2.     = new ImageConfig.Builder(new GlideLoader())  
  3.     // 修改狀態欄顏色   
  4.     .steepToolBarColor(getResources().getColor(R.color.blue))  
  5.     // 標題的背景顏色   
  6.     .titleBgColor(getResources().getColor(R.color.blue))  
  7.     // 提交按鈕字體的顏色   
  8.     .titleSubmitTextColor(getResources().getColor(R.color.white))  
  9.     // 標題顏色  
  10.     .titleTextColor(getResources().getColor(R.color.white))  
  11.     .build();  
多選
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. ImageConfig imageConfig  
  2.        = new ImageConfig.Builder(new GlideLoader())  
  3.        .steepToolBarColor(getResources().getColor(R.color.blue))  
  4.        .titleBgColor(getResources().getColor(R.color.blue))  
  5.        .titleSubmitTextColor(getResources().getColor(R.color.white))  
  6.        .titleTextColor(getResources().getColor(R.color.white))  
  7.        // 開啟多選   （默認為多選）   
  8.        .mutiSelect()  
  9.        // 多選時的最大數量   （默認 9 張）  
  10.        .mutiSelectMaxSize(9)  
  11.        // 開啟拍照功能 （默認關閉）  
  12.        .showCamera()  
  13.        // 已選擇的圖片路徑  
  14.        .pathList(path)  
  15.        // 拍照后存放的圖片路徑（默認 /temp/picture） （會自動創建）  
  16.        .filePath("/temp/picture")  
  17.        .build();  
  18.   
  19.   
  20. mageSelector.open(MainActivity.this, imageConfig);   // 開啟圖片選擇器  
單選
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. ImageConfig imageConfig  
  2.        = new ImageConfig.Builder(new GlideLoader())  
  3.        .steepToolBarColor(getResources().getColor(R.color.blue))  
  4.        .titleBgColor(getResources().getColor(R.color.blue))  
  5.        .titleSubmitTextColor(getResources().getColor(R.color.white))  
  6.        .titleTextColor(getResources().getColor(R.color.white))  
  7.        // 開啟單選   （默認為多選）   
  8.        .singleSelect()  
  9.        // 開啟拍照功能 （默認關閉）  
  10.        .showCamera()  
  11.        // 拍照后存放的圖片路徑（默認 /temp/picture） （會自動創建）  
  12.        .filePath("/temp/picture")  
  13.        .build();  
  14.   
  15.   
  16. mageSelector.open(MainActivity.this, imageConfig);   // 開啟圖片選擇器  
單選1：1便捷裁剪
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. //配置ImageConfig添加方法  
  2. // (裁剪默認配置：關閉    比例 1：1    輸出分辨率  500*500)  
  3. .crop()    
單選自定義裁剪
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. //配置ImageConfig添加方法  
  2. // (裁剪默認配置：關閉    比例 1：2    輸出分辨率  500*1000)  
  3. .crop(1, 2, 500, 1000)   
設置顯示容器
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. //配置ImageConfig添加方法  
  2. // (設置容器，默認會添加一個子視圖到容器布局，繼承自ViewGroup如Linearlayout  
  3. // 注意容器布局中不要有其他子視圖，可自己對容器布局設置寬度、Margin)  
  4. // 默認每行顯示4個，不帶刪除  
  5. .setContainer(ViewGroup container)   
容器自定義每行顯示數量和是否刪除
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. //配置ImageConfig添加方法  
  2. //參數：1、顯示容器，2、每行顯示數量（建議不要超過8個），是否可刪除(默認不帶刪除)  
  3. .setContainer(linearLayout, 6, true)  
關閉圖片預覽
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. //配置ImageConfig添加方法  
  2. // (關閉圖片預覽功能，默認開啟)  
  3. .closePreview()   

五：在 onActivityResult 中獲取選中的照片路徑 數組 :

[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. @Override  
  2. protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
  3.  super.onActivityResult(requestCode, resultCode, data);  
  4.   if (requestCode == ImageSelector.IMAGE_REQUEST_CODE && resultCode == RESULT_OK && data != null) {  
  5.      // 獲取選中的圖片路徑列表 Get Images Path List  
  6.      List<String> pathList = data.getStringArrayListExtra(ImageSelectorActivity.EXTRA_RESULT);  
  7.   
  8.      for (String path : pathList) {  
  9.          Log.i("ImagePath", path);  
  10.      }  
  11.   }  
  12. }  
代碼示例：
[java]  view plain  copy
 
 在CODE上查看代碼片派生到我的代碼片
  1. public class MainActivity extends AppCompatActivity {  
  2.   
  3.     private Button btn1, btn2;  
  4.     private TextView tv1;  
  5.     private ArrayList<String> path = new ArrayList<>();  
  6.   
  7.     public static final int REQUEST_CODE = 123;  
  8.   
  9.     private ImageConfig imageConfig;  
  10.   
  11.     private LinearLayout llContainer;  
  12.   
  13.     @Override  
  14.     protected void onCreate(Bundle savedInstanceState) {  
  15.         super.onCreate(savedInstanceState);  
  16.         setContentView(R.layout.activity_main);  
  17.   
  18.         btn1 = (Button) findViewById(R.id.btn1);  
  19.         btn2 = (Button) findViewById(R.id.btn2);  
  20.         tv1 = (TextView) findViewById(R.id.tv1);  
  21.         llContainer = (LinearLayout) findViewById(R.id.llContainer);  
  22.         btn1.setOnClickListener(new View.OnClickListener() {  
  23.             @Override  
  24.             public void onClick(View v) {  
  25.                 imageConfig = new ImageConfig.Builder(  
  26.                         new GlideLoader())  
  27.                         .steepToolBarColor(getResources().getColor(R.color.titleBlue))  
  28.                         .titleBgColor(getResources().getColor(R.color.titleBlue))  
  29.                         .titleSubmitTextColor(getResources().getColor(R.color.white))  
  30.                         .titleTextColor(getResources().getColor(R.color.white))  
  31.                         // 開啟單選   （默認為多選）  
  32.                         .singleSelect()  
  33.                         // 裁剪 (只有單選可裁剪)  
  34.                         //.crop()  
  35.                         // 開啟拍照功能 （默認關閉）  
  36.                         .showCamera()  
  37.                         // 設置顯示容器  
  38.                         .setContainer(llContainer)  
  39.                         .requestCode(REQUEST_CODE)  
  40.                         .build();  
  41.                 ImageSelector.open(MainActivity.this, imageConfig);  
  42.             }  
  43.         });  
  44.         btn2.setOnClickListener(new View.OnClickListener() {  
  45.             @Override  
  46.             public void onClick(View v) {  
  47.                 imageConfig = new ImageConfig.Builder(  
  48.                         new GlideLoader())  
  49.                         .steepToolBarColor(getResources().getColor(R.color.titleBlue))  
  50.                         .titleBgColor(getResources().getColor(R.color.titleBlue))  
  51.                         .titleSubmitTextColor(getResources().getColor(R.color.white))  
  52.                         .titleTextColor(getResources().getColor(R.color.white))  
  53.                         // 開啟多選   （默認為多選）  
  54.                         .mutiSelect()  
  55.                         // 多選時的最大數量   （默認 9 張）  
  56.                         .mutiSelectMaxSize(9)  
  57.                         // 設置圖片顯示容器，參數：（1、顯示容器，2、每行顯示數量（建議不要超過8個），是否可刪除）  
  58.                         .setContainer(llContainer, 4, true)  
  59.                         // 已選擇的圖片路徑  
  60.                         .pathList(path)  
  61.                         // 拍照后存放的圖片路徑（默認 /temp/picture）  
  62.                         .filePath("/temp")  
  63.                         // 開啟拍照功能 （默認關閉）  
  64.                         .showCamera()  
  65.                         .requestCode(REQUEST_CODE)  
  66.                         .build();  
  67.                 ImageSelector.open(MainActivity.this, imageConfig);  
  68.             }  
  69.         });  
  70.     }  
  71.   
  72.   
  73.     @Override  
  74.     protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
  75.         super.onActivityResult(requestCode, resultCode, data);  
  76.         if (requestCode == REQUEST_CODE && resultCode == RESULT_OK && data != null) {  
  77.             List<String> pathList = data.getStringArrayListExtra(ImageSelectorActivity.EXTRA_RESULT);  
  78.   
  79.             tv1.setText("");  
  80.             for (String path : pathList) {  
  81.                 tv1.append(path);  
  82.                 tv1.append("\n");  
  83.             }  
  84.   
  85.             path.clear();  
  86.             path.addAll(pathList);  
  87.         }  
  88.     }  
  89. }  
--------------------------------------------------------------------------------------------------------------------
查看及獲取源代碼：
--------------------------------------------------------------------------------------------------------------------


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 GalleryFinal 圖片選擇器的使用 android 圖片選擇器 ios 圖片選擇器 Ios 一個很好用的圖片選擇器 Android圖片選擇器--仿QQ 前端圖片選擇問題 Android開發問題——PictureSelector圖片選擇器不顯示圖片 Android 超高仿微信圖片選擇器 圖片該這么加載 iOS簡易圖片選擇器 (圖片可多選,仿微信) Android開發之高仿微信圖片選擇器
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM