기본 콘텐츠로 건너뛰기

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


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

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

메인화면 예시

 

메인화면이라고는 뭐 아직 버튼 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시간이 훌쩍~   이래서야 언제 다 끝낼 수 있을지???

 

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

댓글

댓글 쓰기

이 블로그의 인기 게시물

개인정보처리방침 안내

 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...
댓글 쓰기
자세한 내용 보기

안드로이드 앱 만들기 : 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...
댓글 쓰기
자세한 내용 보기