[Android Studio]Bottom Navigation View

30275 ๋‹จ์–ด AndroidStudioAndroidStudio

ํ•˜๋‹จ ๋ฉ”๋‰ด๋ฅผ ์„ ํƒํ•˜์—ฌ ๋‹ค๋ฅธ Fragment๋ฅผ ๋„์–ด์ฃผ๋Š” ์˜ˆ์ œ

1. Bottom Navigation View ์— ๋“ค์–ด๊ฐˆ item ์ •์˜

ํ•˜๋‹จ๋ฐ”์— 4๊ฐœ์˜ item์ด ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ์„ ๊ตฌํ˜„ํ•˜์˜€๋‹ค.

  • Smenu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/tab1"
        app:showAsAction="always"
        android:enabled="true"
        android:icon="@drawable/home"
        android:title="Home"/>
    <item
        android:id="@+id/tab2"
        app:showAsAction="always"
        android:enabled="true"
        android:icon="@drawable/monitoring"
        android:title="Monitoring"/>
    <item
        android:id="@+id/tab3"
        app:showAsAction="always"
        android:enabled="true"
        android:icon="@drawable/gallery"
        android:title="Gallery"/>
    <item
        android:id="@+id/tab4"
        app:showAsAction="always"
        android:enabled="true"
        android:icon="@drawable/setting"
        android:title="Setting"/>

</menu>
  • android: id = "@+id/tab1"
    ๊ฐ ๋ฉ”๋‰ด์— ๋Œ€ํ•œ ์ด๋ฆ„์„ ์ง€์ •ํ•ด์ค€๋‹ค. ์ถ”ํ›„์— id๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
  • app : showAsAction = "always"
    ํ•ญ์ƒ ํ•˜๋‹จ ๋ฉ”๋‰ด๊ฐ€ ๋ณด์ด๋„๋ก ์„ค์ •ํ•œ๋‹ค. ์ด ๊ฐ’์— ๋”ฐ๋ผ ๋ณด์ด์ง€ ์•Š๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค.
  • android: enabled = "true"
    ์‹œ์Šคํ…œ์—์„œ ์„œ๋น„์Šค๋ฅผ ์ธ์Šคํ„ด์Šคํ™”ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์—ฌ๋ถ€. ์ธ์Šคํ„ด์Šคํ™”ํ•  ์ˆ˜ ์žˆ์œผ๋ฉด 'true'์ด๊ณ  ์ธ์Šคํ„ด์Šคํ™”ํ•  ์ˆ˜ ์—†์œผ๋ฉด 'false'์ด๋‹ค. ๊ธฐ๋ณธ๊ฐ’์€ 'true'์ด๋‹ค.

  • android : icon = "@drawable/home"
    ํ•˜๋‹จ ๋ฉ”๋‰ด์—์„œ ํ…์ŠคํŠธ๊ณผ ํ•จ๊ป˜ ์•„์ด์ฝ˜์„ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ๋กœ, drawable ํ•˜๋‹จ์— ์ด๋ฏธ์ง€๋ฅผ ์ €์žฅํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•ด์ค€๋‹ค.

  • android : title = "Home"
    ํ•˜๋‹จ ๋ฉ”๋‰ด์— ๋‚˜ํƒ€๋‚˜๋Š” ํ…์ŠคํŠธ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ฝ”๋“œ์ด๋‹ค.

2. Fragment ์ƒ์„ฑ

4๊ฐ€์ง€ Fragment๋ฅผ ์ƒ์„ฑํ•˜์˜€๋‹ค. Fragment์ƒ์„ฑ ์‹œ Activity ์ƒ์„ฑ๊ณผ ๋˜‘๊ฐ™์€ ๋‹จ๊ณ„๋กœ ์ƒ์„ฑํ•˜๋ฉด ๋œ๋‹ค. Fragment ์ƒ์„ฑ์‹œ java ํŒŒ์ผ๊ณผ xml ํŒŒ์ผ์ด ์ƒ์„ฑ๋œ๋‹ค.

๋‹ค์Œ๊ณผ ๊ฐ™์€ Fragment๋ฅผ ์ƒ์„ฑํ•˜์˜€๋‹ค.

  • HomeFragment
  • Monitoring
  • Gallery
  • Setting

