Background
最近在開發中遇到圖片選取的需求,要求從相簿和相機拍照選取圖片,這可以說是非常常規的需求了,在我等待UE出圖的過程中,產品走到我身邊,默默的開啟了微信,露出蜜汁微笑。“這次我們們就不出圖了,就按照微信這個來就行了,有好的、成熟的產品就要借鑑嘛”,然後瀟灑離去...
我還能說什麼,我也開啟了微信,平時在使用的過程中,確實沒有特別在意微信的這個功能,但當自己要開發的時候,就發現,微信之所以有這麼大的使用者量,對於細節的追求確實特別細膩,只是我們在平時使用過程中並不會在意,因為它的設計都合理且完美。話不多說先上圖。
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
好心人順便Star一下,小弟不勝感激,抱拳了,溜了~~~