본문 바로가기
5번 프로그래밍/Kotlin, 안드로이드 스튜디오

안드로이드 스튜디오 - Udacity 챕터2, 3장 17절 Exercise Addind a Menu 연습 메뉴 추가

by 하늘나는 곰 2021. 6. 27.

시작부터 밑장 빼기하고 있는 동영상 강의가 있습니다.

 

바로 이곳에 있습니다.

 

17장은 about해서 흔히보이는 줄줄줄, 땡땡땡 부분을 눌러

어플의 정보를 보여주는 메뉴를 추가하는 것입니다.

 

동영상 강의 45초 부분

 

AboutFragment를 가져와서 ID를 변경 해줘야 할 것처럼 이야기 하더니

동영상 강의에서는 Label 부분의 이름을 바꾸고 있습니다.

 

동영상 강의 밑에 동영상 강의의 최신화 이야기를 하고 있는데

여기도 ID는 그대로 되어있습니다.

 

title_about_trivia로 바꾸라고 하네요.

여기서 영상이 너무 작고 빨리 지나가기에 잘 보이지 않지만,

동영상 강의 49초 부분에서

 

@string/title_about_trivia로 바꾸는 것을 알 수 있습니다.

 

@string을 쓰라는 이야기를 왜 빼는 건지 알 수가 없습니다.

 

메뉴라는 것을 만들기 위해서는

 

res -> 마우스 오른쪽 -> new -> Android ResoutrceFile을 누르면 됩니다.

 

동영상강의 1분 8초 부분에서 Menu name 부분을 써주는 부분인데

영상에서는 마우스 포인트에 강조표시 때문에 글자가 잘 보이지 않습니다.

 

동영상 자체를 키워주지 글자는 다 가리고 뭐하는 것인지 모르겠습니다.

 

menu File name을 overflow_menu로 만들어 줄 것입니다.

 

동영상 강의 1분 16초 부분입니다.

 

만들어진 overflow_menu. xml 디자인에서

menu item부분을 아래로 끌어 주면 Component Tree에 item이라고 생깁니다.

 

이 부분이 그렇게 특이하게 문제가 될 부분이 아닌데

activity_main 디자인에서 마우스로 끌어서 이동하는 부분이

표기가 생각보다 다른 것 같아 햇갈리지 않게

한번 더 보여주기 위해서 동영상으로 찍었습니다.

 

component Tree에 이동을 했을 때 menu item이라고 나오지 않고

그냥 item이라고 떠서 재대로했는지 안했는지 햇갈릴 것 같습니다.

 

동영상 강의 1분 27초 item의 속성을 변경해 줄 것입니다.

이런 것은 앞에서도 많이해서 이제 다들 숙달 되셨겠지만

레이아웃이 많이 다릅니다.

 

동영상에서 ID와 title을 변경한다고 하는데...

 

실제로 우리가 볼 레이아웃은 뭔가 상당히 복잡하게 되어있습니다.

 

title 칸은 바로 위에 보이지만 id칸은 잘 안보입니다.

그것을 눈으로 찾으려고 하지말고 돋보기 표시를 눌러서 id를 입력하는 편이 빠릅니다.

 

그래도 위치를 한번 보이 위해서 시선을 아래로 돌리니 중간 쯤에 있는게 보이긴 합니다.

 

이 부분을 동영상 강의와 같이 바꿔줍시다.

 

id = aboutFragment 입니다.

title = @string/about 입니다.

 

titleFragment.kt에서 setHasOptionsMenu(true) 코드를 작성해 준후

동영상 강의 2분 22초 부분에서 메서드 추가를 해줍니다.

 

이전 시간에서 했던 것이지만 안드로이드 스튜디오

메서드 추가 단축키는 ' 컨트롤 + o ' 입니다.

 

실제 우리 화면은 이렇게 뜨면서 onCreateOptionsMenu를 찾아야 합니다.

 

대소문자를 전부다 맞워서 쳐야 합니다.

onCreate까지만 검색을 하면 위에서 4번째 줄에 비슷해 보이는

onCreateContextMenu라는 것을 누를 수 있습니다.

 

위 사진을 보면 아시겠지만 중간쯤에 위치해 있기 때문에

최소한 'onCreateOp' 까지는 타이핑을 해야합니다.

 

