Android Studio 연습용 어플 구현 (Activity 전환)

안녕하세요~ 이번 포스팅에서는 안드로이드 스튜디오를 이용한 아주 심플한 연습용 앱을 만들고 실행해 보려고 합니다.

예시용 앱을 하나 정해두고, 디자인을 하고 코딩을 해 나가면서 하나하나 분석하며 공부해 보는 것도 안드로이드에 관해 공부할 수 있는 좋은 방법 중 하나라고 생각합니다. 그럼 간단하게 이번에 연습해볼 앱에 관해 소개해 보겠습니다. 내용은 Activity와 Activity 간의 전환에 관한 내용을 주제로 하려 합니다. 앱의 설명이 끝난 후 제 소스와 함께 Activity에 관한 내용을 알아보겠습니다.

 

처음 앱을 실행하면 나오는 화면입니다. Start라고 적혀있는 문구가 보이네요.

사진1 MainActivity

사실 Start!라고 적힌 텍스트는 버튼 뷰입니다. 저 버튼을 눌러보겠습니다.

 

사진2 Green

 

사진3 Yellow

사진4 Red

처음 Start! 버튼을 누르면 세 개의 버튼을 포함하고 있는 초록색 화면이 나오게 되네요. 그리고 NEXT를 누를 때마다 색이 변합니다.

빨간색에서는 다시 초록색 화면으로 넘어가게 되는군요. 그러던 중 MAIN을 누르면 맨 처음 Start! 버튼을 가지고 있던 화면으로 돌아가게 됩니다. AUTO는 현재 아무런 기능을 가지고 있지 않습니다. 지금은 구현하지 않도록 하겠습니다. 

지금 설명드린 앱이 오늘 구현해볼 연습용 앱입니다. 저는 AUTO 기능을 넣지 않았지만 원하시는 분은 AUTO를 클릭하면 NEXT를 클릭하지 않아도 자동으로 색이 변하도록 구현해 주시면 됩니다. 각자의 방법대로 만들어 봅시다.

 

제가 만든 코드는 설명과 함께 기재해 보겠습니다.

 

우선은 Empty Activity를 선택해 프로젝트를 생성합니다.

그리고 MainActivity가 있는 폴더에 세 개의 Activity를 추가해 주었습니다.

 

사진5 Activity

'초록, 노랑, 빨강' 각각의 색을 나타내는 Activity를 포함하는 class가 생성되었습니다.

그 뒤 layout의 폴더에 xml파일을 추가해 줍니다.

사진6 layout

저는 맨 처음 하나의 파일만 만들어 주고 속성을 추가해 준 다음 복사 붙여 넣기를 사용해 이름만 바꿔주었습니다.

먼저 activity_main.xml 파일의 내용을 살펴보겠습니다.

 

사진7 activity_main

아주 간단하군요. Button 하나만이 가운데에 자리를 잡고 있습니다. 저는 레이아웃으로 constraintLayout을 사용하였는데, 이 레이아웃은 뷰와 뷰, 혹은 뷰와 뷰 그룹끼리 연결할 때 사용합니다. 좀 더 자세한 내용은 다음에 공부해 보기로 하고 일단은 레이아웃의 가장자리에 아래와 같이 연결해 줍니다.

 

사진8 constraintLayout

그 외 버튼의 속성들을 살펴보면 Button_Start라는 id를 가지고 있고, 높이와 넓이로 wrap content를 가지고 있습니다. text는 Start! 가 쓰여있고 textAllCaps는 flase를 가지고 있습니다. 여러 가지가 있어 보이지만 사실 Start!라는 텍스트를 가진 버튼을 추가해 주고 id값을 넣어준 것이죠.

 

그다음 activity_green.xml의 내용을 대표로 살펴보겠습니다.

사진9 activity_green

마찬가지로 constraintLayout을 사용하였고, 세 개의 버튼이 보입니다. 각각 Back_To_Main, Button_Next, Button_Auto의 id값을 가지고 있습니다. 텍스트는 MAIN, NEXT, AUTO를 보여주고 있습니다. 저는 constraint로 MAIN과 AUTO는 layout의 양쪽 끝 그리고 바닥으로 연결해 주었고, NEXT는 바닥과 양쪽의 버튼으로 연결해 주었습니다. 높이, 넓이는 모두 wrap_content를 가지고 있네요. 나머지 두 개의 파일은 복사 붙여 넣기로 해결하며 다르게 주어야 할 속성은 android:background 속성이 되겠습니다. 안드로이드 색상표에 맞추어 각 화면의 색을 설정해 주었습니다.

 

이제부터는 class파일로 넘어가겠습니다. 위의 내용은 대부분이 지난번에 다루었던 layout속성의 내용들이었기 때문에 자세한 설명은 생략하였지만 앞으로 볼 내용은 좀 더 구체적인 설명을 붙여 보려 합니다. 

 

파일을 살펴보기 전에 Activity에 대해 먼저 설명을 드리자면, Activity란 앱의 화면을 구성하는 기본적인 단위라고 할 수 있겠습니다. 앱을 맨 처음 실행하면 나오는 화면, 다른 곳으로 넘어갔을 때 전환되는 화면이 바로 Activity라고 볼 수 있습니다. 사실 Activity와 함께 좀 더 유연한 UI를 구성하기 위해 Fragment라는 요소 또한 많이 사용하긴 하지만 이번 시간에는 Activity에 관해서만 공부하려 합니다. 

 

