코딩 (독학)/★ Kotlin

[CH.3] JDTALK 메인화면 구성 - 2 (카카오톡 클론코딩) Bottom Navigation Bar 구성하기 - Android studio(with.Kotlin)

짱득이 2022. 1. 24. 16:28
300x250
반응형
 시작에 앞서
개인 프로젝트, 코딩 과정을 상세하게 기록하고 리뷰하기 위해 작성된 블로그입니다.
공부와 함께 진행되는 스파르타식 프로젝트이므로, 부족한 부분이 많을 수 있습니다.
Feedback은 언제나 환영입니다.

본 포스트는 [다예하다] 님 (https://everybody-yeah.tistory.com/6)의 포스트를
기반으로 참고하여 작성되었습니다. 굉장히 깔끔한 정리를 해 주신 [다예하다]님 감사드립니다.


[Ch.3] 메뉴 탭 만들기 - 이어 쓰는 2번째 포스트

Configuration ?

 

  • Project Name : JDTalk_Clone
  • Language : Kotlin (Android Studio)

현재 보여지는 bottom_navigation_tab.xml의 상태이다.

 


* 3 - Fragment (3개의 프래그먼트) 생성

현재 우리가 만들고자 하는 JDTALK (카K오톡 클론) 앱은 총 3개의 탭 아이콘이 존재하고, 눌렀을 때 바뀌는 3개의 페이지가 있어야 한다. 이것을 위해 우리는 activity_main.xml에 ViewPager를 만들어 둔 것이다.

이 ViewPager에서 실제로 변화시켜 줄 3개의 페이지를 만들어 줄 것이다. ( Page = Fragment)

 

[ New ] ▶ [ Fragment ] ▶ [ Fragment (Blank) ]

아래와 같이 이름을 지정하고 Finish 하되, 필요한 Fragment의 개수만큼 만들어 준다.

 

친구, 채팅, 더보기 3개의 Fragment가 필요하므로 3개의 페이지를 만들었다.

이 과정에서 callback 함수와 fragment factory methods 들을 Include 하겠냐는 문구가 나오면 하지 않기를 추천한다.

필요하다면 그냥 사용하면 되겠지만, 필요하지 않으면서 지금 최신버전의 Studio를 사용하고 있는 입장인 나는.. 알아서 추가 되어버린 요소들이 많아서 헷갈리고 당황스러웠다..

 

 - Activity.kt 현재 상황

Fragment.kt 들은 적절히 세분화하여 관리하기 위해 새로 Fragment Package 안에 담아주었다.

 

 -  layout.xml 현재 상황

 

기존의 MainActivity.kt (activity_main.xml) 과 SplashScreen_Activity (activity_splash_screen.xml) 그리고 bottom_navigtaion_tab.xml 등의 파일을 제외하고 3가지씩 더 생성했다면 Fragment 페이지 세팅은 완료했다.

 


* Adapter 생성 (MainFragmentStatePagerAdapter.kt)

  • Adapter는 보여지는 View와 해당 View에 올릴 Data를 연결 시켜주는 일종의 오작교와 같은 역할이다.
  • Adapter가 없으면 View와 Data는 이루어질 수 없다.
  • Adapter는 ListView, RecyclerView 등등 여러 View에 많이 사용된다.

위와 같은 이유로 우리는 현재까지 생성 한 요소들을 연결하고 활용하기 위해 Adapter를 만들어야 한다.

 

java 하위 [ new ] ▶ [ Kotlin File/Class ] ▶ [ 이름은 MainFragmentStatePagerAdapter.kt 로 생성 ]

Fragment 처럼 Adapter Package 안에서 관리 해 주기로 하였다. (필수는 아니다..ㅎ)

당연히 이름은 자기 마음이다.

 

그리고 해당 Adapter.kt에 아래와 같이 코드를 작성한다.

package com.jjangdeuk.jdtalk_clone.Adapter

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
import com.jjangdeuk.jdtalk_clone.Fragment.*

class MainFragmentStatePagerAdapter(fm : FragmentManager, val fragmentCount : Int) : FragmentStatePagerAdapter(fm) {
    override fun getItem(position : Int): Fragment? {
        when(position) {
            0 -> return FriendsFragment()
            1 -> return ChatFragment()
            2 -> return Other_Fragment()
            else -> return null
        }
    }

    override fun getCount(): Int = fragmentCount

}

import 하지 않은 상태에서 코드를 입력했다면 빨간 줄 마다 Alt+Enter를 열심히 해 주면 된다.

 

위 코드에 대해서 부가 설명을 약간 붙이자면..

 

* Fragment (Activity 내에서 UI의 일부분을 나타내는 요소)

 - Android 환경에서 화면을 바꾸는 두가지 방법이 있는데, 

1) 새로운 액티비티 하나를 생성

2) 액티비티의 일부만 바꾸는 방식 (프래그먼트)

대표적으로는 카카오톡, 인스타그램, 페이스북 등이 프래그먼트를 바꾸는 방식을 사용한다.

(Fragment에 대한 더 자세한 내용은 여기!)

 

* getItem(Int)

 - 해당 위치의 Item 메소드이다.  Int형식으로 된 position을 파라미터로 갖는다.

 - 예를 들어 첫번째 Dog Item을 선택하고 싶다면 코드에서 getItem(0)과 같이 쓸 수 있다. (컴퓨터에서 0은 첫번째니까)

출처 : https://blog.yena.io/studynote/2017/12/01/Android-Kotlin-ListView.html

 

그래서 위 코드는 position이 어떠한 Int 값을 갖느냐에 따라 알맞는 Fragment로 화면을 바꿔 줄 코드이다.

아무것도 해당하지 않는다면 null을 반환하기로 하였는데, Android Studio Kotlin의 까다로운 Null Check 정책에 따라 오류가 발생하지만, 해당 오류를 어찌 고쳐야 할 지 몰라 코드를 임시로 아래와 같이 변경했다. 추후에 반드시 수정해야 할 듯 하다..

package com.jjangdeuk.jdtalk_clone.Adapter

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
import com.jjangdeuk.jdtalk_clone.Fragment.*

class MainFragmentStatePagerAdapter(fm : FragmentManager, val fragmentCount : Int) : FragmentStatePagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {
    override fun getItem(position : Int): Fragment {
        when(position) {
            0 -> return FriendsFragment() // Home 역할
            1 -> return ChatFragment()
            2 -> return Other_Fragment()
            else -> return FriendsFragment // Home 역할
        }
    }

    override fun getCount(): Int = fragmentCount

}

변경 된 코드는 Fragment에 대한 NullCheck를 진행하지 않으며, else인 경우 null이 아닌 FriendsFragment가 Home 값이므로 이것으로 return 되게 하였다.

 

어찌저찌.. 임시로 Adapter에 대한 준비는 끝났다.

 

뒤의 내용은 다음 포스트에서 ~

728x90
반응형