Android Migrate an xml view to compose

사용 버전: Android Studio Koala 2024.1.1
사용 언어: Kotlin 2.0.10


안드로이드 Migrate an xml view to compose를 알아보겠습니다.



오늘은 XML(엑스엠엘) View(뷰)로 만들어진 앱을 Compose(컴포즈)로 변경해 보는 작업을 해봅시다.
아쉽지만 Compose에 대한 설명은 없습니다. 이미 알고 계신다고 생각하고 진행할 거예요.


아래는 현재 XML로 작성된 제 앱입니다. 이걸 Compose로 변경할 것입니다. 재미있어 보이지 않나요?




Compose로 변경할 때에는 보통 Fragment 단위로 변경하는 것을 추천합니다. 다시 말하자면, 화면 단위로 변경하는 것이죠.







buildFeatures에 compose = true를 적어줍니다.

dependencies에는 다음의 내용을 추가해 줍니다.



설명을 위해 version catalog는 적용하지 않았습니다.

implementation(platform("androidx.compose:compose-bom:2024.08.00"))

implementation("androidx.compose.material3:material3")

implementation("androidx.compose.ui:ui-tooling-preview")

debugImplementation("androidx.compose.ui:ui-tooling")

Sync Now를 눌러줍니다.





plugin에 compose compiler를 추가해 줍니다.



Project 용 build.gradle

id("org.jetbrains.kotlin.plugin.compose") version("2.0.10") apply false





Sync Now를 눌러줍니다.





compose를 적용할 모듈 용 build.gradle

id("org.jetbrains.kotlin.plugin.compose")






Sync Now를 눌러줍니다.









파일을 하나 만듭니다.












만든 TranslateItem.kt 파일에 아래와 같이 compose를 정의해 줍니다.

왜 이런 Item을 만드는지는 위의 XML을봐주시면 됩니다. 그걸 이걸로 교체하는 거예요.





TranslateScreen로 파일을 하나 만듭니다.





TranslateScreen.kt






이렇게 만들어주면, 미리 보기를 한 번 볼까요?

버튼 위치는 제가 따로 수정해서 달라졌지만, XML과 똑같은 구성이 되었습니다.







그럼 문제는 이 Compose를 어떻게 XML 대신 Fragment에서 사용하게 하느냐인데, 한 번 더 찾아봅시다.

ComposeView를 사용합니다.





Fragment는 Navigation과 얽혀있어서, Fragment를 전부 Compose로 변경하지 않는 이상 계속 유지해야 합니다. 최종적으로는 모두 Compose로 변경하고 Fragment가 사라지겠네요.



TranslateFragment.kt

이 부분을 지워주고 Compose를 넣어줍니다.







짜잔, Compose가 사용되었습니다. 한 번 실행해 볼까요?






글자 크기 등은 손봐야 하지만, 기본적으로는 만족스럽네요.



다음 이야기에서는 Themes를 Compose로 변경하는 것을 다룹니다.


끝.



카테고리: Android
세계적인 앱 개발자(The world-class application developer)
반구저기(反求諸己)

댓글

댓글 쓰기

궁금한 점은 댓글 달아주세요.
Comment if you have any questions.

이 블로그의 인기 게시물

Python urllib.parse.quote()

