안드로이드 앱 만들기 : 메인 화면으로 넘어가기...

지난번에는 로그인하는 화면을 만들었으니, 이번에는 로그인해서 나오는 메인을 구현해 볼 요량이다. 

메인화면 예시

 

메인화면이라고는 뭐 아직 버튼 2개와 타이틀 하나를 달았을 뿐이다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이것이 그냥 Layout 을 이용해서 작업을 하고 있다면 조금은 더 쉽고 빠르게 될 것 같기는 하나, 이왕 배우기 시작한 jetpack compose을 활용해서 만들어 보기로 했다.

 

import android.os.Bundle
import android.util.Log
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.billcoreatech.multichat416.ui.theme.MultiChat416Theme
import com.billcoreatech.multichat416.widget.buttonAddChatRoom
import com.billcoreatech.multichat416.widget.buttonLogOut
import com.billcoreatech.multichat416.widget.titleView
import com.google.android.gms.auth.api.signin.GoogleSignIn
import com.google.android.gms.auth.api.signin.GoogleSignInClient
import com.google.android.gms.auth.api.signin.GoogleSignInOptions
import com.google.android.gms.tasks.OnCompleteListener
import com.google.firebase.auth.FirebaseAuth
import com.google.firebase.auth.ktx.auth
import com.google.firebase.database.DatabaseReference
import com.google.firebase.database.FirebaseDatabase
import com.google.firebase.database.ktx.database
import com.google.firebase.ktx.Firebase

class MainActivity : ComponentActivity() {

    var TAG = "MainActivity"
    lateinit var database : FirebaseDatabase
    lateinit var chatroom : DatabaseReference

    lateinit var googleSignInClient: GoogleSignInClient
    lateinit var auth: FirebaseAuth

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val gso = GoogleSignInOptions
            .Builder(GoogleSignInOptions.DEFAULT_SIGN_IN)
            .requestIdToken(getString(R.string.default_web_client_id))
            .requestEmail()
            .build()

        database = Firebase.database
        chatroom = database.getReference("ChatRooms")
        googleSignInClient = GoogleSignIn.getClient(this, gso)
        auth = Firebase.auth

        setContent {
            MultiChat416Theme {
                titleView(getString(R.string.titleChatRoom))
                buttonAddChatRoom(applicationContext) {

                }

                buttonLogOut(applicationContext) {
                    doLogOut()
                }

            }
        }
    }

    private fun doLogOut() {
        googleSignInClient.signOut().addOnCompleteListener( OnCompleteListener  {
                task -> if (task.isComplete ) {
                Log.e(TAG, "finish ... " )
                auth.signOut()
                finish()
            }
        })
    }

}

 

MainActivity 에는 이제 꼭 필요한 코드만 들어가고 아무것도 없다. 화면에 구현된 타이틀 (titleView) 과 버튼 2개는 따로 빼서 class을 만들었다. 

 

먼저 제목을 보여주는 titleView 의 코드

 

다른 activity 에서도 활용을 하기 위해서 parameter로 제목 이름을 받고 그것을 전체 화면 상단 오른쪽에 표시하도록 하였다.

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun titleView(title:String) {

    Column(modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .padding(16.dp),
    verticalArrangement = Arrangement.Top,
    horizontalAlignment = Alignment.Start,
    ){
        Card(modifier = Modifier
            .width(170.dp)
            .height(60.dp)
            .padding(5.dp),
            shape = RoundedCornerShape(20.dp),
            border = BorderStroke(width = 2.dp, color = Color.White),
        ) {
            Text(text = title, color = Color.Blue
                , modifier = Modifier.padding(10.dp))
        }
    }
}

 

다음은 화면 아래쪽에 있는 Floating Button 의 코드

 

버튼에 표시할 테스트를 string.xml 에서 가져오기 위해서 context을 전달했고,  버튼을 클릭했을 때 동작을 위에서 하기 위해 onClick 함수도 만들어 썼다.

import android.content.Context
import androidx.compose.foundation.layout.*
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import com.billcoreatech.multichat416.R

@Composable
fun buttonAddChatRoom(
    context: Context,
    onClick: () -> Unit
) {
    var context = LocalContext.current
    Column(modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .padding(16.dp),
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.End
    ){
        ExtendedFloatingActionButton(
            backgroundColor = Color.White,
            contentColor = Color.Blue,
            icon = { Icon(Icons.Filled.Add,"") },
            text = { Text(context.getString(R.string.addChatRoom)) },
            onClick = { onClick() },
            elevation = FloatingActionButtonDefaults.elevation(8.dp)
        )
    }
}

 

다음은 화면 상단에 있는 Logout 버튼

 

이 버튼 소스에서 context 을 전달해서 string.xml의 글자를 보여주도록 하였고, 버튼 click 처리를 하기 위해서 onClick을 전달했다. (사실은 받아와서 처리할 수 있도록 구현은 MainActivity에서...)

import android.content.Context
import androidx.compose.foundation.layout.*
import androidx.compose.material.ExtendedFloatingActionButton
import androidx.compose.material.FloatingActionButtonDefaults
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Logout
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.billcoreatech.multichat416.R

@Composable
fun buttonLogOut(
    context: Context,
    onClick: () -> Unit
) {
    Column(modifier = Modifier
        .fillMaxHeight()
        .fillMaxWidth()
        .padding(16.dp),
        verticalArrangement = Arrangement.Top,
        horizontalAlignment = Alignment.End,
    ){
        ExtendedFloatingActionButton(
            backgroundColor = Color.White,
            contentColor = Color.Blue,
            icon = { Icon(Icons.Filled.Logout,"") },
            text = { Text(context.getString(R.string.doLogout)) },
            onClick = { onClick() },
            elevation = FloatingActionButtonDefaults.elevation(8.dp)
        )
    }
}

 

이런 분리를 하니, 재활용성이나 Copy&Paste 해서 다른 함수로 옮겨 가는 것도 도움이 될 것 같다.  아무튼 오늘도 이 거 하나 만들어 내는데, 3시간이 훌쩍~   이래서야 언제 다 끝낼 수 있을지???