본문 바로가기

UI

(4)
[배달의 민족] 따라만들기 8-1편 (Navigation, BottomNavigationView) 안녕하세요 허접샴푸입니다~! 오랜만에 배달의 민족 따라 만들기 8편입니다! 이번 시간에 구현할 것은 Fragment + BottomNavigationView입니다. 이전까지는 아래 그림과 같이 Drawer을 구현하였었죠? 그런데 최신 "배달의 민족" 앱은 Drawer 대신 아래 오른쪽 그림과 같이 Bottom navigation View를 사용하더라고요? 제 개인적인 생각은 - 엄밀히 따지면, Bottom Navigation View가 아닌 커스텀 Layout으로 Bottom Tab을 만든 것 같습니다. 그런데 저희는 100% 따라 할 것이 아니고 느낌만 가져갈 것이기 때문에 일일이 모두 커스터마이징 하기보다는 이미 잘 만들어져 있는 view를 사용할 것입니다. 그것이 바로 BottomNavigation..
[배달의 민족] UI 따라만들기 3편 (Viewpager2, Coroutine, LifecycleScope) 안녕하세요 허접샴푸입니다~! 배달의 민족 따라만들기 3편입니다! 3편에서는 자동으로 스크롤 되는 ViewPager2에 대해 알아 보도록 하겠습니다. 구글에서 밀고 있는 Coroutine을 사용하도록 하겠습니다. [자료] 지난 2편에서는 좌우로 Swipe 되는 이미지 배너를 구현하였죠? 이번 편에서는 좌우로 손을 대지 않아도 알아서 Swipe 되도록 하겠습니다. 잘 아시겠지만 자동이라고 하면 결국 thread 를 사용해야 하는데 구글에서 권장하고 있는 놈이 바로 Coroutine입니다. 즉 유저는 앱을 사용하고 있으면서, 이미지 배너는 자동으로 Swipe 되는 비동기 처리가 되어야 합니다. 이에 적합한 것이 바로 Coroutine 입니다. 그리고 LifecycleScope를 사용하여 편하게 만들어 보도록 ..
[배달의 민족] UI 따라만들기 2편 (Viewpager2, Livedata, Viewmodel) 안녕하세요 허접샴푸입니다~! Programming에 대한 개념은 있으나, UI 짜는 방법을 몰라서 헤매고 있으신 분들을 위해 새로운 카테고리인 UI 따라 만들기를 만들었습니다. 주인공은 배달의 민족입니다! 이번 편은 2편입니다! [자료] 이번 편은 위에 좌우로 Swipe 되는 이미지 배너를 구현하도록 하겠습니다. Viewpager를 사용해야 합니다. 참고로, 현재는 Viewpager2가 있으며 저는 Viewpager2를 이용하도록 하겠습니다! Viewpager2는 기존 Viewpager의 PagerAdapter를 RecyclerView.Adapter로 대체되었기 때문에 RecyclerView 사용법만 알면 Viewpager2는 식은죽 먹기입니다! Viewpager2 : https://developer.a..
[배달의 민족] UI 따라만들기 1편 안녕하세요 허접샴푸입니다~! Tistory가 워낙 오류가 많아서 글이 몽땅 날라가는 경우가 허다하네요 ㅋㅋ. 정말 짜증나 미쳐버리겠습니다. 한두번도 아니고;; 원래 매우 정성스럽게 작성했었는데... 암튼 다시 작성하도록 하겠습니다. Programming에 대한 개념은 있으나, UI 짜는 방법을 몰라서 헤매고 있으신 분들을 위해 새로운 카테고리인 UI 따라 만들기를 만들었습니다. 첫편의 주인공은 배달의 민족입니다! [자료] 배달의 민족 UI를 따라하도록 하겠습니다. 배달의 민족 App은 왼쪽 상단에 햄버거 아이콘이 있으며, 이를 클릭할때마다 왼쪽에서 Drawer(서랍)가 나왔다 들어가는 형태의 앱입니다. 그러나 모든 아이콘들을 클릭해보면, Drawer를 제외하고서는 모두 Activity가 새롭게 뜹니다. ..