ChatImageBundle

• RoundedCornerShape 가 적용된 카카오톡 묶음 이미지 말풍선을 compose 로 구현
• Development of Kakao Talk Bundle Image with Compose ui RoundedCorner Shape

Overview

• 묶음 이미지에 대하여 모서리에 위치하는 이미지에 대해서만 BIG_RADIUS 적용 그 외의 이미지에 대해서는 SMALL_RADIUS 적용
• 전체 이미리 리스트를 3개씩 묶은 후 나머지 값에 대해서 2개로 묶는 ui 구현
  • 즉 이미지 리스트를 3으로 나눈 나머지가 0이거나 2인 조합을 찾아야 함 (하단 preview 참조)
• 1장 일 경우 -> wrapContent && maxWidth = 250.dp
• 2장, 4장 묶음 일 경우 -> height = 124.dp, width = 250.dp
• 3장, 5~N장 묶음 일 경우 -> height = 80.dp, width = 250.dp

Preview

이미지 갯수	표시 화면
1장
2장
3장
4장
n장

전체 동영상

ImageBundle.mp4

Usage

Step1.Add the JitPack repository to your build file

a. Arctic Fox 이전 버전 (root: build.gradle)

allprojects {
	repositories {
		...
		maven { url 'https://jitpack.io' }
	}
}

a. Arctic Fox 이후 버전 (setting.gradle)

dependencyResolutionManagement { 
	repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
	repositories { 
		...
		maven { url "https://jitpack.io" }
	} 
}

Step2. Add the dependency

• ✔️ Latest Version

dependencies {
	implementation 'com.github.olivia-soy:chat-image-bundle:[Latest Version]'
}

Step3. Use "ImageBundle" Composable

• ✔️ sample source

Description

• UI
  • Compose declarative UI framework
  • Material design
• Tech/Tools
  • Kotlin 100% coverage
  • Jetpack
    • Compose
    • Coil image loader