이번은 BottomNavigationView를 사용하여 하단에 탭을 사용해보도록 하겠습니다.
요즘 코틀린으로 만들어진 자료들이 자바보다 많아져서 자바를 이용하여 제작한 모습을 보여드리겠습니다.
안드로이드에서 BottomNavigationView가 무엇인지에 대한 설명은 공식문서를 통해 확인해보도록 하겠습니다.
BottomNavigationView | Android Developers
developer.android.com
1. Menu 디렉토리(폴더)를 생성 & bottom_navi_mene.xml 파일 만들기
- 처음 프로젝트를 만들면 menu 디렉토리는 없습니다. 그래서 생성을 해줘야합니다.
- res 디렉토리에 마우스 커서를 가져다 놓고 오른쪽 마우스를 클릭합니다.
- New → Android Resource Directory를 클릭합니다.
- Resource type을 클릭하면 드롭박스 형태로 타입들이 나오는데, 여기서 "menu"를 찾아서 클릭하고 OK를 클릭!
- 생성된 menu 디렉토리에 마우스 커서를 가져다 놓고 오른쪽 마우스를 클릭합니다.
- New → Menu Resource File을 클릭합니다.
- 파일명을 입력하고 OK를 누르면 "bottom_navi_menu.xml" 파일이 생성됩니다.
2. "bottom_navi_menu.xml" 내용넣기.
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/item_home"
android:enabled="true"
android:icon="@drawable/home_icon"
android:title="Home"/>
<item
android:id="@+id/item_search"
android:enabled="true"
android:icon="@drawable/search_icon"
android:title="Search"/>
<item
android:id="@+id/item_add"
android:enabled="true"
android:icon="@drawable/add_icon"
android:title="Add"/>
<item
android:id="@+id/item_profile"
android:enabled="true"
android:icon="@drawable/profile_icon"
android:title="Profile"/>
</menu>
- 하단의 탭의 개수는 <item>의 개수로 조절을 하면 되는데, 저 같은 경우에는 4개로 만들었습니다.
- 각각의 icon들은 안드로이드에 있는 Vector를 다운받아서 사용하면 됩니다.
3. acitivty_main.xml 파일에 bottomnavigationview를 넣어주기.
<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">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#fff"
app:labelVisibilityMode="unlabeled"
app:menu="@menu/bottom_navi_menu"/>
<FrameLayout
android:id="@+id/mainFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</RelativeLayout>
- 원래는 BottomNavigationView의 기본은 아이템과 Menu에 title로 넣은 값이 같이 보이는 것 입니다. 하지만, 전 아이템만 보고 싶어서 app:labelVisibilityMode="unlabeled" 속성을 추가했습니다.
- 만든 menu를 적용시키기 위해서 app:menu="@menu/bottom_navi_menu" 속성을 추가합니다.
4. 각각의 탭의 구현을 위한 Fragment.java 파일과 화면XML 파일인 fragment.xml을 생성.
- 전 4개의 탭을 구현했기 때문에 4개의 Fragment파일과 4개의 fragment.xml파일을 생성했습니다.
- 각각의 이름은 HomeFragment.java, SearchFragment.java, AddFragment.java, ProfileFragment로 자바클래스 파일을 생성하였고, home_fragment.xml, search _fragment.xml, add _fragment.xml, profile _fragment.xml로 xml 파일을 생성했습니다.
① Java 클래스 파일
public class HomeFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.home_fragment, container, false);
}
}
- HomeFragment 파일을 샘플로 보여드렸습니다. 위의 파일에서 "HomeFragment"와 "R.layout.home_fragment"만 각각의 파일명으로 변경해주면 됩니다.
② XML 파일
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HOME_Page"
android:textSize="30dp"
android:textStyle="bold"/>
</LinearLayout>
- 화면은 간단하게 "Home_Page"가 나오도록만 작성했습니다.
5. MainActivity.java 의 작성.
public class MainActivity extends AppCompatActivity {
BottomNavigationView bottomNavigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bottomNavigationView = findViewById(R.id.bottomNavi);
getSupportFragmentManager().beginTransaction().add(R.id.mainFrame, new HomeFragment()).commit();
bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.item_home:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new HomeFragment()).commit();
break;
case R.id.item_search:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new SearchFragment()).commit();
break;
case R.id.item_add:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new AddFragment()).commit();
break;
case R.id.item_profile:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new ProfileFragment()).commit();
break;
}
return true;
}
});
}
}
- 기존에 쓰이던 setOnNavigationItemSelectedListener가 deprecated 되었기 때문에 새로운 setOnItemSelectedListener를 사용해야합니다. 이점은 맨 위에 링크로 드린 공식문서에도 나와있으니, 참고하시기 바랍니다.
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
case R.id.item_home:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new HomeFragment()).commit();
break;
case R.id.item_search:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new SearchFragment()).commit();
break;
case R.id.item_add:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new AddFragment()).commit();
break;
case R.id.item_profile:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new ProfileFragment()).commit();
break;
}
return true;
}
});
setOnNavigationItemSelectedListener에 deprecated 되었다고 라인이 생김을 볼 수 있습니다.
그래서 setOnItemSelectedListener로 변경해서 사용하면 됩니다.
bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()) {
//item을 클릭시 id값을 가져와 FrameLayout에 fragment.xml띄우기
case R.id.item_home:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new HomeFragment()).commit();
break;
case R.id.item_search:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new SearchFragment()).commit();
break;
case R.id.item_add:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new AddFragment()).commit();
break;
case R.id.item_profile:
getSupportFragmentManager().beginTransaction().replace(R.id.mainFrame, new ProfileFragment()).commit();
break;
}
return true;
}
});
6. 결과 화면
댓글