코린이 탈출기
chapter 10.1 - Fragment 본문
Fragment는 화면을 조직 단위로 붙여서 구성하기 위한 기능입니다. 액티비티를 여러 조각으로 나눠서 코딩을 하기 위해서입니다.
하나의 액티비티를 여러 개의 클래스(조각 / 부품)로 나눠서 코딩을 할 수 있도록 도와주는 클래스입니다.
이 기능은 "H"oneycomb 버전부터 사용하기 시작했습니다. 초창기 안드로이드 태블릿 용 OS로 태블릿의 큰 화면을 작업하기 편리하도록 지원하는 것이 초기 개발 의도였습니다. 즉, 하나의 액티비티에 코드가 너무 많아지면 관리하기 힘들기 때문에 나눠서 작성하기 위한 것입니다.
실제 사용하는 이유는 ViewPager 등으로 하나의 액티비티에서도 여러 장의 화면을 보여주려고 할 때 사용합니다.
예를 들면 구글의 메일 화면입니다.
위의 화면을 보면 크게 3개의 화면으로 볼 수 있습니다. 이렇게 한 화면에 3개의 화면을 보여주는 방식입니다.
모바일 앱에서도 자주 사용합니다. 예를 들면 플레이 스토어가 있습니다.
위와 같은 화면에서 상단에 게임 탭을 누르면 게임 화면이 보이고, 앱 탭을 누르면 앱 화면이 보이는 것 등이 있습니다.
이렇게 모바일 앱에서 여러 화면을 보여주기 위해 자주 사용합니다.
간단한 코드를 통해 알아보겠습니다.
기존의 xml에 직접 화면을 구성하는 것이 아닌 레고처럼 조각을 따로따로 만들어서 메인 화면에 붙이는 느낌입니다.
레고 조각들을 관리하기 쉽게 별도의 패키지를 만들겠습니다. 따로 만들어진 패키지가 없기 때문에 새로 만들겠습니다.
프래그먼트의 모양(layout)을 xml로 그려보겠습니다.
그러기 위해서 layout 파일을 추가하겠습니다.
파일의 이름은 소문자와 _만으로 지어주어야 합니다.
새로 생긴 xml의 화면을 구성하겠습니다.
위에서 만들었던 프래그먼트 패키지에 코틀린 파일을 추가하겠습니다.
아무것도 없는 기본 클래스에서 프래그먼트로 동작하게 만드는 것은 어렵습니다. 그래서 상속을 받아 기능을 물려받겠습니다.
상속을 받을 때 android가 아닌 androidx로 상속을 받아야 합니다. 12번 줄과 같습니다.
만든 코틀린 파일로 프래그먼트의 화면을 연결시키고 싶을 경우 onCreateView 함수를 오버라이딩하면 됩니다.
기존 메인 코틀린 함수에도 onCreateView 함수를 이용하였습니다.
onCreateView 함수는 어떤 xml을 사용할 것인지를 연결하는 함수입니다.
onCreateView 함수를 오버라이딩을 하면 14 ~ 18번 줄과 같이 자동으로 코딩이 됩니다.
그리고 마지막에 return super~ 문장도 같이 코딩이 될 텐데 이 문장은 지우고 코딩을 하겠습니다.
지우고 return 구문을 다시 작성하겠습니다.
19번 줄처럼 그대로 작성하면 됩니다.
return inflater.inflate(R.layout.띄울 화면, container, false)
여기까지 onCreateView 함수를 작성하였습니다.
이제 이 화면에서 어떤 동작을 할 것인지를 작성합니다.
그러기 위해서 onActivityCreated 함수를 오버라이딩을 해서 그 내부에 작성하면 됩니다. 22 ~ 23번 줄과 같습니다.
동작은 총 2가지로 텍스트의 문구를 바꾸는 것과 토스트를 띄우는 것을 하겠습니다. 앞에서 다룬 내용이어서 코드만 보고 넘어가겠습니다.
버튼을 누르면 문구가 "안녕하세요"로 변경하겠습니다. 25 ~ 30번 줄과 같습니다.
2021.04.22 - [안드로이드/클래스101 - 비전공자들을 위한 나만의 안드로이드 앱 만들기] - chapter 4.1 - 코틀린으로 UI 속성 변경해 보기 - Text
다른 버튼을 누르면 토스트를 띄우겠습니다. 32 ~ 35번 줄과 같습니다.
2021.04.21 - [안드로이드/클래스101 - 비전공자들을 위한 나만의 안드로이드 앱 만들기] - chapter 3.2 - 기초 이벤트 처리, 로그, 토스트 활용하기
토스트를 띄울 화면을 선택할 때에는 this를 사용할 수 없습니다. 그 이유는 토스트는 어떤 화면에 띄울 것인지를 설정하는 것인데 프래그먼트는 화면의 부품이기 때문입니다. 그래서 this 대신에 context 또는 context!!로 설정하면 띄울 수 있습니다.
여기까지 작성하고 에뮬레이터를 실행하면 흰 화면만 보일 것입니다.
지금까지 한 코드는 화면의 부속품인 프래그먼트를 작성한 것인데, 메인화면에 아무런 코드를 작성하지 않았기 때문입니다.
이제 메인화면으로 가서 프래그먼트를 띄우겠습니다.
프래그먼트를 태그로 이용하여 코드를 작성하겠습니다. 10번 줄과 같습니다.
높이와 크기는 원하는 만큼 설정합니다.
지금까지 만든 프래그먼트를 불러오기 위해서는 class를 작성하면 알아서 자동완성됩니다. 14번 줄과 같습니다.
하지만 여기까지 하면 에러가 발생하여 앱이 꺼집니다.
정상 동작하기 위해서는 고유의 값을 정해야 하는데 tag 속성이나 id 속성의 값을 중복되지 않게 붙여주면 됩니다. 11번 줄과 같습니다.
여기까지 작성하고 에뮬레이터를 실행하면 원하는 대로 동작이 됩니다.
프래그먼트도 일종의 클래스여서 한 번 만들어두면 여러 번 사용할 수 있고 한 화면에 같은 프래그먼트를 2회 이상 보이는 것도 가능합니다.
'인터넷 강의 > 클래스101 - 비전공자들을 위한 나만의 안드로이드 앱 만들기' 카테고리의 다른 글
| chapter 10.3 - TagLayout (라이브러리 활용) (0) | 2021.06.08 |
|---|---|
| chapter 10.2 - ViewPager (0) | 2021.06.03 |
| chapter 9.6 - sharedPreferences (0) | 2021.06.01 |
| chapter 9.5 - 안드로이드 액티비티의 생명주기 개념 이해 (0) | 2021.06.01 |
| chapter 9.4 - Handler - postDelayed (0) | 2021.05.26 |
