본문 바로가기

[Android]/App UI 따라 만들기

(18)
[배달의민족2] 클론코딩 - 4. 약관 상세 화면(Domain 레이어) 안녕하세요! 허접 샴푸입니다. 이번 편은 약관 상세 화면입니다. 글이 매우 길어지는 것 같아 Domain 레이어에 대해서만 먼저 설명하도록 하겠습니다. [만들고자 하는 화면] 1. 이용약관 화면 2. 과거 약관을 선택할 수 있는 하단 팝업 화면 [필요 사전 지식] 1. 안드로이드 2. 코틀린 * 일단 사전 지식이 없더라도 따라 만들면서 부족한 점은, 인터넷 찾아보면서, 학습하시면 됩니다. [내용] 1. ViewModel, ViewModelFactory 2. MVVM, MVI 디자인 패턴 3. ViewPager2 4. UI (Event + State), State Pattern 5. Flow, Observable Pattern 6. Fragment간 통신 7. Clean Architecture, Andro..
[배달의민족2] 클론코딩 - 3. 약관 상세 화면(Data 레이어) ㄹ안녕하세요! 허접 샴푸입니다. 이번 편은 약관 상세 화면입니다. 글이 매우 길어지는 것같아 Data 레이어에 대해서만 먼저 설명하도록 하겠습니다. [만들고자 하는 화면] 1. 이용약관 화면 2. 과거 약관을 선택할 수 있는 하단 팝업 화면 [필요 사전 지식] 1. 안드로이드 2. 코틀린 * 일단 사전 지식이 없더라도 따라 만들면서 부족한 점은, 인터넷 찾아보면서, 학습하시면 됩니다. [내용] 1. ViewModel, ViewModelFactory 2. MVVM, MVI 디자인 패턴 3. ViewPager2 4. UI (Event + State), State Pattern 5. Flow, Observable Pattern 6. Fragment간 통신 7. Clean Architecture, Android..
[배달의민족2] 클론코딩 - 2. 약관 동의 화면 안녕하세요! 허접 샴푸입니다. 이번 편은 먼저 약관 동의 화면입니다. [만들고자 하는 화면] 1. 권한 동의 화면 2. 이용약관 화면(일부 설정만) [필요 사전 지식] 1. 안드로이드 2. 코틀린 3. ViewBinding * 일단 사전 지식이 없더라도 따라 만들면서 부족한 점은, 인터넷 찾아보면서, 학습하시면 됩니다. [내용] 1. ViewModel 2. MVVM, MVI 디자인 패턴 3. ViewPager 4. UI (Event + State), State Pattern 5. Flow, Observable Pattern [시작] 그림, 색상 등과 관련한 리소스 관련 파일은 모두 맨 아래 나와있는 Github에서 확인할 수 있으니 따로 설명을 넣지 않았습니다. 1) 패키지 스트럭쳐 수정 - 기존 ui ..
[배달의민족2] 클론코딩 - 1. 스플래시 화면 안녕하세요! 허접 샴푸입니다. 오랜만에 다시 시작하고자 합니다. 처음부터 끝까지 한번 제대로 만들어보도록 하겠습니다. 이번 편은 먼저 스플래시 화면과 권한 체크를 하는 화면입니다. [만들고자 하는 화면] 1. 인트로 화면 2. 권한 동의 여부 다이얼로그 3. 권한 체크 팝업 [필요 사전 지식] 1. 안드로이드 2. 코틀린 3. Android Jetpack 4. 코루틴 * 일단 사전 지식이 없더라도 따라 만들면서 부족한 점은, 인터넷 찾아보면서, 학습하시면 됩니다. [목표] 1. Fragment 및 ResultListener 2. Jetpack Navigation 3. Permission check [시작] 1) Gradle 설정 - build.gradle (Module: app)에 위와 같이 ViewMo..
[배달의 민족] 따라만들기 11-1편(주문내역 화면) 안녕하세요 허접샴푸입니다! 항상 오랜만입니다... 오늘은 주문내역 화면을 간단하게 만들어보고자 합니다. (ViewPager2, TabLayout, Fragments) [배민 화면] 1. fragment_order.xml에 ViewPager2, TabLayout 및 레이아웃 수정 위와 같이 코드를 작성할 경우, Design Tab을 보시면 위 그림과 같이, tab_layout, pager이 생성된 것을 확인할 수 있습니다. 참고로 기존 TabLayout의 경우, TabIndicator의 폭이 해당 탭의 가로 최대 크기로 정해져 있습니다. 그래서 이것을 해제하기 위해 app:tabIndicatorFullWidth="false"로 설정하였으며, 인디케이터는 해당 탭의 각 탭 아이템 문자열 길이만큼의 폭을 가지..
[배달의 민족] 따라만들기 10-3편 (Dagger-Hilt) 안녕하세요! 허접 샴푸입니다. 오늘은 Dagger-Hilt 3편입니다! 지난 포스트 (2편)에서 이어 나가겠습니다. 가장 먼저 기본적인 세팅을 끝났으니, 이제는 무엇을 모듈로 만들지를 정해야 합니다. 가장 먼저 저희는 Repository를 모듈로 만들고자 합니다. 1) RepositoryModule 생성 먼저 "di"라는 package를 생성 후 RepositoryModule 코틀린 파일을 만듭니다. (Object) 2) Dagger-Hilt 속성 작성 위와 같이 작성을 해줍니다. Module은 단순히 Dagger 그래프를 위해 @Module이라고 Annotation 작업을 한 클래스입니다. 모듈 안에서 의존성들을 @Provides Annotation과 함께 정의할 수 있습니다. Repository Pa..
[배달의 민족] 따라만들기 10-2편 (Dagger-Hilt) 안녕하세요! 이번 편에서는 코드를 수정하도록 하겠습니다. Dagger-Hilt에 관해서는 아래 링크인 공식문서를 참고해보시기 바랍니다. dagger.dev/hilt/quick-start Quick Start Guide Introduction Hilt makes it easy to add dependency injection to your Android app. This tutorial will guide you through bootstrapping an existing app to use Hilt. For more on the basic concepts of Hilt’s components, check out Hilt Components. Gradle vs non dagger.dev 그럼 저희 코드에 ..
[배달의 민족] 따라만들기 10-1편 (Dagger-Hilt) 안녕하세요! 무책임하게 다음 글을 올리지 않았습니다. 처음부터 다시 차근차근 같이 만들어 가보도록 하겠습니다. 이번 편은 시간이 지남에 따라, 몇몇 업데이트 및 MVVM의 꽃인 Dependency Injection(의존성 주입) 프레임워크인 Dagger Hilt를 사용하도록 하겠습니다. [버전 업데이트 관련] 저도 오랜만에 Github에서 코드를 다운로드하여 실행해보았으며 문제없이 작동이 되는 것을 확인하였습니다. 먼저 오랜만에 프로젝트를 열었기 때문에 build.gradle 파일 내에 몇몇 버전이 업데이트되었습니다. 굳이 일일이 다 짚고 넘어갈 필요가 없기 때문에 업데이트한 프로젝트 파일을 깃허브에 올려놓았습니다.(아래 링크 참조) 필요시 해당 깃허브에서 프로젝트를 다운로드하시고 현재 글을 보며 따라 ..