이미지
사용 버전: Python 3.6.8 사용 프로그램: Atom 1.40.1 x64 ​ 파이썬 urllib.parse.quote()에 대해서 알아보겠습니다. 괄호 안에는 string, safe, encoding, errors 인자가 들어갑니다. ​ urllib.parse.quote()는 아스키코드 형식이 아닌 글자를 URL 인코딩 시켜줍니다. ​ String 인자에는 string, bytes 형식이 들어갑니다. String 형식. Bytes 형식 Safe 인자에는 URL encoding에서 제외할 문자를 넣습니다. 기본으로 '/'이 설정되어 있습니다. Encoding 인자에는 인코딩 이름이 들어갑니다.  string에 들어가는 문자와 맞지 않으면 오류가 나옵니다. 기본적으로 'utf-8'이 들어갑니다. Error 인자에는 'strict', 'ignore', 'replace', 'xmlcharrefreplace', 'backslashreplace', 'namereplace', 'surrogateescape', 'surrogatepass'가 들어갑니다. 기본적으로 strict가 설정되어 있습니다. unicode 오류를 알려줍니다. Ignore의 경우 오류는 무시하고, 변환할 수 있는 것만 변환합니다. Replace는 에러 글자를 '?'로 변환해줍니다. 그리고 quote(
자세히 보기 »

Python OpenCV 빈 화면 만들기

이미지
사용 버전: Python 3.7.6, OpenCV 4.2.0 ​ 파이썬 OpenCV 빈 화면 만들기를 해보겠습니다. ​ 검정 빈 화면을 만들기 위해서는 numpy가 필요합니다. ​ img1의 경우는 color로 불러들었을 때를 위한 빈 화면이고, img2의 경우는 grayscale로 불러들었을 때의 빈 화면입니다. ​ 끝. 카테고리: Python, cv2
자세히 보기 »

Python bytes.fromhex()

이미지
사용 버전: Python 3.6.8 사용 프로그램: Atom 1.38.2 x64 ​ 파이썬 bytes.fromhex()에 대해서 알아보겠습니다. 괄호 안에는 bytes 형식으로 바꿀 hex 숫자가 들어갑니다. ​ bytes.fromhex()은 hex 숫자에 '\x'를 붙여 bytes 형식으로 변형합니다. 끝. 카테고리: Standard Library, Python
자세히 보기 »

Android AVD Ram size change

이미지
사용 버전: Android Studio 4.1.1 사용 언어: Kotlin 1.4.20 ​ 안드로이드 AVD Ram size change를 해보겠습니다. ​ 안드로이드에는 AVD(Android Virtual Device)라는 가상 기기를 제공해 줍니다. 해당 가상 기기의 램 크기를 변경해보도록 하겠습니다. ​ AVD Manager에 들어갑니다. 아래의 창이 나옵니다. 아래로 향한 화살표를 눌러 Show on Disk를 누릅니다. 폴더가 하나 열립니다. config.ini 파일을 찾아 메모장 파일로 엽니다. hw.ramSize를 변경합니다. ​ ​ ​ 저는 3072로 변경했습니다. 저장합니다. ​ ​ 다시 AVD Manager로 돌아와서 연필 모양을 누릅니다. Show Advanced Settings를 누릅니다. RAM 영역을 보면, 아까 입력한 3072로 변경된 것을 확인할 수 있습니다. 끝. 카테고리: Android
자세히 보기 »

Forensics .pyc 파일 .py로 복구하기

이미지
사용 버전: Python 3.7 운영 체제: Windows 10 Home x64 1909 사용 도구: Uncompyle6 ​ 포렌식 .pyc 파일 .py로 복구하기에 대해서 알아보겠습니다. ​ 만약 여러분이 파이썬 파일을 지워버렸는데, .pyc 파일은 남아있다면 다시 복구할 수 있습니다. ​ 보통 .pyc 파일은 수동으로 만들지 않는 이상 main 함수가 남아있지는 않습니다. 자동 생성되는 경우는 다른 python script를 참조할 때, 참조한 script가 pyc로 생성합니다. ​ uncompyle6를 설치합니다. python -m pip install uncomply6 ​ 저는 해당 .pyc 파일을 사용하겠습니다. 아래 git에 들어가면 동일한 파일을 사용할 수 있습니다. https://github.com/shwoghk14/mnist_tensorflow/tree/master/Start%204/__pycache__ 사용법은 다음과 같습니다. cmd 창을 엽니다. ​ uncompyle6 [복구할 .pyc 파일 이름] 완료되면, 다음과 같이 원본 py 내용이 나옵니다. ​ uncompyle6 version python bytecode 버전 python 버전 file name compiled 날짜 Size 등의 중요한 정보와 함께 원본 python script가 출력됩니다. ​ 해당 파일의 원본은 mnist_util.py입니다. 비교해 보시면 좋을 것 같네요. https://github.com/shwoghk14/mnist_tensorflow/tree/master/Start%204 ​ 끝. 카테고리: forensic [계수기] 앱 광고 외국: Hand Counter https://play.google.com/store/apps/details?id=starlight.jaehwa.handcounter 계수기 앱. 하나씩 개수를 셀 때 사용해보세요.
자세히 보기 »

KiCad 시작하기 2 (PCB 만들기)

이미지
사용 버전 : KiCad 5.1.0 ​ kicad PCB 만들기에 대해서 알아보겠습니다. ​ 'PCB Layout Editor'를 눌러줍니다. 만약 아래와 같은 알림 창이 뜬다면, 선택은 자유입니다. 내용은 그래픽 카드를 사용할 것인지, 말것인지 입니다. 쓰면 속도도 좋고, 부드러워진다고 설명하고 있군요. 다음과 같은 창이 뜹니다. 'Update PCB from schematic'을 눌러줍니다. 'Match Method'와 설정을 적절히 선택해줍니다.(저처럼 하셔도 됩니다.) 그리고 'Update PCB'를 눌러줍니다. 다음과 같이 마우스를 따라다니는, footprint가 생성됩니다. 적당한 곳에 클릭합니다. footprint 이동은 '키보드 M', footprint 회전은 '키보드 R'입니다. 'Hide board ratsnest'를 켜면, 전선이 연결되어야 할 가이드 선이 표시됩니다. 'Ctrl + 좌 클릭'은 선택된 패드에 연결될 부분만 밝게 표시합니다. 해제 방법은 빈 땅에 'Ctrl + 좌 클릭'하면 됩니다. 옆에 있는 '레이어'는 PCB의 어느 영역에 그릴 것인지를 선택할 수 있게 해줍니다. F.Cu는 PCB 윗부분 전선 B.Cu는 PCB 뒷부분 전선 F.Paste는 PCB 윗부분 SMT 접착제 B.Paste는 PCB 뒷부분 SMT 접착제 F.Mask는 PCB 윗부분 패드 B.Mask는 PCB 뒷부분 패드 Edge.Cuts는 PCB의 전체 모양 F.SilkS는 PCB 윗부분 하얀 선 또는 글자 B.SilkS는 PCB 뒷부분 하얀 선 또는 글자 전선을 그려봅시다. 'Route tracks'를 눌러줍니다. 레이어를 보시면, F.Cu에 화살표가 있으니, 전선은 F.Cu 레이어에 그려집니다
자세히 보기 »

About Subnet Mask App

이미지
Hello, everyone! Thanks to use my app. About Subnet Mask App is available on Android and iOS. 안녕하세요. 여러분! 제 앱을 사용해주셔서 감사합니다. About Subnet Mask 앱은 안드로이드와 iOS에서 모두 사용 가능합니다. Android Release Note [2.0.0] •  Release version 2.0.0 (2024.08.19.) •  Change lifecycle onStart → onCreate. Duplicated call bug fix (2024.08.19.) •  Use Semantic versioning, 61.0 → 2.0.0. Improve maintainability (2024.08.14.) •  Apply Gradle Composite. Easy to maintenance and apply Plugins (2024.08.11. ~ 2024.08.13.) •  Change Gradle and JVM configuration. Reduce build time probable maximum 9.7s → 2.5s, 73%(2024.08.09.) •  Collect Birthday and save it in Proto DataStore. Connect it UMP(User Messaging Platform) and AdMob (2024.07.31. ~ 2024.08.09.) •  Remove redundant instrumented test build. Reduce test build time 3m → 30s, 83% (2024.07.19.) •  Change LiveData → Flow. Easy to test (2024.07.18. ~ 2024.07.29.) •  Remove Databinding. Remove Kapt (2024.07.18. ~ 2024.07.29.) •  Change Jetpack Naviga
자세히 보기 »

tensorflow tf.expand_dims()

이미지
사용 버전: Python 3.7.6, Tensorflow 2.1.0 ​ tensorflow(텐서플로우) tf.expand_dims()에 대해서 알아보겠습니다. 괄호 안에는 input, axis, name 따위가 들어갑니다. ​ tf.expand_dims()는 배열의 차원을 늘려줍니다. input에는 늘려질 배열을 넣습니다. axis는 몇 번째 차원의 크기를 늘릴 건지 숫자를 넣습니다. axis = 0 일 때. ​ ​ axis = 1 일 때. ​ ​ axis = 2 일 때. ​ ​ 끝. 카테고리: Tensorflow_python, Python
자세히 보기 »

tensorflow tf.constant

이미지
사용 버전: Python 3.7.6, Tensorflow 2.1.0 ​ tensorflow(텐서플로우) tf.constant에 대해서 알아보겠습니다. ​ tf.constant()는 변수 선언할 때 사용합니다. 괄호 안에는 value, dtype, shape, name이 들어갑니다. ​ tf.Variable과 차이점은 변경이 되지 않는다는 것입니다. ​ value는 상수나 배열 형태가 들어갈 수 있습니다. ​ 상수 ​ 배열 ​ ​ shape는 배열의 모양이 들어갑니다. 상수 shape ​ ​ 배열 shape ​​ name 속성은 옵션으로 사용합니다. ​ 끝. 카테고리: Tensorflow_python, Python
자세히 보기 »

Hand Counter App

이미지
Hello, everyone! Thanks to use my app. Hand Counter App is available on Android and iOS. 안녕하세요. 여러분! 제 앱을 사용해주셔서 감사합니다. 계수기 앱은 안드로이드와 iOS에서 모두 사용 가능합니다.
자세히 보기 »