하단 메뉴를 선택하여 다른 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를 사용하니 가볍고 구현하기에 쉬웠다.
