본문 바로가기

[Android]/App UI 따라 만들기

[배달의 민족] UI 따라만들기 1편

안녕하세요 허접샴푸입니다~!

Tistory가 워낙 오류가 많아서 글이 몽땅 날라가는 경우가 허다하네요 ㅋㅋ.

정말 짜증나 미쳐버리겠습니다. 한두번도 아니고;;

원래 매우 정성스럽게 작성했었는데...

 

암튼 다시 작성하도록 하겠습니다.

 

Programming에 대한 개념은 있으나, UI 짜는 방법을 몰라서 헤매고 있으신 분들을 위해 새로운 카테고리인 UI 따라 만들기를 만들었습니다.

첫편의 주인공은 배달의 민족입니다!

 

 

[자료]

 

배달의 민족 UI를 따라하도록 하겠습니다.

배달의 민족 App은 왼쪽 상단에 햄버거 아이콘이 있으며, 이를 클릭할때마다 왼쪽에서 Drawer(서랍)가 나왔다 들어가는 형태의 앱입니다.

그러나 모든 아이콘들을 클릭해보면, Drawer를 제외하고서는 모두 Activity가 새롭게 뜹니다.

즉 Fragment를 사용하여 클릭 이벤트 시 화면을 전환하는 것이 아닌 Activity를 매번 띄우는 형태라는 것입니다.

골치아픈 Fragment보다는 Activity를 사용하여 쉽게쉽게 개발하자? 이 마인드가 아니었을까 싶습니다.

 

새로운 Project를 생성 시 아래 그림 처럼 Navigation Drawer Activity를 선택하시면 안됩니다!

왜냐하면 위에 말했듯이, Navigation Drawer Activity는 1개의 Activity만 존재하고 Fragment들을 이용하여 화면을 전환시키는 방식인 반면에 배달의 민족 App은 모두 Activity로 실행되기 때문에 단순히 Empty Activity로 프로젝트를 생성하여 Customizing 하면 되기 때문입니다.

 

 

 

LETS GO!

[시작]

(1) Project 생성

BaeminPractice 라고 지었습니다.

 

(2) Custom Action Bar 제작

(결과화면)

Android Native ActionBar(보라색)가 나타나죠? 이것을 없애야겠죠?

 

(3) Android Natvie ActionBar 제거

styles.xml에서 Theme.AppCompat.Light.DarkActionBar --> Theme.AppCompat.Light.NoActionBar 로 변경해주세요.

(결과화면)

어때요 그럴싸하죠??

아이콘은 제가 똑같은 그림이 없어서 대충 비슷한 것으로 하였으며, 앞으로도 그림 관련해서는 대충 비슷한 아이콘으로 채워서 실습하도록 하겠습니다. 양해 부탁드리겠습니다.

 

 

<번외 - Android Asset 아이콘 추가하기>

이런식으로 아이콘을 추가하여 사용하시면 됩니다!

 

 

다음 2편에서는 

자동 스크롤 되는 Image Banner 를 ViewPager2를 이용하여 구현하도록 하겠습니다!

많은 관심과 사랑 부탁드립니다...

혹시 이 외에도 만들고 싶으신 UI가 있는데 도저히 어떻게 만드는지 모르겠으면 댓글로 남겨주시면 제가 해결해드리겠습니다!

그럼 2편에서 봐요~!

 

https://github.com/DJDrama/BaeminPractice

 

DJDrama/BaeminPractice

Contribute to DJDrama/BaeminPractice development by creating an account on GitHub.

github.com