네번째 프로젝트 만들기_02_코딩

디자인의 세부 조정은 제일 나중에 다시 하기로 하고 코드를 작성해 본다.

 

activity_main.xml의 디자인에 AFRICA, ASIA 버튼 2개만 있다.

디자인에서 africa, asia를 위한 액티비티 화면(.xml)과 코드파일(.kt)을 만들었다.

각 버튼을 누를 때 마다 해당 액티비티 화면으로 이동하도록 코딩한다.

 

버튼 등을 누를 때 다른 액티비티 화면으로 이동할 때는 Intent 를 사용한다.

두번째 프로젝트의 fragment 에서는 navigate()함수를 사용했다.

 

MainActivity 코딩

 

MainActivity.kt파일을 연다.

먼저 엑티비티 메인에 있는 buttonAfrica와 buttonAsia 버튼의 클릭을 감지하는 코드를 작성해야 한다.

onCreate()함수 안에 버튼 클릭 리스너를 작성한다.(연두색 박스)

계속해서 onCreate()함수 바깥에는 각 버튼 클릭을 감지했을 때 실행할 함수를 만든다.(하늘색 박스)

 

 

버튼 클릭 이벤트를 처리하는 방법이 이전과 다를 것이다.

어떤 차이가 있는 지 계속 확인해보자.

 

위 코드에서 버튼id 가 빨간색이다.

인식을 못하고 있다는 말이다.

이전에는 findViewById()함수로 찾아서 불러왔었다.

마우스를 가져가면 아래와 같은 메시지가 나온다.

 

'해결할 수 없는 참조'라고 되어 있다.

아래 Import 를 클릭한다.

 

새 코드가 import 되면서 빨간색이 사라졌다.

import는 코드 작성에 필요하거나 참조하는 library(라이브러리; 코드모음)이다.

여기서 import된 kotlinx.android~에서 kotlinx는 kotlin extension(코틀린 확장) 라이브러리 이다.

이 확장 라이브러리가 있으면 버튼을 찾기 위해 findViewById함수를 사용하지 않아도 자동으로 찾아준다.

코드가 엄청 간결하고 깔끔해졌다.

이래서 프로그래머들에게 인기 있는가 보다.

 

이제 버튼을 클릭하면 실행할 함수의 내용을 작성하면 된다.

대괄호{ } 안에 직접 작성해도 되지만 새로운 함수를 만들어서 따로 작성하기로 한다.

현재는 함수형 프로그래밍이 대세라고 한다.

이렇게 짧은 코드라도 함수로 만드는 버릇을 들이는 것은 좋은 습관이다.

 

buttonAfricaClick함수 부터 코딩한다.

액티비티 이동은 인텐트(Intent)를 사용한다.

 

 

19번줄: intent라는 변수를 만들고 그 안에 Intent 를 만들어 저장한다.

Intent 내용에서 this@MainActivity를 입력한다.

this(이것)는 '현재 클래스'를 나타낸다.

그 다음에는 쉼표로 구분하고 이동할 클래스(AfricaActivity)를 적는다. 

더블콜론(::)은 참조를 나타내며 class.java를 참조하라는 뜻이다.

 

20번줄: 만든 intent변수는 startActivity함수를 사용해서 실행한다.

 

AfricaActivity.kt , AsiaActivity.kt 코딩

 

activity_africa.xml 화면에는 PHOTO버튼 3개와 fab버튼 1개가 있다.

 

먼저 fab버튼 부터 코딩한다.

이 버튼을 클릭하면 해당 액티비티가 종료하도록(창이 닫히도록) 코딩할 것이다.

AfricaActivity.kt 파일로 이동한 후 onCreate() 안에 아래 코드를 입력한다.

 

여기서도 코틀린 확장 라이브러리를 사용하여 fab버튼 클릭이벤트를 간단하게 적을 수 있다.

finish()함수는 현재 액티비티를 종료하는 내부함수다.

 

AsiaActivity에도 같은 코드를 만든다.

코드를 복사해서 붙여넣고 fabAsia로 바꾼다.

 

이제 ADV(가상머신)으로 실행해서 africa , asia 버튼과 fab버튼이 작동하는지 테스트 해보자.

 

 

PHOTO버튼 액션 만들기

 

이제 photo버튼을 클릭하면 이미지를 보여주는 코드만 남았다.

 

AfricaActivity로 이동하여 아래 코드를 추가한다.

먼저 첫번째 버튼인 buttonAfrica_0 만 클릭이벤트 코드를 만든다.

 

imageViewAfrica에 이미지를 넣을 때는 setImageResource()함수를 사용한다.

괄호 안에 넣고 싶은 이미지가 있는 위치를 적는다.

 

여기까지 해도 되지만 버튼에 투명 기능을 추가해 본다.

첫번째 버튼(buttonAfrica_0)은 그대로 두고 나머지 버튼들은 투명도(alpha; 알파값)를 낮춰서 희미하게 보이도록 하는 코드이다.

 

 이 첫번째 단추만 완성한 후 테스트 해본다.

 

 

첫번째 버튼을 클릭하면 등록해 두었던 이미지가 나타난다.

다른 버튼들은 희미하게 나타난다.

만약 위 그림과 같이 버튼 오른쪽 부분이 사진에 가려 안보이면 아래와 같이 imageView를 ConstraintLayout 바로 아래로 이동시킨다.

 

위와 같이 이동하면 버튼 아래쪽으로 이미지가 옮겨지게 된다.

 

화면에 배치된 뷰들은 흔히 말하는 layer(레이어; 층)로 포개진 상태이다.

가장 바닥에 ConstraintLayout 이 있고 그곳에 들어 있는 background(배경)이 있다.

그 위에 imageViewAfrica

그 위에 linerLayout이 있고 그 안에 버튼3개가 있다.

그 위에 fab버튼이 있다.

 

이렇게 포개진 상태일 때는 이미지에 투명한 부분이 필요해진다.

그래서 안드로이드 스튜디오에서는 투명도 사용에 적합한 png 포맷의 그래픽 파일을 추천하는 것이다.

다시 실행해 보면 아주 보기 좋게 나타날 것이다.

 

테스트가 완료 되었으면 이제 나머지 버튼도 같은 방법으로 작성하면 된다.

다 됐으면 복사해서 AsiaActivity에도 적용하면 된다.

복붙한 후 id 이름만 잘 보고 수정하면 된다.

 

이후 작업은 충분히 완성할 수 있을 것으로 믿고 생략한다.

 

끝.

Wraven...