주석으로 자세하게 써놓았지만 한번 더 차이를 보겠습니다.

동영상 강의 2분 32초 부분에서 추가한 메서드를 활성화 시켜줍니다.

 

문제 아닌 문제인데 여기서 코드를 한줄 추가합니다.

 

inflater?.inflate(R.menu.overflow_menu, menu)

 

여기서 overflow_menu 뒤에 『 , 』 를 쓰느냐 『 .  』에 따라 error가 발생합니다.

 

위에서는 재대로 『 , 』를 사용해서 에러가 발생하지 않았습니다.

 

 

불과 한끝차이지만 에러가 발생하게 됩니다.

 

이 부분에서 에러가 발생하는 분은 오타를 먼저 검사해보시고

 『 , 』 / 『 .  』 둘 중에 무엇을 썼는가 다시 보시기 바랍니다.

 

저 같은 경우는 (R.id) 이 부분을 쓰는게 익숙해 지다보니 전부다 『 .  』을 쓰다가

바로 위의 사진처럼 에러가 뜨는 것을 머저 보았습니다.

 

다들 화면을 얼마나 키우고 보실 모르겠는데

동영상 강의 화면이 작아서 잘 안보이니 주의가 필요합니다.

 

동영상 강의 2분 41초 부분입니다.

 

onCreateOpitionsMenu 메서드를 추가한 다음

 

바로 밑줄에 또 메서드를 추가합니다.

 

영어를 알아들을 수 있으면 상관없겠으나

자막으로 따라가자니 저 부분이 또 이해가 안되서 이렇게

한번 더 써봅니다.

 

이번에 추가할 메서드는 onOptionsItemSelected 입니다.

컨트롤 + o를 눌러서 추가해봅시다.

 

이번에도 중간 쯤에 위치해 있습니다.

 

타자를 치기 위해서는 onOptionsItem 까지는

타이핑 해야 할 것 같습니다.

 

동영상 강의 3분 05초 부분입니다.

 

onOptionItemSelected 를 활성화 시키기 위해서 코딩을 해줍니다.

NavigationUI와 연결해 주는 것이라고 합니다.

 

사실 번역이 메끄럽지 않아서 잘 못알아 듣겠습니다.

 

그리고 여기서 중요하게 봐야할 부분은 item!!, view!! 부분인데

코틀린 강의 할 때 들은 null 강제 허용을 하기 위해서 !!를 한다고 배운 것 같습니다.

 

문제가 되는 부분도 강제로 허용을 하는 것이기 때문에 테스트 할때도 안쓰는 것이

좋다고 들었는데 여기서 쓰고 있어서 깜짝 놀랐습니다.

 

직접 코드를 쓰다보니 뭔가 또 강의 와는 그림이 다른 그림이 그려집니다.

 

'androidx.navigation.Navigation.findNavController' 부분은 이전에도

쉽게 고쳐지는 에러였으니 alt + Enter를 눌러서 가볍게 수습해 봅시다.

 

에러를 확인하니깐 그럴싸 한 모양이 나온 것 같습니다.

 

view!! 에서 보였던 view는 또 『 , 』 / 『 .  』 의 오타 였습니다.

에러가 발생했을 때는 이제는 오타를 먼저 살펴 봐야겠습니다.

 

 

강의가 완료 되었고 실제로 메뉴창이 활성화 되어있는 모습을 볼 수 있습니다.

 

그럼 우리 화면은 어떻게 되었을지 확인을 해보겠습니다.

 

아직 코딩을 적용하기 전에는 오른쪽에 '메뉴'버튼이 없는 것이 보입니다.

 

 

메뉴 아이콘도 잘 보이고 실제로 작동도 잘 하는 것이 보입니다.

 

강의의 마지막 10~20초 부분이 무슨 말인지 잘 모르겠습니다.

무엇이 빠졌다는 것 같은데, 다시 봐야겠습니다.

 

일단 이번 17장은 오타를 제외하고 크게 문제없이 지나갔습니다.

 

18장은 17장에서 배운것의 정의와 기능을 가볍게 알아보는 것입니다.

영어는 못알아 듣게고, 번역도 엉성하지만

한번씩 보고 지나가도록합시다.

댓글