티스토리

로파브이식스

검색하기

블로그 홈

로파브이식스

loppav6.tistory.com/m

loppav6 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

JetpackCompose 클릭 시 ripple 효과 없애기 클릭 했을 때 깜빡이는 효과 없애기 1. 클릭 막기 Modifier.clickable(interactionSource = MutableInteractionSource(), indication = null) 2. ripple만 막기 val interactionSource = remember { MutableInteractionSource() } modifier = Modifier.clickable(interactionSource = interactionSource, indication = null) 공감수 0 댓글수 0 2022. 11. 16.
Jetpack Compose Textfield 센터 중앙 정렬에 관하여 역시 안드로이드 불친절하다. 별거 아닌걸로 시간 낭비하게 만든다. TextField에서 각자 원하는 높이가 있을 것이다. height를 200dp로 줘보자. 커서가 위에서부터 깜빡인다. 나는 균등하게 중앙에서 시작하고 싶다. padding, align... 별짓을 해봐도 안된다. 이 때는 singleLine을 true로 주면된다. singleLine = true, 코드 몇자로 해결은 되었다. 하지만 참 불친절하다. padding으로는 해결할 수 없는 것인가... 그리고 나는 입력되는 텍스트영역에 startPadding을 주고 싶다... 또 알아보러가자... 전체소스는 아래와 같다. @Composable fun MainView() { val textFieldValue = remember { mutableS.. 공감수 0 댓글수 0 2022. 11. 14.
Jetpack Compose TextField requestFocus 안될 때 FocusRequester().requestFocus()를 이용해서 TextField에 Focus를 주고 키보드가 올라오게 구현가능하다. 그런데 키보드를 다 사용하고 다른 Composable에 갔다오거나, 다른 UI에 의해 Focus를 잃으면 FocusRequester().requestFocus()를 사용해도 키보드가 올라오지 않는다. 이슈트래커에도 비슷한 이슈가 올라와있지만 뾰족한 방법은 없는듯 하다. 이럴땐 역시 야매로 처리한다. delay를 500ms 주고 처리하면 잘 동작한다. delay는 suspend fun이기 때문에 코루틴스코프를 이용해서 처리한다. 코루틴스코프 사용방법은 Jetpack Compose Scaffold(with SnackBar, CoroutineScope)편을 참고하자 (htt.. 공감수 0 댓글수 0 2022. 11. 9.
Jetpack Compose 화면 시작 시 키보드 올리기 안드로이드 참 불친절 하다. 컴포저블 호출 시, TextField에 자동으로 Focus주고 키보드 띄워주는 기능 SDK에서 기능을 제공해주면 얼마나 줗으려나. 어쨌든, 커스텀하게 작성해야 한다. 그래도 방식은 간단하다. LaunchedEffect를 이용해서 FocusRequester.requestFocus()를 주면 Focus가 On 되면서 키보드가 올라온다. 다만 delay가 없으면 실행이 안된다. Composition이 발생하고 그 끝나는 시점을 모르기 때문에 delay를 주는 것으로 해결했다. delay는 100ms에서 동작하지만 조금 러프하게 300ms로 주었다. val focusRequester = remember { FocusRequester() } TextField(value = "", on.. 공감수 0 댓글수 0 2022. 11. 7.
Jetpack Compose 키보드 상태 가져오기 안드로이드에서 키보드 관리는 꽤나 까다롭다. SDK에서 기본적으로 키보드 상태를 알려주면 좋으련만... Compose에서도 키보드가 올라왔을 때, 내려갔을 때 상태가 필요할 때가 있을 것이다. 기존 안드로이드에서 viewTreeObserver를 사용해 키보드 상태를 가져올 수 있었다. Compose에서도 마찬가지로 viewTreeObserver를 사용한다. 다만 소스코드는 기존보다 간결하다. @Composable fun MainView() { val keyboardState by keyboardAsState() Toast.makeText(LocalContext.current, "KeyBoard Show is $keyboardState", Toast.LENGTH_SHORT).show() Column( mo.. 공감수 0 댓글수 0 2022. 11. 7.
Jetpack Compose System UI Hidden 처리 System UI (statusBar, navigationBar)가 숨겨진 상태에서 터치업, 키보드 호출 했을 경우 System UI가 노출이 된다. 다시 숨기고 싶을 때 SystemUiController를 사용하면 된다. 1. 먼저 아래 디펜던시를 참고하여 build.gradle파일에 추가한다. (버전참고: https://google.github.io/accompanist/systemuicontroller/#download) repositories { mavenCentral() } dependencies { implementation "com.google.accompanist:accompanist-systemuicontroller:" } 2. Composable에서 SystemUiController를 .. 공감수 0 댓글수 0 2022. 11. 3.
Jetpack Compose TextField 날짜, 시간 마스킹 처리 TextField에 날짜나 시간 입력 시 마스킹 처리를 하고 싶을 때가 있다. TextField의 VisualTransformation Interface를 활용해 아래와 같이 처리해보자. ex1) 13:25 ex2) 2022-12-12 소스는 Jetpack Compose 키보드 내리기 소스를 참조하자. https://loppav6.tistory.com/21 1. 시간 마스킹 VisualTransformation private class TimeTransFormation() : VisualTransformation { override fun filter(text: AnnotatedString): TransformedText { return timeFilter(text) } private fun timeFi.. 공감수 0 댓글수 0 2022. 11. 2.
Jetpack Compose 키보드 내리기 Compose에서 키보드 내리는 방법은 간단하다. LocalFocusManager.clearFocus()를 사용하면 해결된다. TextField에서 keyboardOptions과 keyboardActions을 사용하여 키보드에서 '완료'를 눌렀을 때 키보드를 닫아주고, '닫기' 버튼을 눌렀을 때 키보드를 내려주도록 구현했다. @Composable fun MainView() { Column( modifier = Modifier.fillMaxSize(), horizontalAlignment = Alignment.CenterHorizontally ) { val textFieldValue = remember { mutableStateOf("") } val focusManager = LocalFocusManage.. 공감수 0 댓글수 0 2022. 11. 2.
Jetpack Compose mutableStateOf 사용 방법 (remember, by, 코틀린 구조 분해) remeber mutableStateOf 사용방식 3가지에 대해서 알아보자. remember by remember (T, T) = remember 먼저 remember는 말 그대로 기억하겠다는 것이다. 예를 들어, 세로모드 또는 가로모드로 디바이스를 돌렸을 때 Composable은 ReComposition이 발생한다. 이 때, remeber로 선언된 변수는 초기화가 되지 않고 이전 값을 그대로 보여주게 된다. 1. remember - 일반적으로 사용하는 방식이다. v1.value를 이용해 get, set을 할 수 있다. val v1 = remember { mutableStateOf(false) } //set v1.value = true //get Text(text = "${v1.value}") 2. by.. 공감수 0 댓글수 0 2022. 10. 28.
Jetpack Compose CompositionLocal 먼저 소스와 결과물을 보자. @Composable fun View1() { val viewModel = MyViewModel() Column { Button(onClick = { /*TODO*/ }) { Text(text = "${viewModel.getTitle()} this is Button") } View2(viewModel = viewModel) } } @Composable fun View2(viewModel: MyViewModel) { TextField(value = "${viewModel.getTitle()} this is TexfField", onValueChange = {}) View3(viewModel = viewModel) } @Composable fun View3(viewModel: .. 공감수 0 댓글수 0 2022. 10. 27.
Jetpack Compose ConstraintLayout "뷰 시스템에서 ConstraintLayout은 크고 복잡한 레이아웃을 만드는 데 권장되는 방법이었습니다. 플랫 뷰 계층 구조가 중첩된 뷰보다 성능 면에서 더 좋았기 때문입니다. 그러나 이는 깊은 레이아웃 계층 구조를 효율적으로 처리할 수 있는 Compose에서는 문제가 되지 않습니다." (출처: https://developer.android.com/jetpack/compose/layouts/constraintlayout) Compose에서는 ConstraintLayout 사용을 권장하지 않는다. 하지만 복잡한 UI 개발을 하다보면 필요할 때가 있기 때문에 포스팅 해본다. 먼저 build.gradle 파일에 아래 항목을 추가한다. (참고: https://developer.android.com/jetpac.. 공감수 0 댓글수 0 2022. 10. 27.
Jetpack Compose LaunchedEffect를 이용한 CountDown 기능 구현 흔히 볼 수 있는 "N초 후에 화면이 닫힙니다"를 LaunchedEffect를 이용하여 간단하게 구현이 가능하다. 이전에 포스팅한 AlertDialog를 재활용하여 알럿창이 N초간 닫히지 않을 경우 자동으로 닫히도록 구현해보자. (Jetpack Compose AlertDialog 포스팅: https://loppav6.tistory.com/6?category=975534) 먼저 LaunchedEffect에 대해서 알아보자. LaunchedEffect는 코루틴 스코프에서 실행되는 컴포저블이다. 보통 suspend 함수를 취소하고 다시 실행해야할 때 사용한다. 그렇다면 rememberCoroutineScope를 생성해서 사용하면 되지 않을까? 아래와 같은 에러가 발생한다. LaunchedEffect를 사용하라.. 공감수 0 댓글수 0 2022. 10. 27.
Jetpack Compose QR Image 만들기 (with zxing library) TextField에 URL을 입력하고 QR이미지를 생성하는 코드를 만들어보자. zxing library를 사용하기 위해 build.gradle에 아래 항목을 추가한다. (참고: https://github.com/journeyapps/zxing-android-embedded) dependencies { implementation('com.journeyapps:zxing-android-embedded:4.3.0') { transitive = false } implementation 'com.google.zxing:core:3.4.1' } 1. URL을 입력받을 TextField를 만든다. TextField는 입력받은 Text를 State객체에 담아 value 필드를 통해 표시해준다. onValueChange.. 공감수 0 댓글수 0 2022. 10. 26.
Jetpack Compose Scaffold(with SnackBar, CoroutineScope) Scaffold는 기존 안드로이드 UI에서 복잡하게 구현했던, DrawerLayout, TopBar, BottomBar등을 간단하게 구현할 수 있는 도구이다. 구성요소로는 다음과 같다. scaffoldState: DrawerState 설정(DrawerState.Opened, DrawerState.Closed) topBar: 상단 액션바 floatingActionButton: 플로팅 버튼 floatingActionButtonPosition: 플로팅 버튼 위치 지정 drawerContent: Drawer UI Content: scaffold 주요 UI bottomBar: 하단 바 snackBar는 scaffoldState를 통해 호출 가능하다. snackBar는 suspend 함수이기 때문에 비동기로 처리 .. 공감수 0 댓글수 0 2022. 10. 25.
Jetpack Compose AlertDialog 기존에 Dialog를 사용하려면 Dialog 클래스 생성 AlertDialog.Builder 사용, DialogFragment 사용 등 괜시리 복잡하다. Compose는 기존에 복잡한 UI 구조를 간단하게 만들어 사용할 수 있고 직관적이고 어렵지 않아서 좋다. 최초 Composition 발생 시 AlertDialog도 로딩된다. State객체를 활용하여 AlertDialog를 보여줄지 말지 결정하면 된다. 소스는 직관적이라 따로 리딩할 것은 없고, 참고사항으로 onDismissRequest는 다이얼로그 외부영역 터치 시 동작하는 부분이다. 외부 터치 시 닫고 싶으면 State객체를 조작하면 된다. @Composable fun MainView() { Column { val showDialog = remem.. 공감수 0 댓글수 0 2022. 10. 25.
Jetpack Compose ViewModel에서 State객체를 통한 Compose UI 업데이트 Compose에서는 State객체를 이용하여 Observable하게 동작하도록 구현하는 것을 권장한다. Compose UI는 State객체를 관찰하다가 State객체의 값이 변하면 Compose UI는 Re-Composition을 발생시켜 UI를 업데이트 한다. developer 사이트의 Jetpack Compose를 소개하는 소스를 참고하여 예제를 만들어 보자. 본 예제에서는 별모양의 이미지를 클릭하면 On/Off 하는 기능을 만들어 볼 것이다. 먼저 ViewModel을 사용하기 위해 build.gradle 파일에 아래 항목을 추가한다. (참고: https://developer.android.com/jetpack/compose/libraries#viewmodel) dependencies { implem.. 공감수 0 댓글수 0 2022. 10. 25.
Jetpack Compose Navigaion 화면 이동 Navigation을 이용하여 Compose 화면 이동을 해보자. 사용방법은 간단하다. Navigation은 Compose가 나오기전부터 제공하고 있었다. Compose용 Navigation을 사용하면 된다. startActivity와 같은 구식 방식은 버리고, 선언형 프로그래밍에 어울리는 Navigation을 활용해보자. 1. 앱 모듈의 build.gradle에 아래 항목을 삽입하자. (참고: https://developer.android.com/jetpack/compose/navigation?hl=ko#setup) dependencies { def nav_version = "2.5.2" implementation "androidx.navigation:navigation-compose:$nav_vers.. 공감수 0 댓글수 0 2022. 10. 24.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.