박상권의 삽질블로그

[안드로이드/Android]유용한 라이브러리 - TedBottomPicker(이미지 선택, Image Picker) 본문

IT/Android-TIP (한글)

[안드로이드/Android]유용한 라이브러리 - TedBottomPicker(이미지 선택, Image Picker)

박상권 2016. 12. 1. 18:09

안드로이드 개발자들이 모여있는 오픈채팅방에 참여해보세요 .
Q&A 및 팁을 공유하는 방입니다..
오픈채팅방 참여



블로그를 Medium으로 옮겨서 운영하고 있습니다.
앞으로 새로운 글은 모두 미디엄 블로그를 통해서 올릴 예정입니다.
미디엄에서 다양하고 유익한 포스팅을 살펴보세요
미디엄 블로그 보기




저는 Google의 Material 디자인을 좋아합니다.

디자인과는 거리가 먼 개발자들에게 정말 많은 도움을 줍니다.

적당한 색상, 적당한 여백, 적당한 크기등등 구글이 연구하고 가지고 있는 노하우를 가이드라인으로 제시해주고 있습니다.





그중에서 Bottom Sheet는 제가 좋아하는 화면방식입니다.


(Popup 방식)                      (BottomSheet 방식)



보통 Popup으로 가운데에 뜨던 방식에서 BottomSheet방식으로 많이 전환하고 있는 추세입니다.

BottomSheet는 Design Support Library 23.2버전이상부터 공식적으로 지원하고 있습니다.





기존에 이미지선택을 위한 TedPicker  라이브러리를 만들었지만 Bottom Sheet를 활용한 이미지 선택 라이브러리를 만들고 싶어졌습니다.






TedBottomPicker


https://github.com/ParkSangGwon/TedBottomPicker


맨 위의 GIF이미지에서도 확인하셨겠지만 라이브러리를 사용하면 아래와 같은 작동방식을 보실 수 있습니다.


        


TedBottomPicker라이브러리는 3가지의 이미지선택방법을 제공합니다.

1. 카메라로 사진 찍기

2. 갤러리에서 사진 선택하기

3. 저장되어있는 최근 사진 XX장중에서 선택하기


사용자에게 이미지를 선택하게 만들때 사용자가 원하는 방식으로 선택할수 있도록 할 수 있습니다.








사용방법


1. gradle 추가

dependencies {

compile 'gun0912.ted:tedbottompicker:1.0.4'

}






2. 권한 허가


사용자가 사진을 찍는 방법을 선택하는 경우 WRITE_EXTERNAL_STORAGE 권한이 필요하게 됩니다.

만약 targetSDK가 22버전 이하라면 Manifest에만 선언해주면 되겠지만, 23버전 이상이라면 동적권한체크도 구현해주어야 합니다.

마시멜로우 이상에서 권한체크와 관련해서는 아래 블로그를 참고하시면 좋습니다.


[IT/Android-TIP (한글)] - [안드로이드]6.0 마시멜로우 권한체크하고 최적화하기

[IT/Android-TIP (한글)] - [안드로이드]유용한 라이브러리 - TedPermission(마시멜로우 권한체크)


직접 권한체크를 하셔도 좋고 라이브러리를 사용하셔도 좋습니다.

어떠한 방법을 사용하셨든 WRITE_EXTERNAL_STORAGE 권한을 사용할 수 있어야 합니다.





3. TedBottomPicker실행


실행 방법은 아래와 같습니다.


TedBottomPicker bottomSheetDialogFragment = new TedBottomPicker.Builder(MainActivity.this)
.setOnImageSelectedListener(new TedBottomPicker.OnImageSelectedListener() {
@Override
public void onImageSelected(Uri uri) {
    // uri 활용
}
})
.create();

bottomSheetDialogFragment.show(getSupportFragmentManager());


show()가 실행되고나서 사용자가 이미지를 선택하게 되면 OnImageSelectedListener 로 들어오게되면서 uri을 넘겨줍니다.

여기서 넘겨받은 uri를 활용해서 원하시는 작업을 해주시면 좋습니다.





4. 커스터마이징



위와같은 기본적인 사용방법 말고도

- BottomSheet가 올라오는 높이를 조정하거나,

- 카메라/갤러리의 기본이미지를 변경하거나,

- 이미지들 사이의 간격을 변경하거나,

- 기타 커스터마이징을 위한 함수들이 제공되고 있습니다.


  • setMaxCount(Int) (default: 25)
  • setPeekHeight(Int)
  • setPeekHeightResId(R.dimen.xxx)
  • showCameraTile(Boolean) (default: true)
  • setCameraTile(R.drawable.xxx or Drawable)
  • setCameraTileBackgroundResId(R.color.xxx)
  • setGalleryTile(R.drawable.xxx or Drawable)
  • showGalleryTile(Boolean) (default: true)
  • setGalleryTileBackgroundResId(R.color.xxx)
  • setSpacing(Int)
  • setSpacingResId(R.dimen.xxx)
  • setOnErrorListener(OnErrorListener)
  • setTitle(String or R.string.xxx) (default: 'Select Image','사진 선택')
  • showTitle(Boolean) (default: true)
  • setTitleBackgroundResId(R.color.xxx)
  • setImageProvider(ImageProvider) : If you want load grid image yourself, you can use your ImageProvider


커스터마이징을 위한 기능들은 추가로 더 늘어날수 있으니 Github의 내용을 참고하시면 좋습니다.


(내용이 유용하셨다면 Github 오른쪽위의 [Star]버튼을 눌러주시면 감사하겠습니다

저에게는 별풍선 주시는 효과가 있어요!)





사용자로부터 이미지를 선택하게하고 가져와야하는경우 TedPicker를 사용하시거나 TedBottomPicker를 사용하셔서 빠르고 좋은앱을 개발하셨으면 좋겠습니다.

2개의 Image Picker라이브러리에서 부족함을 느끼셨다면 Android Arsenal에서 ImagePicker 라이브러리들을 찾아보실 수도 있습니다.

이 라이브러리가 유용하셨다면 Github에서 Star를 주시면 제게 큰 힘이 됩니다.

감사합니다.


Comments