12.10 Android ChatApp(1) ChatBubble

회사에서 요즘 일을 계속 주고 답답해서 술먹고 하다보니.. 시간이 너무 갔다 ㅠㅠ 다시 취미생활을 시작하기러 함.

 

채팅방에 파이어 베이스를 사용하다보니. 혹시! 나중에 Read수 Write수로 돈이 많이 나갈까봐 

FirebaseMessagingService를 통해서 FCM Data를 이용해서 채팅을 구현해보고자 테스트 앱을 시작했음..

 

그런데 FCM이 느리게 도착하는 경우가 허다해서 이걸 사용해서 앱을 만들어도 되는가 고민된다.. 실시간으로 채팅을 해야하는 채팅어플의 경우에는 좀 큰 단점인거 같은데...

 

차선택으로 직접 새로운 Service를 만들고, Service에서 실시간으로 채팅을 받아오도록 Snapshot을 붙이고 이걸 통해서 Notificiation 을 만드는게 더 유리할까?? (이러면 Listener관리가 귀찮을 거 같은데...)

 

 

일단 FCM으로 만들어 보고 생각해보자

 

GitHub : https://github.com/yoonswonjoon/fcmwithroomdb

 

오늘은 Shape를 사용해 볼건데

Surface는 Material Design에 정의되어있는 Composable으로,

Material Design의 취지에 맞게 보다 쉽게 UI를 구성할 수 있다. 

StackOverFlow에 좋은 답변이 있다

: https://stackoverflow.com/questions/65918835/when-should-i-use-android-jetpack-compose-surface-composable

 

간단하게 채팅 버블을 만들어 보자!

val myBubbleColor = Color(0xFF00BCD4)
val othersBubbleColor = Color(0xFF8BC34A)

@Composable
fun ChatBubble(
    mine : Boolean,
    first : Boolean,
    msg : String,
    img : Uri? = null,
    onClick : () -> Unit,
){
    val bubbleShape =
        if(!first) RoundedCornerShape(10.dp)
        else if(mine) RoundedCornerShape(10.dp,0.dp,10.dp,10.dp)
        else RoundedCornerShape(0.dp,10.dp,10.dp,10.dp)
    val bubbleColor = if (mine) myBubbleColor else othersBubbleColor
    Surface(
        shape = bubbleShape,
        color = bubbleColor,
    ) {
        Box(modifier= Modifier
            .clickable { onClick() }
            .padding(5.dp)) {
            Text(text = msg)
        }
    }
}

이렇게 만든 것을 확인해보면

chatBubble

위의 모양의 채팅 버블을 아주 쉽게 구현할 수 있다.

 

자 그럼 조금 더 채팅같은 모양으로 꾸며보자!

우선 간단한 채팅 Data Class를 만들고.

data class MsgTest(
    val nickName : String,
    val time : String,
    val cnt : Int,
    val msg : String
)

UI로직을 생각해서 좀 더 꾸며보자면

@Composable
fun ChatMetadataPresenter(
    msgData: MsgTest,
    timeShow : Boolean
){
    Column() {
        if (msgData.cnt != 0){
            Text(text = msgData.cnt.toString())
        }
        Spacer(modifier = Modifier.height(3.dp))
        if (timeShow){
            Text(text = msgData.time)
        }
    }
}

@Composable
fun VlmChatBubble(
    needTime :Boolean,
    msgData : MsgTest,
    first : Boolean,
    mine : Boolean,
    img: Uri?
){
    val horizontal = if (mine) Alignment.End else Alignment.Start
    Column(horizontalAlignment = horizontal, modifier = Modifier.fillMaxWidth()) {
        Row(verticalAlignment = Alignment.Bottom) {
            if(!mine){ //타인의 버블
                Box(modifier = Modifier.width(100.dp)){
                    if (first){
                        Icon(
                            imageVector = Icons.Rounded.LocationOn,
                            contentDescription = null,
                            modifier = Modifier.size(100.dp)
                        )
                    }
                }
                Column() {
                    if (first){
                        Text(text = msgData.nickName)
                    }
                    Row() {
                        ChatBubble(mine = false, first = first, msg = msgData.msg) {

                        }
                        ChatMetadataPresenter(msgData = msgData, timeShow = needTime)
                    }
                }
            }else{ // 내버블
                ChatMetadataPresenter(msgData = msgData, timeShow = needTime)
                ChatBubble(mine = true, first = first, msg = msgData.msg) {
                }
            }
        }
        Spacer(modifier = Modifier.height(10.dp))
    }
}

여기서 채팅리스트를 받는 Composable을 만들어 주면

@Composable
fun ChatListPresenter(
    msgList : List<MsgTest>,
    me : String
){
    Column(
        modifier = Modifier.padding(10.dp)
    ) {
        msgList.forEachIndexed { index, msgTest ->
            if (index == 0){
                VlmChatBubble(
                    needTime = (msgTest.nickName != msgList[1].nickName) || (msgTest.time != msgList[1].time),
                    msgData = msgTest,
                    first = true,
                    mine = me == msgTest.nickName,
                    null
                )
            }else if (index == msgList.size-1){
                VlmChatBubble(
                    needTime = true,
                    msgData = msgTest,
                    first = msgTest.nickName != msgList[index-1].nickName,
                    mine = me == msgTest.nickName,
                    null
                )
            }else{
                VlmChatBubble(
                    needTime =  (msgTest.nickName != msgList[index+1].nickName)|| (msgTest.time != msgList[index+1].time),
                    msgData = msgTest,
                    first = msgTest.nickName != msgList[index-1].nickName,
                    mine = me == msgTest.nickName,
                    null
                )
            }
        }
    }
}

자 이제 테스트케이스를 사용해서 Preview를 만들어 보자

 

@Preview(showBackground = true)
@Composable
fun Pv3(){
    val testMsg = listOf<MsgTest>(
        MsgTest("사과","11:51",0,"안녕 나는 사과"),
        MsgTest("사과","11:51",0,"오늘 어디감?"),
        MsgTest("사과","11:53",2,"내일 만나나?"),
        MsgTest("귤","11:54",3,"오늘 슈스케 봐야함"),
        MsgTest("배","11:55",3,"슈스케가 아니라 쇼미 아님?"),
        MsgTest("배","11:55",5,"혼자 10년전 살고있누?"),
        MsgTest("딸기","11:55",5,"저거 원래 저럼 아무것도 모룸"),
        MsgTest("사과","11:56",5,"ㅋㅋㅋ 개웃기누"),
        MsgTest("딸기","11:57",6,"아오.."),
        MsgTest("딸기","12:00",6,"개발이나 해야지")
    )
    ChatListPresenter(msgList = testMsg, me = "딸기")
}

딸기가 본 화면

배가 보는 화면

이렇게 채팅 뷰를 만들어 봤다.. 이제 데이터 가지고 와서 적용해봐야겠다.