위에 있는 앱 설명에서 나왔듯이, Main화면, 초록색 화면, 노란색 화면, 빨간색 화면이 모두 액티비티라고 보면 되는 것이죠. 실제로 이름에도 모두 Activity가 포함되어 있습니다. 그럼 제 첫 번째 화면인 MainActivity는 어떻게 코딩되어 있는지 살펴보겠습니다.

 

사진10 MainActivity

우선은 가장 윗줄에 패키지가 있습니다. 패키지는 현재 파일이 들어있는 폴더라고 보시면 쉽습니다. 포스팅 위쪽에 있는 사진 5를 보시면 패키지 명과 일치하는 폴더 안에 MainActivity 파일이 존재하는 것을 확인할 수 있습니다. 

 

다음은 import 부분입니다. import는 현재 패키지가 아닌 다른 패키지를 불러올 때 사용합니다. 다른 곳에 있는 필요한 클래스 등을 사용하고 싶을 때 import를 사용해 해당 패키지를 불러와 그 안의 클래스를 사용할 수 있게 되는 것입니다. 

 

그 아래부터는 AppCompatActivity를 상속받는 MainActivity를 볼 수 있습니다. 이 class안에서 가장 먼저 보이는 함수 onCreate가 보이는데요 이 함수는 Activity의 수명주기에서 볼 수 있는 콜백 함수입니다. 오늘은 일단 앱의 구현 자체를 중점으로 보기 위해 위의 내용에 관한 좀 더 깊은 설명은 다음번에 공부해 보도록 하겠습니다.

 

onCreate함수 안에 Button이 정의되어 있고 기능까지 구현되어 있는 것을 볼 수 있습니다. 간단하게 좀 더 설명하자면, Button객체가 되는 button_start변수를 생성하고 xml파일에 있는 버튼의 아이디인 Button_Start를 연결해 주었습니다. 또한 setOnClickListener를 사용하였는데 말 그대로 클릭을 하는지 귀를 기울이고 있는 녀석이라고 생각하면 쉽게 이해할 수 있습니다.

 

그 아래에 있는 onClick함수는 클릭을 감지했을 때 불려 오는 콜백 함수이며 그 안에 Intent를 이용해 다른 Activity로 넘어가는 기능을 구현하고 있는 것을 보실 수 있습니다. Intent는 안드로이드 앱을 구성하는 요소들이 있는데 그 요소들 간에 정보를 전달해 줍니다. 이번에 Intent는 Activity를 전환하기 위해 쓰였고 버튼을 클릭하는 순간 Intent를 이용해 Activity가 전환되는 것입니다.

 

사진11 GreenLightActivity

 

여기까지 왔으면 나머지 코드는 위와 마찬가지로 비슷한 코드들의 반복이기에 어렵지 않게 됩니다. GreenLightActivity를 대표적으로 보자면 button_back과 button_next가 정의되어 있고 그 아래에 setOnClickListener가 구현되어 있는 것을 볼 수 있습니다. 사진 11과 사진 10의 클릭 리스너가 살짝 달라 보이는데 같은 내용입니다. 코드 라인 번호 오른쪽에 있는 +버튼 클릭하면 사진 10처럼 늘어납니다. 그저 표시만 간단하게 되었을 뿐이죠. NEXT를 누르면 YellowLightActivity로, BACK을 누르면 MainActivity로 이동하게 됩니다. 

 

위의 내용을 다른 색의 Activity도 똑같이 적용해 주고, NEXT를 눌렀을 때 이동하는 액티비티만 바꿔주면 되겠네요 (Yellow에서 Red로, Red에서 Green으로). 그 외에는 특별히 달라지는 건 없습니다. 물론 잊지 말고 class의 이름을 바꿔주고, R.layout. 부분에 현재 Activity의 색과 일치하는 xml파일을 연결해 주는 것도 해주어야겠네요. 

 

마지막으로 AndroidManifest.xml 파일의 수정이 있겠습니다.

 

사진12 AndroidManifest.xml

 

위 사진과 같이 AndroidManifest.xml 파일에 들어간 뒤 <application> </application> 사이에 <activity android:name /> 부분을 추가해 주었습니다. 현재 3개의 Activity가 추가되어 있습니다. Manifest에 이러한 Activity를 사용하겠다고 선언해 주는 것이죠.

 

이렇게 해서 Activity 전환을 사용한 연습 어플이 제작되었습니다. 물론 이보다 더 깔끔하고 잘 짜인 코드가 있을 수 있습니다. 오늘은 말씀드린 대로 어플의 제작에 초점을 맞추어 포스팅을 했는데 앞으로는 Activity, 콜백 함수, Intent 등 이번 시간에 좀 더 자세하게 설명드리지 못한 내용에 관해서 공부해보는 시간을 가져보려 합니다. 또한 다음번에는 Auto의 기능까지 구현할 수 있도록 좀 더 공부를 해 보아야겠습니다. 그때는 Activity 대신 Fragment를 사용해 보려 합니다.

 

글에서 잘못된 내용이나 정보, 개선사항 지적해 주시면 아주 감사합니다.