[Smart_Fan] 06 - Android Studio : Navigation Drawer Menu 구현 02

 

 

 

[Smart_Fan] 05 - Android Studio : Navigation Drawer Menu 구현 01

 

Navigation Drawer Menu 구현

[2020-07-12]

 

여태까지는 메뉴가 옆에서 나오고 닫히는 것만 가능하고

버튼을 누르면 클릭만 될 뿐 아무것도 반응하지 않는다.

 

그래서 fragment를 사용해 각 항목을 누를 때마다 해당 페이지로 이동할 수 있도록 해보았다.

 

 

#02. fragment를 이용해 항목 클릭시 각 페이지로 이동하도록 설정

 

본격적으로 시작하기 전에 fragment의 개념에 대해 몇 가지 살펴보았는데

분할된 화면들을 독립적으로 구성하고, 

화면들의 각 상태를 관리하기 위해 사용하는 것으로

액티비티에 동적으로 추가하고 삭제할 수 있기 때문에 동적 UI 구성이 가능하다고 한다.

 

 

• layout/fragment_home.xml, fragment_remote.xml, fragment_addremote.xml, fragment_explain.xml, fragment-settings.xml (각 페이지 화면)

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/home" // 각 항목마다 텍스트는 변경해 주었다.
        android:layout_gravity="center"
        android:textSize="20sp"/>

</FrameLayout>

 

각 항목의 파일을 추가해 FrameLayout 형식으로 입력해 주었다.

 

 

• navigation/main.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/main"
    app:startDestination="@id/nav_home">

    <fragment
        android:id="@+id/nav_home"
        android:name="com.example.smartfan.HomeFragment"
        android:label="Home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/nav_remote"
        android:name="com.example.smartfan.RemoteFragment"
        android:label="Remote"
        tools:layout="@layout/fragment_remote" />
    <fragment
        android:id="@+id/nav_addremote"
        android:name="com.example.smartfan.AddremoteFragment"
        android:label="Addremote"
        tools:layout="@layout/fragment_addremote" />
    <fragment
        android:id="@+id/nav_explain"
        android:name="com.example.smartfan.ExplainFragment"
        android:label="Explain"
        tools:layout="@layout/fragment_explain" />
    <fragment
        android:id="@+id/nav_settings"
        android:name="com.example.smartfan.SettingsFragment"
        android:label="Settings"
        tools:layout="@layout/fragment_settings" />
</navigation>

 

파일을 추가해 각 fragment에 id와 라벨을 입력해 구별할 수 있도록 하였으며

도구에 각 항목에 맞는 레이아웃을 연결해 주었다.

 

 

• layout/activity_main.xml

        <LinearLayout
            android:id="@+id/layoutToolBar"   //id 추가
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:background="@color/colorPrimary"

	……

        </LinearLayout>

        <fragment   // fragment 내용 추가
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toBottomOf="@id/layoutToolBar"
            app:layout_constraintBottom_toBottomOf="parent"
            android:id="@+id/navHostFragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            app:defaultNavHost="true"
            app:navGraph="@navigation/main"
            />

 

기존에 입력한 내용에서 LinearLayout의 id와

fragment 내용을 추가해 앞전에 입력한 입력한 각 페이지들이

항목들을 클릭할때마다 비칠 수 있게 화면을 구성해 준다.

 

 

• SettingsFragment.java, RemoteFragment.java, HomeFragment.java, ExplainFragment.java, AddremoteFragment.java (각 페이지 화면)

package com.example.smartfan;

import android.os.Bundle;

import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class HomeFragment extends Fragment {

    public HomeFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

 

각 페이지 화면에 fragment가 호출될 수 있도록 설정해주었다.

 

 

• MainActivity.java

package com.example.smartfan;

import androidx.annotation.NonNull; 
import androidx.annotation.Nullable; 
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.view.GravityCompat;
import androidx.drawerlayout.widget.DrawerLayout;
import androidx.navigation.NavController; 
import androidx.navigation.NavDestination; 
import androidx.navigation.Navigation; 
import androidx.navigation.ui.NavigationUI; 

import android.os.Bundle;
import android.view.View;
import android.widget.TextView; 

import com.google.android.material.navigation.NavigationView;

……

        NavigationView navigationView = findViewById(R.id.navigationView);
        navigationView.setItemIconTintList(null);

        NavController navController = Navigation.findNavController(this, R.id.navHostFragment); 
        NavigationUI.setupWithNavController(navigationView, navController);

        final TextView textTitle = findViewById(R.id.textTitle);

        navController.addOnDestinationChangedListener(new NavController.OnDestinationChangedListener() {
            @Override
            public void onDestinationChanged(@NonNull NavController controller, @NonNull NavDestination destination, @Nullable Bundle arguments) {
                textTitle.setText(destination.getLabel());
            }
        });  

    }
}

 

버튼을 눌렀을 때 화면을 변경해 줄 수 있도록 Navigation Controller와

화면을 클릭할 때마다 화면에 맞는 타이틀로 툴바의 이름을 변경해줄 수 있도록 해주었다.

 

 

애뮬레이터를 사용해 확인해 보면

메뉴에 있는 각 항목들을 클릭하면 각 페이지로 넘어가는 것을 확인할 수 있다.

 

 

---

 

 

각 항목들을 눌러 해당항목의 페이지까지 넘어가는 것을 진행하였다.

 

이제 이 각 페이지들을 디자인해보는 시간을 가져보도록 해야겠다.