仿微信圖片選取、相機拍照—PhotoPicker(已整合GalleryView)

cedear發表於2018-06-19

Background

最近在開發中遇到圖片選取的需求,要求從相簿和相機拍照選取圖片,這可以說是非常常規的需求了,在我等待UE出圖的過程中,產品走到我身邊,默默的開啟了微信,露出蜜汁微笑。“這次我們們就不出圖了,就按照微信這個來就行了,有好的、成熟的產品就要借鑑嘛”,然後瀟灑離去...

我還能說什麼,我也開啟了微信,平時在使用的過程中,確實沒有特別在意微信的這個功能,但當自己要開發的時候,就發現,微信之所以有這麼大的使用者量,對於細節的追求確實特別細膩,只是我們在平時使用過程中並不會在意,因為它的設計都合理且完美。話不多說先上圖。

image

image

Tips

其實在準備做任何東西之前,我都會先思考一下整體需要哪方面的技術點,然後再考慮各個技術的可行性。再做這個東西之前,我也是仔仔細細、認認真真的觀察了微信的圖片選取的整個流程,並且給它的一些細節之處也實現了。可以說,在整體上有90%與原型相似吧。至於抄襲人家產品...嗯..."有好的、成熟的產品就要借鑑嘛"。

1 本地圖片的獲取

首先我們要知道,手機上的圖片都是儲存在資料庫裡的,Android系統對外提供了查詢方法,供我們去查詢儲存在資料庫中的圖片

public static final Cursor query(ContentResolver cr, Uri uri, String[] projection, String selection, String[] selectionArgs, String orderBy) {
}
複製程式碼

然後我們操作cursor就可以取出我們想要的圖片了,儲存在我們自定義的model裡供使用。

2 從底部彈出的目錄選擇view實現

其實最開始是想利用BottomSheetDialog這個Material design控制元件來實現了,但是最後發現並不能完美實現現微信這個效果,並且在自己使用的過程中,和通過一些blog的博主介紹,發現這個控制元件還是有一些問題的,所以,為了節約開發成本,控制風險。我將這個view封裝成了一個單獨的控制元件,最後通過動畫來實現彈出、回縮的效果。(以後有時間,要用新控制元件再試一下)

3 全屏預覽(清除狀態列)

因為完全仿照微信來做,所以這個效果也是必須要有的。當單擊圖片時,會將狀態列和縮圖預覽這些東西都隱藏。這裡主要放一下關於狀態列相關的東西。
(1)首先將預覽的Activity的theme設定成NoActionBar的。
(2)在oncreate()方法中設定全屏。 應在setContentView()方法之前。

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
複製程式碼

單擊時展示、隱藏狀態列的方法

private void hideStatusBar(Window window){
    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN |View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}
複製程式碼
private void showStatusBar(Window window){
    window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN;
}
複製程式碼

4 android 7.0 + 相機拍照FileUriExposedException

因為7.0以上的系統不能直接拿到檔案的地址了,要通過Uri來轉換。出現這個問題也非常容易解決,自定義一個Provider去獲取檔案的Uri,這個解決方案一找一大堆,我就不多說了,就是提醒一下。

How to use

(1)相簿選取圖片

                PhotoPicker
                        .getPhotoPicker()
                        .setPhotoSpanCount(4)
                        .setMaxPhotoCounts(9)
                        .setGetPhotoPickerCallBack(new PhotoPicker.OnGetPhotoPickerCallBack() {
                            @Override
                            public void onGetPhotoPickerSuccess(List<PhotoInfo> photoList) {
                            
                            }

                            @Override
                            public void onGetPhotoPickerFail() {

                            }
                        })
                        .startSelectPhoto(MainActivity.this);  
複製程式碼

(2)相機拍攝圖片

                PhotoPicker
                        .getPhotoPicker()
                        .setGetPhotoPickerCallBack(new PhotoPicker.OnGetPhotoPickerCallBack() {
                            @Override
                            public void onGetPhotoPickerSuccess(List<PhotoInfo> photoList) {

                            }

                            @Override
                            public void onGetPhotoPickerFail() {

                            }
                        })
                        .startTakePhoto(MainActivity.this);
複製程式碼

1 獲取PhotoPicker例項

PhotoPicker.getPhotoPicker()
複製程式碼

2 引數設定

setMaxPhotoCounts:限制圖片選取的張數(預設為9)。
setThemeColor: 設定主題色(預設ff6c00)(按鈕的顏色,勾選為圖片,並不生效)
setPhotoSpanCount:圖片在集體瀏覽時的列數(預設4列)
setIsPhotoPreviewWithCamera:設定是否把拍照功能放在圖片預覽的第一個展示,也可單獨呼叫(預設不展示)
setIsMutilSelectType: 設定是否為單選模式(預設多選) setGetPhotoPickerCallBack:獲取圖片的回撥

3 啟動方法

startSelectPhoto(Context context);可以在啟動之前設定各種引數。
startTakePhoto(Context context);不用設定各種引數,直接開啟攝像頭。

Final

這個PhotoPicker目前只經過我的一下簡單測試,可能還會有一些問題,如果在使用過程發現問題,我也會及時修復,以後也會漸漸的豐富這個庫的功能,希望能讓它成為一個圖片處理的一個公共庫。如果有感興趣的小夥伴,請移步到我的gayhub,或掃碼下載apk

image
好心人順便Star一下,小弟不勝感激,抱拳了,溜了~~~

相關文章