Android/Jetpack Compose 20

[Jetpack Compose] Delay 주는 방법

개발을 하다보면 특정 초 지난 후 에 기능이 작동하면 좋겠다는 생각을 할 때가 있다. 그러면 Delay를 줘야하는데 어떻게 줄 수 있을까? 두가지 방법이 있다. 1. Handler Handler(Looper.getMainLooper()).postDelayed({ // do something },1000) 하단에 있는 , 뒤에있는 숫자만큼 딜레이를 주고 중괄호 내부에 있는 코드를 실행시킨다. 1000은 1초를 의미한다. 2. LaunchEffect LaunchedEffect(Unit){ delay(1.seconds) // do something } delay 내부에 있는 시간만큼 시간이 지난 후 밑에있는 코드를 실행시킨다. Handler와 마찬가지로 1000을 적으면 1초가 되고, 위 예시처럼 1.seco..

[Jetpack Compose] Android Localhost 접속하기

기존에 웹을 했던 사람들이라면 localhost에 접속하고자 할 때 "http://localhost:8080"으로 주소를 설정할 것이다. 그런데 안드로이드는 다르다. 안드로이드에서 애뮬레이터를 돌릴 때, localhost에 접속하려면 "http://10.0.2.2:8080"과 같이 주소를 설정해야한다. 아 물론 8080은 포트번호기때문에 8080포트가 아닌 다른 포트를 쓴다면 바꿔서 넣기만 하면 된다. Base URL을 "http://10.0.2.2:8080"으로 설정하고, api 주소를 뒤에 붙여서 사용하면 된다 ex) http://10.0.2.2:8080/login 나는 이런식으로 사용한다. 정말 헷갈리는게 또 swagger를 보려면 웹으로 접속하기때문에 http://localhost:8080 로 접..

[Jetpack Compose] BackHandler : 뒤로가기 감지

어플을 사용하다보면 뒤로가기를 눌렀을 때 이런 창이 뜰때가 있다. 이건 어떻게 하는걸까? 뒤로가기를 감지하고, 특정 동작을 작동시켜야 한다. 그렇기때문에 사용하는 것이 BackHandler이다. @Composable fun BackOnPressed() { val context = LocalContext.current var backPressedTime = 0L BackHandler(enabled = true) { if(System.currentTimeMillis() - backPressedTime

[Jetpack Compose] 폰트 적용법

안드로이드 어플을 개발하다보면 디자인이 참 중요하다. 사실 모든 프론트가 다 중요하다. 그중에서 큰 영향을 끼치는 것 중 하나가 폰트다. 예쁜디자인에 구린 폰트가 들어있는것만큼 화나는게 없다. 정말 모니터 한대 치고싶어지니까 비싼 모니터 부수기 전에 폰트 적용하는 법을 배워보자. 1. res폴더 내부에 font 폴더 만들기 res -> New -> Android Resource Director를 누르면 이상한 창이 하나 나올거다. Directory name을 font로 설정하고 Resource type도 font로 설정해주고 ok를 누른다. 2. 폴더에 원하는 폰트 파일 넣기 이때 중요한게 파일 이름이다. 반드시 소문자와 _(언더바)만 사용해야 한다. 어떻게 알았냐고? 알고싶지 않았다... 에러 나니까 ..

[Jetpack Compose] Slot API

Slot API 이름을 보면 알 수 있는 것 처럼 뭔갈 넣을 수 있도록 만드는 것이다. 즉 재사용성이 좋도록 함수를 설계하는 것이다. 말만 들어서는 기존의 재사용성 높은 함수와 다를바가 없어 보일 것이다. 자세하게 정리하며 설명 들어가보자. 목적 일단 이걸 왜 써야할까? 앞서 말했던것 처럼 재사용성이다. 극한의 재사용성이 목표다. 하나의 큰 틀을 만들고, 그 틀을 세부적으로 활용하며 사용하기 위해서 Slot API를 사용한다. 아래 사용법을 보면서 공부해보자. 사용법 기존의 코드를 먼저 보자. @Composable fun ButtonFun(){ var count = remember { mutableStateOf(0) } Row( verticalAlignment = Alignment.CenterVerti..

Android App 개발기 feat. 이집내집

Jetpack Compose 관련해서 한동안 글을 못썼다. 내가 글을 쓴 텀을 보면 대충 예상이 가겠지만 난 지금 대학생이다. 그래서 학기중엔 현생에 치여 살고... 방학에나 공부하는걸 정리하는 블로그다보니 한학기동안 글을 거의 못썼다. 그렇다고 Jetpack Compose를 공부를 하나도 안했냐 하면? 절대 아니지 ㅋㅋ 놀랍게도 지금까지 공부한걸 써먹기도 하고, 공부하며 어플을... 하나... 만들었다. 우리학교에선 "심화 캡스톤"이라는 이름의 작업물 만드는 수업이 있다. 이건 4학년 1학기에 듣는 일종의 졸작 같은 개념이다. 그래서 이걸 연습이라고 해야할까 여튼 3학년 1학기에도 하는 수업이 "기초캡스톤"이다. 그래서 팀을 짜고 열심히 개발하느라고 블로그를 정리할 시간이 없었다. 그래도 결과물은 잘 ..

[Jetpack Compose] Box

Box 이전에 배운 Column과 Row는 LinearLayout에 속한다. 하지만 Box는 FrameLayout계층이다. 그렇기 때문에 중복되게 표현해주는 특징으로 인해 한개의 Box에 여러개의 텍스트를 넣어주게 되면 겹쳐서 나타나게 된다. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Box(){ Text("Hello") Text("ABCDEFGHIJKLMNOP") } } } } 이처럼 하나의 박스 내부에 2개 이상의 텍스트를 넣어주게 되면 겹쳐서 출력된다. 이를 해결하는 방법은 Box의 활용..

[Jetpack Compose] Composable, Preview

Android Studio에서 컴포즈를 활용하는 프로젝트를 생성한다면 아래와 같은 코드가 기본으로 적혀있을 것이다 . class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { MyFirstComposeApplicationTheme { // A surface container using the 'background' color from the theme Surface(color = MaterialTheme.colors.background) { Greeting("Android") } } } } } @Compos..

[Jetpack Compose] Column, Row, Text

Text 말 그대로 텍스트를 화면에 출력시켜준다. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { InflearnProjectTheme { Surface(color = MaterialTheme.colors.background) { Text("Hello") } } } } } 이때 한줄이 아닌 여러줄을 출력시키고자 할 경우 Text를 여러번 호출시킬 수 있다. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceSt..

[Jetpack Compose] 요즘 떠오르는 Jetpack Compose가 뭘까?

Jetpack Compose Native UI를 코드레벨로 구현할 수 있는 최신 툴킷이다. 기존의 뷰를 업데이트하는 방식과 달리 Compose를 사용하면 필요한 영역의 뷰를 다시 그려주는 방식으로 작업할 수 있다. 지금까지 Android 어플리케이션을 개발하기 위해서는 대부분 XML을 활용해야만 했다. 하지만, Jetpack Compose를 활용하게 된다면 코틀린 단 하나로 Android 어플리케이션을 개발할 수 있다. 아래는 간단한 예제이다. class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { Inf..