[안드로이드/인스타그램클론] # 5 메인화면 네비게이션 탭 바

[ 이전 글 ] 에서는 페이스북으로 로그인하는 기능을 추가했었는데 이번에는 메인화면 네비게이션 탭 바를 만들어 볼 것이다.

 

네비게이션 탭 바가 무엇인가 하면

빨간 박스 부분인데 이 부분을 눌렀을 때마다 각 화면의 xml으로 넘어가면서 색이 변할 수 있기 해줄 것이다

 

[ moveMainPage 로 넘어가는 화면 ] 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="35dp">
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/logo_title"/>
        </RelativeLayout>
    </androidx.appcompat.widget.Toolbar>
    <LinearLayout
        android:id="@+id/toolbar_division"
        android:background="@color/colorDivision"
        android:orientation="horizontal"
        android:layout_below="@+id/my_toolbar"
        android:layout_width="match_parent"
        android:layout_height="1dp"></LinearLayout>
    <FrameLayout
        android:id="@+id/main_content"
        android:layout_below="@+id/toolbar_division"
        android:layout_above="@+id/nav_division"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></FrameLayout>
    <LinearLayout
        android:id="@+id/nav_division"
        android:background="@color/colorDivision"
        android:orientation="horizontal"
        android:layout_above="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="1dp"></LinearLayout>
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:menu="@menu/bottom_navigation_main"></com.google.android.material.bottomnavigation.BottomNavigationView>
</RelativeLayout>

이 부분은 그냥 구성하는 부분이라서 그냥 코드를 가져와주면 되는데 처음 쓴

FrameLayout 은 그 안에 여러 가지를 넣으면 마지막에 추가된 뷰가 가장 전면에 표시된다 

 

LinearLayout은 각각 구분선의 역할을 하고 있고,

그리고 bottonNavigationView는 이제 오늘 기능을 추가할 아이가 된다.

 

[ app:menu="@menu/bottom_navigation_main" ] 라고 썼기 때문에 bottom_navigation_main을 만들어 줄 것인데 res에 들어가서 새로 Android Resourse File - 파일 이름 쓰기 [ "menu" ]- Resourse type 설정 [ "menu" ] 로 해주고 OK 

 

메뉴에는 지금

이렇게 5가지가 있기 때문에

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_home"
        android:enabled="true"
        android:title="@string/home"/>
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:enabled="true"
        android:title="@string/home"/>
    <item
        android:id="@+id/action_add_photo"
        android:icon="@drawable/ic_add_a_photo"
        android:enabled="true"
        android:title="@string/home"/>
    <item
        android:id="@+id/action_favorite_alarm"
        android:icon="@drawable/ic_favorite_border"
        android:enabled="true"
        android:title="@string/home"/>
    <item
        android:id="@+id/action_account"
        android:icon="@drawable/ic_account"
        android:enabled="true"
        android:title="@string/home"/>
</menu>

이렇게 각각 순서대로 home - search - add photo - favorite - account 순으로 만들어 주고 각각의 icon도 찾아서 넣어줘야 함

 

그러고 나서 java 에 [ "navigation" ]이라는 이름을 가진 package를 만들어준다.

그 패키지 안에 Kotlin 클래스를 만드는데 위에 사진과 같이 4개를 각각 만들어주면 된다.

그리고 layout에 가서도 각각에 해당하는 곳 xml을 아래와 같이 만들면 된다.

home	detail fragment
search	grid fragment
favorite	alarm fragment
account	user fragment

각각 이렇게 연결될 것이다.

 

[ user fragment ]

class UserFragment : Fragment(){
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var view = LayoutInflater.from(activity).inflate(R.layout.fragment_user,container,false)
        return view
    }
}

4개 다 똑같은 코드이며 중간에 fragment_user 부분만 각각에 맞게 바꿔주면 된다.

 

이제 각각 눌렀을 때의 화면을 바꿔줄 것인데

 

fragment_user.xml은 이 색으로 나오고

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#DD4488">

</androidx.constraintlayout.widget.ConstraintLayout>

각각 색만 다르게 넣어주면 된다.

 

이제 마지막으로 MainActivity에서 네이게이션 바를 눌렀을 때 화면이 전환되는 기능을 추가해 줄 것이다.

 

package com.example.mingstagram

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import com.example.mingstagram.navigation.AlarmFragment
import com.example.mingstagram.navigation.DetailViewFragment
import com.example.mingstagram.navigation.GridFragment
import com.example.mingstagram.navigation.UserFragment
import com.google.android.material.bottomnavigation.BottomNavigationView
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity(),BottomNavigationView.OnNavigationItemSelectedListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        bottom_navigation.setOnNavigationItemSelectedListener(this)
    }

    override fun onNavigationItemSelected(p0: MenuItem): Boolean {
        when(p0.itemId){
            R.id.action_home->{
                var detailViewFragment = DetailViewFragment()
                supportFragmentManager.beginTransaction().replace(R.id.main_content,detailViewFragment).commit()
                return true
            }
            R.id.action_search->{
                var gridFragment = GridFragment()
                supportFragmentManager.beginTransaction().replace(R.id.main_content,gridFragment).commit()
                return true
            }
            R.id.action_add_photo->{

                return true
            }
            R.id.action_favorite_alarm->{
                var alarmFragment = AlarmFragment()
                supportFragmentManager.beginTransaction().replace(R.id.main_content,alarmFragment).commit()
                return true
            }
            R.id.action_account->{
                var userFragment = UserFragment()
                supportFragmentManager.beginTransaction().replace(R.id.main_content,userFragment).commit()
                return true
            }
        }
        return false
    }
}

class MainActivity : AppCompatActivity(),BottomNavigationView.OnNavigationItemSelectedListener 

when을 이용해서 item을 눌렀을 때 화면이 넘어갈 수 있도록 설정해준다.

 

🦔 supportFragmentManager.beginTransaction().replace(R.id.Main_content,userFragment).commit()

 

- supportFragmenetManager.beginTransaction() 은 Fragment 추가, 제거, 변경 등을 할 수 있다.

- replace 는 그 중에 변경을 뜻함 ( add - 추가 / remove - 제거 ) - 2개의 인자를 가짐

- 첫 번째 인자는 기존의 fragment가 있는 곳, 두 번째 인자는 바꿀 fragment 

- commit()을 작성해서 변경내용 저장됨

---

동작화면

---

이렇게 다 코드를 작성하고 나면 이렇게 동작하게 된다 ‼️

 

< 오늘의 TMI >

블로그에 정리하면서 느끼는 생각이지만 진짜 블로그에 정리하는 일이 생각보다 그렇게 쉬운 일은 아닌 것 같다. 한 거 코드 스윽 긁어오고 그 전 버전이랑 차이점 보면서 쓰면 되는 건데 생각보다 중간에 이게 왜 있었더라 하는 부분도 있고 중간 중간 글 쓰기 귀찮아지는 순간이 온다. 근데 그냥 따라 했으면 모르는데 지나쳐가는 부분이 많았을 것 같고 기억에도 남지 않았겠구나 느낄 때가 많다. 사실 오늘도 그냥 코드 슥슥 써보고 빨리 만들어버리고 완성본을 보고 싶다는 생각이 있었는데 역시 안 되겠다 -- 🦔 일단 오늘은 또 뒤에 부분 코드 좀 쓰려다가 메이플하고 싶으니까,, 메,,이,,플,, 조그,,,ㅁ만,, 해,,,,야,,,지🌿

오늘은 여기서 끝 👩🏻‍💻‼️