기본 콘텐츠로 건너뛰기

안드로이드 앱 만들기 : Jetpack Compose 에서 프로필 이미지 저장해 보기


원본출처: 티스토리 바로가기

이미지 저장 예시

앱을 만들다 보면 프로필 가져오기 기능을 구현해 보는 경우가 간혹 생긴 게 된다. 

 

오늘은 compose을 이용한 구현을 하는 과정에서 

갤러리에서 이미지를 불러와서 프로필 사진으로 저장하는 과정을 구현해 보고자 한다.

 

그림과 같이 구현해 볼 예정이다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

전체 소스의 일부는 아래와 같이 구현이 되었다.

    @Composable     private fun mainContent(padding: Modifier) {                  Column(modifier = Modifier             .fillMaxHeight()             .fillMaxWidth()             .padding(16.dp),             verticalArrangement = Arrangement.Top,             horizontalAlignment = Alignment.Start         ) {             var imageUri by remember {                 mutableStateOf<Uri?>(null)             }             var imageTy by remember {                 mutableStateOf<Boolean>(false)             }             val context = LocalContext.current             val bitmap =  remember {                 mutableStateOf<Bitmap?>(null)             }             val launcher = rememberLauncherForActivityResult(contract =             ActivityResultContracts.GetContent()) { uri: Uri? ->                 imageUri = uri             }              Card(modifier = Modifier                 .fillMaxWidth()                 .height(150.dp)                 .padding(8.dp)                 .border(1.dp, Color.Gray),                 content = {                     Text(getString(R.string.profileImage))                     Row (                         verticalAlignment = Alignment.CenterVertically,                         horizontalArrangement = Arrangement.End                     )                     {                         imageUri?.let {                             if (Build.VERSION.SDK_INT < 28) {                                 bitmap.value = MediaStore.Images                                     .Media.getBitmap(context.contentResolver,it)                             } else {                                 val source = ImageDecoder                                     .createSource(context.contentResolver,it)                                 bitmap.value = ImageDecoder.decodeBitmap(source)                             }                             bitmap.value?.let {  btm ->                                 val baos = ByteArrayOutputStream()                                 btm.compress(                                     Bitmap.CompressFormat.PNG,                                     100,                                     baos                                 )                                 val b: ByteArray = baos.toByteArray()                                 val encoded: String = Base64.encodeToString(b, Base64.DEFAULT)                                 editor.putString("profileImage", encoded)                                 editor.commit()                                 Image(bitmap = btm.asImageBitmap(),                                     contentDescription = "profile",                                     contentScale = ContentScale.Crop,                                     modifier = Modifier                                         .clip(shape = RoundedCornerShape(16.dp))                                         .size(150.dp, 250.dp))                             }                         }                         if (!"".equals(sp.getString("profileImage","")) && !imageTy) {                             var encoded = sp.getString("profileImage","")                             val imageAsBytes: ByteArray =                                 Base64.decode(encoded?.toByteArray(), Base64.DEFAULT)                             var bitMap = BitmapFactory.decodeByteArray(imageAsBytes, 0, imageAsBytes.size)                             Image(bitmap = bitMap.asImageBitmap(),                                 contentDescription = "profile",                                 contentScale = ContentScale.Crop,                                 modifier = Modifier                                     .clip(shape = RoundedCornerShape(16.dp))                                     .size(150.dp, 250.dp))                         }                         Spacer(modifier = Modifier.padding(10.dp))                         IconButton(onClick = {                             imageTy = true                             launcher.launch("image/*")                         }) {                             Icon(imageVector = Icons.Default.PhotoAlbum, contentDescription = "Search Profile", tint = Color.Blue)                         }                     }                 })             Text(getString(R.string.title_translate_ty))             Spacer(modifier = Modifier.padding(10.dp))             Card(modifier = Modifier                 .fillMaxWidth()                 .height(60.dp)                 .padding(8.dp)                 .border(1.dp, Color.Gray),                 content = {                     Row (verticalAlignment = Alignment.CenterVertically)                     {                         if (isTranslate.value) {                             Text(text = getString(R.string.msgAutoTranslate))                         } else {                             Text(text = getString(R.string.msgTranslateNo))                         }                         Switch(checked = isTranslate.value, onCheckedChange = {                             isTranslate.value = it                         })                     }                  })             Spacer(modifier = Modifier.padding(10.dp))             Row (verticalAlignment = Alignment.CenterVertically)             {                 Text(getString(R.string.title_master_language))             }             Spacer(modifier = Modifier.padding(10.dp))             Card(modifier = Modifier                 .fillMaxWidth()                 .height(60.dp)                 .padding(8.dp)                 .border(1.dp, Color.Gray),                 content = {                     if (languages.size > 0) {                         DropdownDemo()                     }                 })         }     }