3. Fragment๊ฐ€ ์˜ฌ๋ผ๊ฐˆ MainActivity์ •์˜

  • activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">



	<!--FrameLayout-->
    <FrameLayout
        android:id="@+id/main_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:layout_gravity="bottom"
        android:background="#ffffff"
        app:menu="@menu/smenu"
        app:labelVisibilityMode="labeled"
        app:itemIconTint="@color/selectedcolor"
        app:itemTextColor="@color/selectedcolor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>
  • android:layout_marginBottom="?attr/actionBarSize"/>
    FrameLayout์— ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜์—ฌ์•ผ ํ•˜๋‹จ ๋ฉ”๋‰ด๋ฐ”๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
  • app:menu="@menu/smenu"
    ์ด์ „์— ๋งŒ๋“ค์–ด๋‘” smenu๋ฅผ ์—ฐ๊ฒฐ์‹œํ‚จ๋‹ค.
  • app:itemIconTint="@color/selectedcolor"
    app:itemTextColor="@color/selectedcolor"
    ๋ฉ”๋‰ด์˜ ํ…์ŠคํŠธ์™€ ์•„์ด์ฝ˜์— ๋Œ€ํ•œ ์ƒ‰์ƒ ์ง€์ •์ด๋‹ค. ๋งŒ์•ฝ, ์ง€์ •ํ•ด์ฃผ๊ณ  ์‹ถ๋‹ค๋ฉด color๋””๋ ‰ํ„ฐ๋ฆฌ ๋‚ด์— ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด์„œ ์ง€์ •ํ•˜๋ฉด ๋œ๋‹ค.

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
      <!--์ƒ‰์ƒ์ด ์„ ํƒ๋˜์—ˆ์„ ๋•Œ -->
        <item android:state_checked="true" android:color="#7EC341"/>
      <!--ํ‰์†Œ ์ƒ‰์ƒ -->
        <item android:color="#858585"/>
    </selector>
  • MainActivity.java


public class MainActivity extends AppCompatActivity {

	//BottomNavigationView ์„ ์–ธ
    BottomNavigationView bottomNavigationView;
    //Fragment ์„ ์–ธ
    HomeFragment homeFragment;
    MonitoringFragment monitoringFragment;
    GalleryFragment galleryFragment;
    SettingFragment settingFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        //์ดˆ๊ธฐ ์„ธํŒ…
        init();


        //bottomNavigation์˜ ์•„์ด์ฝ˜์„ ์„ ํƒํ–ˆ์„ ๋•Œ ์›ํ•˜๋Š” ํ”„๋ ˆ๊ทธ๋จผํŠธ๊ฐ€ ๋„์–ด์งˆ ์ˆ˜ ์žˆ๋„๋ก ๋ฆฌ์Šค๋„ˆ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค.
        bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

				
                switch (item.getItemId()) {
                    case R.id.tab1: {
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout, new HomeFragment())
                                .commit();
                        return true;
                    }
                    case R.id.tab2: {
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout, new MonitoringFragment())
                                .commit();
                        return true;
                    }
                    case R.id.tab3: {
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout, new GalleryFragment())
                                .commit();
                        return true;
                    }
                    case R.id.tab4: {
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.main_layout, new SettingFragment())
                                .commit();
                        return true;
                    }

                }
                return false;
            }
        });
    }

    private void init(){
        //fragment ๊ฐ์ฒด ์ƒ์„ฑ
        homeFragment = new HomeFragment();
        monitoringFragment = new MonitoringFragment();
        galleryFragment = new GalleryFragment();
        settingFragment = new SettingFragment();

        //main.xml์ƒ์˜ bottomNavigationView ์—ฐ๊ฒฐ
        bottomNavigationView = findViewById(R.id.bottomNavigationView);

        //์ œ์ผ ์ฒ˜์Œ ๋„์–ด์ค„ ๋ทฐ ์„ธํŒ…
        getSupportFragmentManager().beginTransaction().replace(R.id.main_layout,homeFragment).commitAllowingStateLoss();

    }
}
  • bottomNavigation View์— ๋Œ€ํ•˜์—ฌ tab1์— ํ•ด๋‹นํ•˜๋Š” ํด๋ฆญ์ด ๋“ค์–ด์˜ค๊ฒŒ ๋˜๋ฉด, main_layout์— homeFrament์ด ๋‚˜ํƒ€๋‚˜๊ฒŒ ๋œ๋‹ค.

์ด์ „ ํ”„๋กœ์ ํŠธ์—์„œ๋Š” ํ•˜๋‚˜์”ฉ ์•„์ด์ฝ˜๊ณผ ํ…์ŠคํŠธ๋ฅผ ๋ฐฐ์น˜ํ•˜์—ฌ ํ•˜๋‹จ๋ฐ”๋ฅผ ๋งŒ๋“ค๊ณ , Activity์— ์—ฐ๊ฒฐํ•˜์—ฌ ๋ฌด๊ฒ๊ณ , ๋Š๋ฆฌ๋‹ค๋Š” ๋Š๋‚Œ์„ ๋ฐ›์•˜๋Š”๋ฐ ์•ˆ๋“œ๋กœ์ด๋“œ ์ŠคํŠœ๋””์˜ค์—์„œ ์ œ๊ณตํ•˜๋Š” Bottom Navigation View๋ฅผ ์‚ฌ์šฉํ•˜๋‹ˆ ๊ฐ€๋ณ๊ณ  ๊ตฌํ˜„ํ•˜๊ธฐ์— ์‰ฌ์› ๋‹ค.

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