섹션 5. 트로트가수 음악 목록 만들기(3)-프래그먼트 활용

안드로이드 내비게이션 컨트롤러를 사용하기에 앞서, 프래그먼트에 대해 알아보자

 

화면마다 액티비티를 만드는게 아니라 한 액티비티에서 여러 화면이 전환될 수 있도록 하고 싶을 때,

프래그먼트를 이용한다.

 

프래그먼트란?

액티비티에 있는 화면!

 

먼저, 프래그먼트를 나오게 하는 전체 화면의 내비게이션이 있어야 한다.

프로젝트를 만들고 내비게이션 버튼을 먼저 만들어주도록 하자.

 

1. navigation 만들기

2. Fragment 만들고 내비게이션에 연결하기

3. 리사이클러 뷰 만들기

이 순서대로 해보겠다.

 

 

app 디렉터리 우클릭-New-Android Resource File

Resource type은 Navigation으로 설정해 주고 이름은 trot_nav로 하자. 내비게이션 기능을 그래들 파일에 넣을 건지 묻는 창이 뜨는데 'OK' 눌러야함!

res 폴더에 navigation 폴더가 생성되어 있을 것.

 

 

activity_main.xml로 가서

Pallette-Containers-NavHostFragment 클릭 후, 만든 nav 클릭해서 들어가있는거 확인하고 ok 누름

 

이제 네비게이션 화면은 만들었으니까 그 안에 들어갈 프래그먼트를 만들어보자

 

소스파일 있는 디렉터리 우클릭-New-Fragment-Fragment(Blank)

 

Singer1Fragment, Singer2Fragment, Singer3Fragment 만들기

 

이제 프래그먼트를 내비게이션에 연결해주자

 

내비게이션파일 들어가서 핸드폰에 +버튼 붙어있는 거 클릭, 각 프래그먼트들 차례로 다 클릭해주기

프래그먼트에 마우스 올리면 나타나는 점 드래그해서 연결해주기

*프래그먼트 1->프래그먼트 2, 프래그먼트2->프래그먼트 1 양방향 다 연결해줘야 함.

 

fragment_singer1.xml로 가보자

프래그먼트들에 차례로 텍스트뷰 글자를 영탁, 영웅, 가인으로 바꿔주기

 

<에러기록

The processing instruction target matching "[xX][mM][lL]" is not allowed.

xml에 공백이 있거나 주석이 있는 경우에 발생하는 에러 />

 

중간점검 실행해보자

<에러기록

Error inflating class androidx.fragment.app.FragmentContainerView

해결못함

강의를 따라가보도록 하자/>

 

<강의의 실행화면>

 

이제 아래 화면의 내비게이션 뷰에는 각각의 가수들 사진을 넣어주고

그 사진들을 클릭할때마다 그 가수의 노래 목록이 출력되게 하도록 하겠다.

 

 

이미지뷰 만들기

fragment_singer1.xml로 가서.

LinearLayout 대신 ConstraintLayout을 써주도록 하겠다.

왜냐?

이미지 뷰를 화면 하단에 붙이려고 하는데, ConstraintLayout을 쓰면 마우스 드래그로 쉽게 해결됨(경험)

 

ConstraintLayout 안에 LinearLayout 만들어주고 orientation은 horizontal로 설정

각 이미지 src로 불러오고 weight="1" 설정해서 3등분되게 하기

scaleType="fitXY"로 사진꽉차게 하기

 

 

이미지뷰 클릭하면 프래그먼트로 이동되게 하기

Singer1Fragment.kt 파일로 이동해서~

잡다한 코드는 지워주고

fragment_1.xml의 뷰 객체 생성한다음

뷰 바인딩해서 클릭할 이미지의 이미지 뷰 객체 생성

그 후 setOnClickListener로 이벤트 구현해준다.

 

이대로 Singer2Fragment와 Singer3Fragment 파일도 작성해주도록 하자.

우선 내비게이션 이미지 영역을 세 프래그먼트의 레이아웃 파일에 똑같이 만들어줘야 한다.

그러려면 먼저 프래그먼트 2와 프래그먼트 3의 레이아웃 파일로 가서 ConstraintLayout으로 바꿔주고 

이미지뷰 영역을 프래그먼트 1에서 복붙해주기~

 

이제 프래먼트액티비티 파일도 어느 화면에서 어느 화면을 가는지 등등 맞춰서 클릭이벤트 바꿔주기~

 

내비게이션 버튼 클릭이벤트 통한 화면 전환 완성!

 

아직 끝나지 않았다.

이제 다음 글에서 트로트 목록을 출력할 리사이클러 뷰를 만들어보자