인스타그램 클론 (메인 화면)

- 이번에는 로그인 후 나오는 메인 화면을 만듦 (아직 아무 기능도 없음)

 

메인 화면

---

먼저 [activity_main.xml]에

 

위와 같이 네비게이션 뷰를 만들어줌

---

다음으로 res폴더에 resource file을 하나 만들어줌 이 때 리소스의 타입은 "menu"로 해줌

 

- 새로 만든 리소스 파일에 아래와 같이 아이템들을 만들어줌. 

 

<?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>
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:enabled="true"
        android:title="@string/home"></item>
    <item
        android:id="@+id/action_add_photo"
        android:icon="@drawable/ic_add_a_photo"
        android:enabled="true"
        android:title="@string/home"></item>
    <item
        android:id="@+id/action_favorite_alarm"
        android:icon="@drawable/ic_favorite_border"
        android:enabled="true"
        android:title="@string/home"></item>
    <item
        android:id="@+id/action_account"
        android:icon="@drawable/ic_account"
        android:enabled="true"
        android:title="@string/home"></item>
</menu>

 

* 각 아이템의 아이콘들은 프로젝트를 실행했을때 나오는 부분중

이 부분에 해당됨

---

다음으로 java폴더에 새로운 패키지를 추가해줌 (navigation 라고 패키지명을 정했음)

 

- navigation 패키지 안에 아래와 같이 Kotlin 클래스들을 만듦

 

navigation 패키지

- 이후 res폴더에 있는 layout 폴더에 아래와 같이 xml 파일들을 만들어줌

fragment layout xml file

---

이제 navigation에 있는 코틀린 클래스들을 작성함

 

- 아래와 같이 내용을 작성하면 됨 (아래는 DetailViewFragment임)

package com.example.hyealsinstargram.navigation

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.hyealsinstargram.R

class DetailViewFragment :Fragment(){

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

}

---

코틀린 클래스를 작성했으면 layout 폴더에 만들어놓은 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="#AA2244">

</androidx.constraintlayout.widget.ConstraintLayout>

* 해당 아이콘을 누르면 화면이 아래와 같은 색으로 변함

이처럼 다른 코틀린 파일과 xml 파일도 위에 코드와 동일하게 파일 이름과 배경색만 바꿔서 작성해주면 됨

---

아이콘을 클릭했을 때 배경색이 바뀌도록 하기 위해서 MainActivity.kt에 해당 내용을 작성해야 함

 

package com.example.hyealsinstargram

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.MenuItem
import com.example.hyealsinstargram.navigation.AlarmFragment
import com.example.hyealsinstargram.navigation.DetailViewFragment
import com.example.hyealsinstargram.navigation.GridFragment
import com.example.hyealsinstargram.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()
            }
            R.id.action_search ->{
                var gridFragment = GridFragment()
                supportFragmentManager.beginTransaction().replace(R.id.main_content, gridFragment).commit()
            }
            R.id.action_add_photo ->{

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

 

- 위와 같이 MainActivity 클래스가 BottomNavigationView.OnNavigationItemSelectedListener를 상속하도록 하고 onNavigationItemSelected 메소드를 오버라이드 해줌

 

- when을 이용해서 각 아이콘을 눌렀을 때 배경색이 바뀌도록 코드를 작성함

 

* supportFragmentManager.beginTransaction().replace(R.id.main_content, detailViewFragment).commit() 부분 설명

1. 프래그먼트를 Transaction(삭제,추가,대체)를 하기 위해서 supportFragmentManager가 필요함
2. replace 함수를 통해 프래그먼트를 교체할 수 있음
3. replace 함수 첫 번째 인자: 엑티비티 레이아웃에서 교체되는 프래그먼트가 위치할 최상위 뷰 그룹 (여기서는 프래그먼트 레이아웃 리소스 ID)
4. replace 함수 두 번째 인자: 교체할 프래그먼트 객체
5. commit()을 작성해야 변경내용이 저장됨

---