본문 바로가기
반응형

전체 글362

Jetpack Compose 에서 점선 그리는 방법 정리 # Border dashed line 오늘은 Jetpack Compose 에서 점선을 그리는 방법에 대해서 정리해 보도록 하겠습니다. 1. PathEffect 점선을 그릴 때 필요한 객체가 dashPathEffect객체입니다. DashPathEffect는 JetpackCompose만을 위한 것이 아니라, API 레벨1 시절부터 존재해오던 고전 API입니다. 첫번째 인자가 interval을 나타내구요. 아래와 같이 2이상의 짝수개로 넣어주어야 합니다. val pathEffect = PathEffect.dashPathEffect(floatArrayOf(10f, 10f), 0f) 2022. 11. 25.
투명도 Hex Code # Alpha Hexadecimal Color 디자이너들이 사용하는 툴에서는 컬러값이라는 "333333"과 같은 값과 투명도 80%이런식으로 나타내기 때문에, 경우에 따라서 UI에 나타낼때는 Alpha값인 투명도를 Hex코드로 바꿔주어야 하는데요. 오늘은 자주 사용하는 투명도의 HexCode에 대해서 정리해 보겠습니다. 1. 투명도에 따른 HexCode 투명도에 따른 HexCode를 표로 정리하면 다음과 같습니다. 개인적으로는 90%인 E6, 80%인 CC나, 60%인 99를 많이 사용하게 되는 것 같습니다. 40%미만은 거의 사용해본적이 없는 것 같네요. 투명도 HexCode 100% FF 98% FA 95% F2 90% E6 85% D9 80% CC 70% B3 60% 99 50% 80 40% 66 30% 4D 20% 33 10% 1A 2. 사용.. 2022. 11. 24.
BottomBar Hide 구현방법 정리 # Android Jetpack Compose Jetpack Compose에서는 Acitivity간 이동을 할일은 거의 없습니다. 대신 Compose에서 Navigation을 하는데요. 현재 화면의 route에 따라서 BottomBar 가 사라줘 주어야 할 경우가 있습니다. 오늘은 이것을 구현하는 방법에 대해서 정리해 보았습니다. 참고로 이글을 이해하기 위해서는 Navigation의 구현 방법에 대해서 알고 있어야 하는데요. 이에 대해서는 아래 글을 참조해 주세요. >> Navigation 과 Bottom Navigation 구현방법 정리 # Jetpack Compose 1. BottomBar 가리기 BottomBar 자체를 가리는 것은 그리 어려운 일은 아닙니다. 단순히 아래 이미지와 같이 BottomNavigationBar()부분을, if문으로 .. 2022. 11. 22.
Jetpack Compose 에서 Activity Result 가져오기 # rememberLauncherForActivityResult 오늘은 Jetpack Compose 에서 Acitivity Result를 가져오는 방법에 대해서 정리해 보도록 하겠습니다. 1. rememberLauncherForActivityResult 이전에는 Activity에서 다른 Activity로부터 결과값을 가져올 때 registerForActivityResult를 사용하였습니다. 이와 관련해서는 아래 글을 참조해 주시면 됩니다. >> registerForActivityResult 구현방법 정리 # 예전 onActivityResult Jetpack Compose에서 갤러리에서 이미지등을 가져오려면 registerForActivityResult가 아니라, rememberLauncherForActivityResult API를 사용해 주어야 합니다. 이 API는 .. 2022. 11. 21.
Contentprovider 와 ContentResolver 이용한 CRUD # Mime-type Uri 오늘은 ContentProvider 와 ContentResolver에 대해서 정리해 보도록 하겠습니다. 1. Content Provider 와 ContentResolver 1-1. Content Provider 원래 Data들은 되도록이면 각 앱별로 Private하게 저장하고 Access하는 것이 안전한데요. 반대로 주소록이나 전화기록, Media(Audio, Video, Photo) 데이터들은 그렇지 않습니다. 예를 들어서, 주소록 데이터를 앱별로 앱내 Private Directory에 저장하기 보다는, ContentProvider에 저장하고, 다른 앱에서도 공유해서 사용하는 것이지요. 이러한 Data들은 앱들간에 자유롭게 Access 할 수 있어야 하는 부분입니다. ContentProvider는 컨텐.. 2022. 11. 18.
Uri 에서 Bitmap 파일 생성하는 방법 # getBitmap ImageDecoder 오늘은 Uri를 가지고 Bitmap 파일을 만드는 방법에 대해서 정리해 보도록 하겠습니다. 1. 필요한 API 1-1. ImageDecoder 와 ContentResolver API28부터 지원되기는 하지만, 파일을 Drawable 또는 Bitmap으로 전환시켜줍니다. 정말 다양한 소스로부터 Bitmap객체를 만들어주도록 도와주는데요. 마침 이 API가 uri소스로부터 Bitmap 객체를 만들어주는 createSoruce함수도 제공해주고 있습니다. 광고 ImageDecoder에는 첫번째 인자로 ContentResolver객체를 필요로 하는데요. ContentResolver는, Uri를 이용해서, ContentProvider로부터 데이터의 CRUD(create, retrieve, update, and de.. 2022. 11. 17.
Navigation Drawer 구현방법 # Jetpack Compose 오늘은 Jetpack Compose 를 이용해서 Navigation Drawer 를 구현하는 방법에 대해서 정리해 보도록 하겠습니다. 이 글에서는 TopAppBar등 Scaffold를 이용하면 빠르게 구현할 수 있는 요소들이 있어서, Scaffold 를 사용하고 있는데요. 이에 대한 기본적인 내용은 아래 글을 참조해 주세요. >> Scaffold SnackBar Floating Action Button구현 # Android Jetpack Compose UI Part3 1. Drawer에 표현할 메뉴들 Enum Class로 정의하기 Drawer에 들어올 메뉴들을 미리 정의해 놓았습니다. sealed class로 정의하면, 다이나믹한 데이터를 추가할 수 있지만, enum Class로 들어오면, iterate.. 2022. 11. 16.
Scaffold, SnackBar 그리고 FloatingActionButton 정리 # Jetpack Compose UI Part3 지난 글에서는 Jetpack Compose의 중요한 개념인 State에 대해서 정리하였는데요. 이번 글에서는 Scaffold를 이용해서 머리티얼디자인을 사용하는 방법에 대해서 정리해 보도록 하겠습니다. Jetpack Compose의 지난 글 링크는 아래와 같습니다. >> Jetpack Compose 기본 UI Part1 # Color Card Modifier Column Row >> Jetpack Compose 기본 UI Part2 # State TextField 1. Scaffold Layout 1-1. Scaffold Layout Scaffold 는 Material Design 구조가 적용되어 있는 레이아웃입니다. 이 레이아웃을 이용하면 화면에 Material Design 컴포넌트들을 적절하게 넣을 .. 2022. 11. 15.
State 를 이해하고 TextField 구현하기 # Jetpack Compose UI Part2 지난 글에 이어서 Jetpack Compose 기본 UI Part2에서는 State 에 대해서 다루고, 이를 이용해 TextField를 구현해 보도록 하겠습니다. 지난 part1 글은 아래 링크를 참조해주세요. >> Jetpack Compose UI Part1 # Color Card Modifier Column Row 1. State 1-1. State State의 의미는 상태인데요. 현재 UI의 상태를 의미합니다. UI는 유저나 네트워크의 응답등 따라서 변경된 상태가 반영되어야 하는데요. Composable 함수는 이렇게 변화된 상태를 나타낼 때, 변경된 Value를 가지고 관찰하고 있는 State를 통해 Notify를 받고 그 값을 이용해 Composable함수를 재호출합니다. 이 과정에서, Comp.. 2022. 11. 14.
Android 리소스 정리시 사용하는 Naming Convention 오늘은 Android 리소스 Naming Convention에 대해서 정리해 보도록 하겠습니다. 여기서 사용한 naming 규칙은 개인적으로 정리한 것이니 참조만 해 주세요. 1. Drawable Naming drawable에 들어가는 이미지 파일들의 prefix에는 아래와 같은 타입들을 사용해 주는데요. 가능하다면, "이미지구분_무엇_어디에서" 순서로 정해서 사용하는 것이 좋습니다. 구분 Prefix 예 Button btn_ btn_download Icon ic_ ic_like_feed Launcher Icon ic_launcher ic_launcher_myapp Menu menu_ menu_more CheckBox chb_ chb_alarm Tab ic_tab ic_tab_something 2022. 11. 12.
Jetpack Compose UI Part1 # Color Card Modifier Column Row 오늘은 안드로이드 Jetpack Compose에 대해서 알아보고, 기본적인 UI API들에 대해서 정리해 보겠습니다. 1. Android Jetpack Compose 1-1. NoXML, welcome functions 이제 xml 필요없이 kotlin만으로, Android의 UI까지 개발할 수 있게 되었는데요. 만약, 텍스트, 라디오 버튼의로 구성된 UI가 가로로 있다고 가정해 보겠습니다. 이전에는 xml로 UI를 구성하고, 그것의 reference를 Kotlin코드에서 가져와서, 응답이나 반응등을 코드에서 구현하였는데요. background 이미지를 바꾸거나, 색을 변경해 주었습니다. 이제는 아래와 같은 코드로 UI를 구성하게 되었습니다. Compose에서는 UI 요소들은 더이상 객체가 아니라 함수입.. 2022. 11. 11.
SQLite NodeJS 모듈 이용해서 CRUD 구현하기 # DBBrowser SQLite3 오늘은 SQLite 데이터베이스에 대해 알아보고, NodeJS에서 SQLite3 모듈을 활용해, CRUD (생성, 읽기, 업데이트, 삭제) 작업을 구현해 보겠습니다. 1. SQLite 1-1. SQLite SQLite는 C언어로 개발된 라이브러리입니다. 크기가 작고 속도가 빠르며 상대적으로 안정적인 특성을 가진 SQL 데이터베이스 엔진인데요. 이러한 장점 덕분에 전 세계에서 가장 널리 사용되는 데이터베이스 엔진 중 하나로 자리잡았습니다. SQLite의 핵심 특징 중 하나는 모든 데이터베이스 정보를 단 하나의 파일에 저장한다는 점입니다. 이로 인해 여러 테이블, 인덱스, 스키마 등을 포함한 모든 데이터를 한 파일 안에 담을 수 있으며, 데이터베이스 서버를 별도로 구동할 필요 없이 파일 하나로 쉽게 데이터베.. 2022. 11. 8.
Room DB 에 DB파일 넣어서 사용하기 # 로컬데이터베이스 SQLite 오늘은 RoomDB에 미리 데이터를 넣어서 사용하는 방법에 대해서 정리해 보도록 하겠습니다. 참고로 이 글은 RoomDB를 알고 있어야 이해할 수 있으므로, Room에 관한 기본적인 사항은 아래 글을 참조해 주세요. >> Room Persistence Library 총정리 # Android SQLite 1. SQLite 파일 1-1. Room 과 SQLite Room에 대한 설명을 보면, SQLite위에 추상레이어를 제공하는 라이브러리라는 설명이 나옵니다. RoomDB에 디비파일을 미리 넣을 때 어떤 파일을 넣어야 하는지 감이 옵니다. 바로 SQLite db파일입니다. 1-2. SQLite 파일 생성 만약 NodeJS의 Express Django같은 프레임워크를 사용한다면, SqLite3 모듈을 이용해서.. 2022. 11. 4.
CSS Selector 와 함께 사용하는 Document API 정리 # textContent innerText querySelector 오늘은 CSS Selector 와 이를 활용해서 자주 사용하는 Document Elements API 에 대해서 정리 해 보도록 하겠습니다. 1. CSS Selector Selector를 볼 때, element, class, id, attribute에 대해서 잘 구분해 보아야 합니다. 특정한 모듈을 사용할 때 API에 항상 친절하게 설명되어 있지는 않기에, 부족한 부분은 검색을 해야 하는데요. 이 때 정확한 명칭을 알고 있으면 좀 더 빠르게 정보를 얻을 수 있습니다. Selector 타입 예 의미 .class .infoArea class가 infoArea .class1.class2 .info1.info2 class attribute에 name1과 name2가 들어간 것을 찾는다. #id #tab1 id가.. 2022. 11. 3.
Time Picker 와 Date Picker Compose 로 구현하기 # Android Jetpack Picker 오늘은 Jetpack Compose로 Time Picker 와 Date Picker 를 구현하는 방법에 대해서 정리해 보도록 하겠습니다. 이 글에서 사용하는 API는 특별히 Jetpack Compose 만의 API는 아니구요. 예전부터 사용되던 API인데, ComposeUI에서 가져다가 State에 저장해서 사용하는 방법입니다. 언젠가는 구글에서 JetpackCompose만의 API가 나올지도 모르겠지만, 아직은 기존의 API를 가져다가 사용해야 합니다. 1. TimePicker 1-1. TimePickerDialog API TimePicker Dialog는 API1부터 존재해오던 API입니다. 이 클래스의 생성자를 보면, 다음과 같이 OnTimeSetListener 콜백을 넣어주어야 한다는 것을 알 수.. 2022. 10. 31.
Android 에서 동적 권한 얻기 # State registerForActivityResult Runtime Permission 안드로이드를 앱을 개발하면서, 부딛히는 어려움 중 하나는, 바로 Runtime Permission 입니다. 이 글을 쓰고 4년뒤인 지금 Kotlin코드로 다시 업데이트하였는데요. Android OS버전이 올라가면서 유저에게 승인받아야 할 권한은 계속 늘어나고 있습니다. (심지어 Notification도 권한을 받아야 한다고 하는군요.) Runtime Permission은 External Storage와 관련된 작업인, 주소록이나, DB파일 혹은 이미지캐쉬를 저장하거나, 위치를 사용하는 앱일 경우에는 반드시 넘어야 할 산인데요. 오늘은 유저에게 외부저장소의 읽고 쓰기에 대해 동적으로 권한을 요청하는 것을 가지고 정리해 보도록 하겠습니다. 1. Manifest 선언먼저 먼저 Manifest에서 권한을 얻는다.. 2022. 10. 24.
ConstraintLayout 을 Compose 로 구현하는 방법 # Android 오늘은 Compose를 이용해서, Constraint Layout의 구현방법에 대해서 정리해 보도록 하겠습니다. 1. ConstrainLayout 라이브러리 constraint layout을 이용하기 위해서는, 아래와 같이 app레벨의 build.gradle에서 라이브러리를 implement 해 주어야 합니다. implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1" 2. ConstraintSet ConstraintLayout을 사용하기 위해서, UI에 id를 부여해서 사용하는데요. 아래처럼 createRefFor()함수로 reference를 생성한다음, constrain()함수에 인자로 넣어서 사용합니다. constrain람다 .. 2022. 10. 20.
Navigation 과 Bottom Navigation 구현방법 정리 # Jetpack Compose 이 글은 예전에 작성된 글로서, 주제가 방대하여서 Navigation과 Bottom Navigation 의 구현방법을, 아래 2개의 글로 분리하여 정리하였습니다. 1. Navigation 구현방법 Navigation 구현방법은 아래 글을 참조해 주시면 되구요. >> Navigation 구현 방법 총정리 # Route Jetpack Compose Navigation 구현 방법 총정리 # Route Jetpack Compose 오늘은 Jetpack Compose 에서 구현하는 Navigation 에 대해서 정리해 보도록 하겠습니다. 1. Navigation Library 가장 먼저 준비할 것은 navigation 구현을 위해 라이브러리를 implement 하는 것 입니다. 아래의 라이 developer88... 2022. 10. 19.

티스토리툴바