윙크 서비스의 룩앤필에 맞춰서 cordova-plugin-image-picker의 디자인을 수정한 버전
cordova plugin add https://github.com/DanbiEduCorp/wink-plugin-image-picker.git --save
추가로 파일업로드와 사진/동영상 촬영을 사용할 경우 아래의 두 플러그인을 설치하셔야 합니다. cordova-plugin-file-transfer cordova-plugin-media-capture
// 이미지 목록 가져오기
function showImages()
{
var options = { media : 'image' };
window.imagePicker.getPictures(
function(results) {
for (var i = 0; i < results.length; i++) {
if( results[i] === "OPEN_CAMERA" ){
// 카메라 버튼 눌림.
// openCamera();
break;
}
else {
// 여기에 이미지 path 가 넘어옴.
document.querySelector("#selectedImages").innerHTML += results[i] + "\n";
}
}
}, function (error) {},
options
);
}
// 비디오 목록 가져오기
function showVideos()
{
var options = { media : 'video' };
window.imagePicker.getPictures(
function(results) {
for (var i = 0; i < results.length; i++) {
if( results[i] === "OPEN_CAMCORDER" ){
// 캠코더 버튼 눌림.
//openCamcorder();
break;
}
else {
// 여기에 동영상 path 가 넘어온다.
document.querySelector("#selectedImages").innerHTML += results[i] + "\n";
}
}
}, function (error) {},
options
);
}
- 글라이드 : 'com.github.bumptech.glide:glide:3.6.0' 참고 : http://gun0912.tistory.com/17 repository : https://github.com/bumptech/glide
- 8000개 이상의 android device 들이 있는데,, 카메라 열기( ACTION_IMAGE_CAPTURE ) 는 모든 제조사마다 각각 구현되어 있다. 그런데, 확인/취소를 변경하거나 skip 하는 method 는 구현되어 있지 않다. 일부 기기에서는 "android.intent.extra.quickCapture" 속성을 통해, skip 가능하다고 하는데, 삼성폰을 포함한 대부분의 기계에서 지원하지 않는다.
https://developer.android.com/guide/topics/media/camera.html#custom-camera
- 위의 방법을 쓰면, camera를 재정의 해서 촬영후의 UI 를 변경할 수 있지만, 각각의 제조사가 기기에 최적화 해서 만든 카메라 앱을 사용할 수도 없을 뿐더라, 카메라를 새로 만든것에 대한 위험을 감수해야 한다. 결국, 촬영후 UI 를 customize 하는 것은 굳이 하려면 가능하긴 하지만, 위험(불안정성)이 따른다.
- 닫기 버튼 src / android / Library / res / layout / actionbar_discard_button.xml android:layout_width="25dp" android:layout_height="25dp"
- 파일 첨부 버튼 src / android / Library / res / layout / actionbar_done_button.xml android:layout_width="25dp" android:layout_height="28dp"
- 카메라 열기 버튼 src / android / Library / res / layout / activity_image_select.xml android:layout_width="126dp" android:layout_height="126dp"
- 그리드 뷰에서의 체크박스 src / android / Library / res / layout / grid_view_item_image_select.xml src / android / Library / res / layout / grid_view_item_video_select.xml android:layout_height="27dp" android:layout_width="26dp"
- 줌 버튼 src / android / Library / res / layout / grid_view_item_image_select.xml android:layout_width="26dp" android:layout_height="26dp"
- 비디오 정보 버튼 src / android / Library / res / layout / grid_view_item_video_select.xml android:layout_width="14dp" android:layout_height="14dp" android:textSize="12dp"
- 확대뷰에서의 체크박스 src / android / Library / res / layout / activity_image_view.xml src / android / Library / res / layout / activity_video_view.xml android:layout_height="36dp" android:layout_width="36dp"
- 비디오 플레이 버튼 src / android / Library / res / layout / activity_video_view.xml android:layout_height="wrap_content" android:layout_width="wrap_content"
icon 사이즈에 대한 apple 의 가이드라인 https://developer.apple.com/ios/human-interface-guidelines/graphics/custom-icons/
ios용 모든 리소스는 src/ios/Resources 에 들어 있습니다.
아이콘이 원본 크기대로 나오도록 프로그램 되어 있으니, 크기를 바꾸려면 단순히 리소스를 교체해서 해결할 수 있습니다.
그리드뷰의 아이콘은 투명배경에 각각의 이미지를 다음과 같이 조합했습니다. 직접 보시면 금방 알게 될 것입니다.
앱에서 사용하는 문자열은 src/ios/Resources/GMIamgePicker.strings 에 들어 있습니다.
- 기획 페이지에 있는 font는 app 에서 전역으로 지정할 것 같아서, 따로 지정하지 않았습니다.
- 현재는 portrait / landscape 을 지원하지만, 마찬가지로 app 에서 전역으로 지정할 것 같아서, 따로 지정하지 않았습니다.
- https://developer.android.com/guide/practices/screens_support.html?hl=ko 아이콘 이미지는 위의 문서를 보고, 각각의 해상도 별로 최적화 하는게 좋을 것 같습니다.