wink-plugin-image-picker

윙크 서비스의 룩앤필에 맞춰서 cordova-plugin-image-picker의 디자인을 수정한 버전

Installation

cordova plugin add https://github.com/DanbiEduCorp/wink-plugin-image-picker.git --save

추가로 파일업로드와 사진/동영상 촬영을 사용할 경우 아래의 두 플러그인을 설치하셔야 합니다. cordova-plugin-file-transfer cordova-plugin-media-capture

Example

// 이미지 목록 가져오기
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
     );
}

android 추가 library

• 글라이드 : 'com.github.bumptech.glide:glide:3.6.0' 참고 : http://gun0912.tistory.com/17 repository : https://github.com/bumptech/glide

카메라 촬영후 확인/취소 UI 에 대해서

정리된 글 : http://stackoverflow.com/questions/35956635/android-take-camera-picture-intent-remove-confirmation-dialog

• 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 하는 것은 굳이 하려면 가능하긴 하지만, 위험(불안정성)이 따른다.

UI 크기 위치 조정하기

android

• 닫기 버튼 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"

ios

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 아이콘 이미지는 위의 문서를 보고, 각각의 해상도 별로 최적화 하는게 좋을 것 같습니다.