여기서 살펴 보아야 하는 부분은 다음과 같다.

 

갤러리에 있는 이미지를 불러오는 실행은 launcher을 호출해서 실행을 하고 있고.

launcher.launch("image/*")

 

실행된 결과를 아래와 같은 코드 구현을 통해서 bitmap 이미지를 변환 하여 화면에 Image에 속성을 넣어주고 있는 것을 확인할 수 있었다.

                       imageUri?.let {                             if (Build.VERSION.SDK_INT < 28) {                                 bitmap.value = MediaStore.Images                                     .Media.getBitmap(context.contentResolver,it)                             } else {                                 val source = ImageDecoder                                     .createSource(context.contentResolver,it)                                 bitmap.value = ImageDecoder.decodeBitmap(source)                             }                             bitmap.value?.let {  btm ->                                 val baos = ByteArrayOutputStream()                                 btm.compress(                                     Bitmap.CompressFormat.PNG,                                     100,                                     baos                                 )                                 val b: ByteArray = baos.toByteArray()                                 val encoded: String = Base64.encodeToString(b, Base64.DEFAULT)                                 editor.putString("profileImage", encoded)                                 editor.commit()                                 Image(bitmap = btm.asImageBitmap(),                                     contentDescription = "profile",                                     contentScale = ContentScale.Crop,                                     modifier = Modifier                                         .clip(shape = RoundedCornerShape(16.dp))                                         .size(150.dp, 250.dp))                             }

이런 코드를 Kotlin을 통해서 구현을 한다고 하면 아마 다음과 같은 구현이 될 것 같다. 

 

 

intent을 통해서 갤러리에 있는 이미지를 열어 오는 구현을 하고...

Intent(Intent.ACTION_GET_CONTENT).apply {             type = "image/*"             startActivityForResult(                 Intent.createChooser(this, "Get Album"),                 REQ_SELECT_IMG             )         }

 

onActivityResult을 통해서 받아온 이미지를 처리하는 모양으로 구현이 될 것 같은데...

    override fun onActivityResult(requestCode: Int, resultCode: Int, intent: Intent?) {         super.onActivityResult(requestCode, resultCode, intent)                  if (resultCode == Activity.RESULT_OK) {             when (requestCode) {                 REQ_SELECT_IMG -> {                                         val currentImageUri = intent?.data ?: return //이미지 URL                                          val needAdjust = true                     if (needAdjust) {                         setAdjImgUri(currentImageUri) //방법 2                     } else {                         setImgUri(currentImageUri) //방법 1                     }                 }                         }         }     }

위에서 구현된 코드와 비교를 해 보면 훨씬 간략해졌음을 느끼게 된다. 

 

 

java 코드로 구현된 예시는 아래 링크를 참고해 보면 좋을 것 같다.

https://billcorea.tistory.com/40

 

안드로이드 앱 만들기 갤러리 에서 이미지 받아오기 (자동회전 방지)

앱을 만들다가... 갤러리에서 이미지 받아오는 와서 사용하는 것을 구현하고 있는 중인데... 사진이 돌아간다. 흑~ 그래서 구글링 신에서 질문을 했다... 답... Exif 을 구현해서 사진을 돌리는 코드

billcorea.tistory.com

 

또한 compose에서 구현은 아래 site에서 참고했음을 밝힌다.

https://yjyoon-dev.github.io/android/2022/04/09/android-05/

 

[Android] 서버에 이미지 업로드하기(feat. Android 10, Compose)

Android 10 이상에서 Jetpack Compose를 통해 기기의 이미지를 선택한 뒤 서버에 업로드해보는 과정을 알아보자

yjyoon-dev.github.io

 

귤탐 당도선별 감귤 로열과, 3kg(S~M), 1박스 삼립 호빵 발효미종 단팥, 92g, 14개입 [엉클컴퍼니] 우리밀 찐빵/흑미찐빵/단호박찐빵/고구마찐빵 국산팥, 우리밀 고구마찐빵(20개입) 1300g 국산팥 우리밀 MORIT 여성용 방한장갑 터치스크린 다용도 고급겨울장갑 에이치머스 스마트폰 터치 방한 장갑
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

안드로이드 앱 만들기 : onBackPressed 가 deprecated 되었다니 ?

원본출처: 티스토리 바로가기 onBackPressed 가 deprecated 되었다? 이제 우리는 구글이 제안하는 안드로이드 13에 타기팅하는 앱을 제출 해야만 하는 시기에 도달하고 있습니다.  구글이 새로운 안드로이드 버전을 배포하기 시작하면서 오래된 안드로이드에 대한 게시를 제한 합니다.    그래서 이번에 API 33 인 안드로이드 13에 타겟팅 하는 앱을 작성해 보았습니다. 그러다 만난 몇 가지 사용 제한이 되는 것들에 대한 정리를 해 두고자 합니다.    onBackPressed는 사용자가 뒤로 가기 버튼을 클릭하는 경우 제어를 하기 위해서 사용했던 함수 입니다. MainActivity 에서 최종적으로 뒤로 가기를 클릭 하는 경우 앱을 종료시키는 기능도 사용이 되는 함수였는 데...   안드로이드 13에서는 더 이상 사용할 수 없는 (?)  - 사용은 가능 하나 소스 코드에 중간 줄이 생긴 모양을 보면서 코드를 지속적으로 봐야 합니다.    onBackPressed 어떻게 해소를 하면 될까요?   CallBack을 하나 만들어 봅니다. private val callback = object : OnBackPressedCallback(true) { override fun handleOnBackPressed() { doCloseApps() } } 다른 건 없고 이런 모양으로 callback 함수를 하나 만들어 둡니다.  그러고 onCreate 에서 이 callback 이 호출 되도록 한 줄 넣어 주는 것으로 그 코딩은 마무리 됩니다.    @RequiresApi(Build.VERSION_CODES.TIRAMISU) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(sav...
댓글 쓰기
자세한 내용 보기

개인정보처리방침 안내

 billcoreaTech('https://billcoreatech.blogspot.com/'이하 'https://billcoreatech.blogspot')은(는) 「개인정보 보호법」 제30조에 따라 정보주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다. ○ 이 개인정보처리방침은 2021년 8월 26부터 적용됩니다. 제1조(개인정보의 처리 목적) billcoreaTech('https://billcoreatech.blogspot.com/'이하 'https://billcoreatech.blogspot')은(는) 다음의 목적을 위하여 개인정보를 처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의 용도로는 이용되지 않으며 이용 목적이 변경되는 경우에는 「개인정보 보호법」 제18조에 따라 별도의 동의를 받는 등 필요한 조치를 이행할 예정입니다. 1. 서비스 제공 맞춤서비스 제공을 목적으로 개인정보를 처리합니다. 제2조(개인정보의 처리 및 보유 기간) ① billcoreaTech은(는) 법령에 따른 개인정보 보유·이용기간 또는 정보주체로부터 개인정보를 수집 시에 동의받은 개인정보 보유·이용기간 내에서 개인정보를 처리·보유합니다. ② 각각의 개인정보 처리 및 보유 기간은 다음과 같습니다. 1.<서비스 제공> <서비스 제공>와 관련한 개인정보는 수집.이용에 관한 동의일로부터<사용자의 설정시간>까지 위 이용목적을 위하여 보유.이용됩니다. 보유근거 : 앱의 기본기능 활용에 필요한 위치정보 제3조(개인정보의 제3자 제공) ① billcoreaTech은(는) 개인정보를 제1조(개인정보의 처리 목적)에서 명시한 범위 내에서만 처리하며, 정보주체의 동의, 법률의 특별한 규정 등 「개인정보 보호법」 제17조 및 제18조에 해당하는 경우에만 개인정보를 제3자에게 제공합니다. ② billcoreaTech...
댓글 쓰기
자세한 내용 보기