[안드로이드 프로젝트] 커스텀 갤러리 구현

1. 갤러리 상단 메뉴
2. 갤러리 중앙 메뉴
3. 갤러리 이미지 리스트
4. 갤러리 전체 화면
5. 권한 요청하기
6. 뷰모델 적용하기

 

1. 갤러리 상단 메뉴

@Composable
fun GalleryTitleBar(
    onNext: () -> Unit,                 // next 클릭
    onClose: () -> Unit,                // 닫기 클릭
    isAvailableNext: Boolean = false    // next 활성화 여부
)

 

2. 갤러리 중앙 메뉴

@Composable
fun GalleryMiddleBar(
    folder: String,                 // 폴더명
    onFolder: () -> Unit,           // 폴더 클릭
    isMutipleSelected: Boolean,     // 다중 선택 여부
    onSelectMutiple: () -> Unit,    // 다중 선택 클릭
)

 

3. 갤러리 이미지 리스트

@Composable
fun GalleryGridView(
    list: List<String>,                 // 이미지 리스트
    onClickPicture: (String) -> Unit,   // 이미지 클릭
    selectedList: List<String>,         // 이미지 선택 리스트
    isMutipleSelected: Boolean          // 이미지 다중 선택 여부
)

 

4. 갤러리 전체 화면

@Composable
internal fun GalleryScreen(
    onNext: (List<String>) -> Unit,     // 다음 클릭
    onClose: () -> Unit,                // 닫기 클릭
    list: List<String>,                 // 이미지 리스트
    onSelectFolder: (String) -> Unit,   // 폴더 선택 클릭
    selectedFolder: String,             // 선택 된 폴더명
    isExpand: Boolean,                  // 폴더 리스트 다이얼로그 표시 여부
    onFoler: () -> Unit,                // 폴더 리스트 다이얼로그 클릭
    onDismissRequest: () -> Unit,       // 폴더 리스트 다이얼로그 닫기 이벤트
    folderList: List<String>            // 폴더 리스트
)

 

5. 권한 요청하기

compose 에서 제공하는 권한 라이브러리를 사용하면 쉽게 권한을 요청 할 수 있다.

@OptIn(ExperimentalPermissionsApi::class)
@Composable
fun AskPermission() {
    val request = rememberPermissionState(permission = Manifest.permission.READ_MEDIA_IMAGES)
    Box(Modifier.fillMaxSize()) {
        Column(
            Modifier
                .align(Alignment.Center)
                .padding(start = 8.dp, end = 8.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "갤러리를 이용하기위해선 이미지 사용권한이 필요합니다.")
            Spacer(modifier = Modifier.height(10.dp))
            Button(onClick = {
                request.launchPermissionRequest()
            }) {
                Text(text = "권한요청하기")
            }
        }
    }
}

 

6. 뷰모델 적용하기

data class GalleryUiState(
    val list: List<String> = ArrayList(),       // 이미지 리스트
    val isExpand: Boolean = false,              // 폴더 리스트 다이얼로그 표시 여부
    val selectedFolder: String = "Recent",      // 선택 된 폴더명
    val folderList: List<String> = ArrayList()  // 폴더 리스트
)

@HiltViewModel
class GalleryViewModel @Inject constructor(val mediaContentResolver: MediaContentResolver) :
    ViewModel() {
    
    private val _uiState = MutableStateFlow(GalleryUiState())
    val uiState get() = _uiState.asStateFlow()
    init {
        reLoad()
    }
    // 이미지 폴더 리스트 가져오기
    fun reLoad() {
        Log.d("_GalleryViewModel", "reLoad")
        _uiState.update {
            it.copy(
                list = mediaContentResolver.getPictureList(),
                folderList = mediaContentResolver.getFolderList()
            )
        }
    }
    // 폴더 리스트 다이얼로그 닫기
    fun closeFoldersDialog() { _uiState.update { it.copy(isExpand = false) } }
    // 폴더 리스트 다이얼로그 열기
    fun openFoldersDialog() { _uiState.update { it.copy(isExpand = true) } }
    // 폴더 갱신하기
    fun updateFolder(folder: String) {
        _uiState.update {
            it.copy(
                selectedFolder = folder,
                list = mediaContentResolver.getPictureList(folder)
            )
        }
    }
}

 

github.com/sarang628/InstagramGallery

sarang628/InstagramGallery