[Android]/App UI 따라 만들기 (18) 썸네일형 리스트형 [배달의 민족] 따라만들기 9편 (RecyclerView, ListAdapter, DIffCallback, Flexbox, Glide) 안녕하세요 허접 샴푸입니다~! 오랜만에 배달의 민족 따라 만들기 9편입니다! 이번 시간에 구현할 것은 아래 뭐 먹지 화면입니다. 물론 실제 배달의 민족 앱에서는 그림이 아닌 동영상이지만, 저는 동영상을 그림으로만 표시하였습니다. 동영상을 재생하기 위해서는 ExoPlayer을 사용해야 하는데 이는 추후에 다루도록 하겠습니다. 아래 화면을 구현하기 위해서는 RecyclerView + Adapter, Glide, Flexbox라고 생각됩니다. [START] 1. 뭐 먹지 리스트용 Fake 데이터이며 이에 맞는 Data class를 작성합니다. title, imageUrl, tags라는 String 변수들입니다. [예 - 왼쪽 그림을 예시로...] title : "캠핑한끼 리얼 까르보나라" imageUrl : .. [배달의 민족] 따라만들기 8-2편 (Repository, ViewModel, MVVM) 안녕하세요 허접샴푸입니다~! 오랜만에 배달의 민족 따라 만들기 8편입니다! 이번 시간에 구현할 것은 안드로이드 앱 아키텍처 패턴의 일부인 Repository와 ViewModel을 작성해보겠습니다. Guide to app architecture https://developer.android.com/jetpack/docs/guide#common-principles 불러오는 중입니다... 위 문서를 보다 보면 제일 중요하게 봐야 할 것이 아래 그림입니다. Activity나 Fragment는 ViewModel에 의존하고 ViewModel은 Repository에 의존하고 Repository는 Room(Sqlite database library)이나 Retrofit 클래스와 같은 여러 다른 클래스에 의존합니다. 이.. [배달의 민족] 따라만들기 8-1편 (Navigation, BottomNavigationView) 안녕하세요 허접샴푸입니다~! 오랜만에 배달의 민족 따라 만들기 8편입니다! 이번 시간에 구현할 것은 Fragment + BottomNavigationView입니다. 이전까지는 아래 그림과 같이 Drawer을 구현하였었죠? 그런데 최신 "배달의 민족" 앱은 Drawer 대신 아래 오른쪽 그림과 같이 Bottom navigation View를 사용하더라고요? 제 개인적인 생각은 - 엄밀히 따지면, Bottom Navigation View가 아닌 커스텀 Layout으로 Bottom Tab을 만든 것 같습니다. 그런데 저희는 100% 따라 할 것이 아니고 느낌만 가져갈 것이기 때문에 일일이 모두 커스터마이징 하기보다는 이미 잘 만들어져 있는 view를 사용할 것입니다. 그것이 바로 BottomNavigation.. [배달의 민족] 따라만들기 7편 (DrawerLayout, Customization) 안녕하세요 허접샴푸입니다~! 배달의 민족 따라만들기 7편입니다! 이번 시간에 알아볼 것은 바로 아래와 같습니다. - DrawerLayout [자료] 위와 같이 왼쪽에서 슬라이드되는 서랍레이아웃 즉 DrawerLayout에 대해 구현해보도록 하겠습니다. 이번 편은 XML 위주의 따라하기 입니다. 참조: https://developer.android.com/reference/androidx/drawerlayout/widget/DrawerLayout DrawerLayout | Android 개발자 | Android Developers From class android.view.ViewGroup void addChildrenForAccessibility(ArrayList arg0) void addFocusabl.. [배달의 민족] 따라만들기 6편 (Android Animation, NestedScrollView SmoothScrollTo, Kotlin Extension Function) 안녕하세요 허접샴푸입니다~! 배달의 민족 따라만들기 6편입니다! 이번 6편에서는 전체 Main 레이아웃을 완성시켰습니다. 이번 시간에 알아볼 것은 바로 아래와 같습니다. - ScrollView Animation [자료(구현할 것)] 1. 5편 이후로 나머지 Layout을 완성시킨 다음, 아래 GIF 보면, "자세히보기"를 눌렀을 때 여러 글이 적혀져 있는 Layout이 Animation을 이용하여 스르륵 나타났다가, "닫기"를 누르면 다시 스르륵하고 사라집니다. 이 부분을 구현해보도록 하겠습니다. [참고] 절대 실제 배달의 민족 App과 똑같이 구현하는 것이 아닌 최대한 비슷하게 구현하는 것이 목표입니다. 제가 고수였으면 100프로 똑같이 구현할텐데... 너그럽게 봐주십시오... LETS GO! [시작].. [배달의 민족] UI 따라만들기 5편 (ObjectAnimator, Layout Animation, CoroutineScope) 안녕하세요 허접샴푸입니다~! 배달의 민족 따라만들기 5편입니다! 이번 5편에서는 잠시 쉬어가기 느낌으로 Animation을 구현하도록 하겠습니다. (얻어갈 수 있는 것 - 제 마음대로 끄적인...) - ObjectAnimator - LayoutAnimation - CoroutineScope [자료(구현할 것)] 1. 아이콘들이 Animation에 따라 화면에 나타납니다. (아래에서 위로, RecyclerView에 Animation을 적용하고자 합니다. 이미지 배너 아래에서 위로 Animation은 다루지 않습니다.) 2. ImageView Animation(덜컹덜컹 Animation) [참고] 절대 실제 배달의 민족 App과 똑같이 구현하는 것이 아닌 최대한 비슷하게 구현하는 것이 목표입니다. 제가 고수.. [배달의 민족] UI 따라만들기 4편 (NestedScrollView, RecyclerView, GridLayoutManager, ViewModel, Livedata, and etc) 안녕하세요 허접샴푸입니다~! 배달의 민족 따라만들기 4편입니다! 4편에서는 Grid 형태의 RecyclerView를 구현하도록 하겠습니다. (얻어갈 수 있는 것 - 제 마음대로 끄적인...) - Grid RecyclerView - NestedScrollView - 둥근 Rectangle - Custom Layout [자료] 위처럼 둥근 모서리의 사각형 안에 Grid 형태의 RecyclerView를 만들어보도록 하겠습니다. 보너스로 "우리동네 맛집 검색" Layout 또한 만들어보도록 하겠습니다. LETS GO! [시작] (1) GridItem 생성 - 1편에서 이미지 배너를 위해 BannerItem 객체 클래스를 만든 것처럼 이번에도 GridItem이란 객체 클래스를 만들어줍니다. (2) FakeItem.. [배달의 민족] UI 따라만들기 3편 (Viewpager2, Coroutine, LifecycleScope) 안녕하세요 허접샴푸입니다~! 배달의 민족 따라만들기 3편입니다! 3편에서는 자동으로 스크롤 되는 ViewPager2에 대해 알아 보도록 하겠습니다. 구글에서 밀고 있는 Coroutine을 사용하도록 하겠습니다. [자료] 지난 2편에서는 좌우로 Swipe 되는 이미지 배너를 구현하였죠? 이번 편에서는 좌우로 손을 대지 않아도 알아서 Swipe 되도록 하겠습니다. 잘 아시겠지만 자동이라고 하면 결국 thread 를 사용해야 하는데 구글에서 권장하고 있는 놈이 바로 Coroutine입니다. 즉 유저는 앱을 사용하고 있으면서, 이미지 배너는 자동으로 Swipe 되는 비동기 처리가 되어야 합니다. 이에 적합한 것이 바로 Coroutine 입니다. 그리고 LifecycleScope를 사용하여 편하게 만들어 보도록 .. 이전 1 2 3 다음
