Android(Java) - Fragment - 탭을 이용하여 각각의 다른 화면으로 전환하기

 

목표

• 아래의 탭을 누르면 그에 맞는 화면으로 전환하기

---

activity_main.xml

• 기본 레이아웃 형식 변경 - RelativeLayout

---

• BottomNavigationView 위젯 추가
  • id - bottomNavigationView
  • Attributes - layout_alignParentBottom (True)

 

---

• NavHostFragment 위젯 추가
  • id : fragment

---

• 추가한 NavHostFragment(id:fragment)의 속성 설정
  • layout_above - bottomNavigationView

---

Fragment

• Package - New - Fragment - Fragment (Blank) (프래그먼트 추가)
  • 테스트를 위한 프래그먼트 3개 추가
    • FirstFragment, SecondFragment, ThirdFragment

---

Navigation

• Resource Manager - Navigation - '+'버튼 - Navigation Resource File(파일 추가)

---

• Navigation Resource File 파일 생성 (파일명 my_nav)

---

my_nav.xml (Navigation)

• 화면 + 모양 클릭 - 출력될 프래그먼트 선택 (fragment_first.xml)
  • Navigation (Tab Menu)에서 보여질 프래그먼트들 설정

---

• 속성으로도 지정 가능
  • 속성 - startDestination (실행시 처음에 보여질 기본 프래그먼트 설정)

---

• Resource Manager - Menu - '+' 버튼 - my_nav (Navigation)

---

• 생성 할 파일명 : bottom_menu - OK

---

bottom_menu.xml

• Menu Item 3개 추가

---

• Menu Item (차례대로)
  • id : firstFragment , secondFragment, thirdFragment
  • title : 홈, 친구, 셋팅
  • icon : vector asset 에서 적절한 이미지를 찾아 입력

---

• 예시에서 사용 된 Vector Asset

---

activity_main.xml

• BottomNavigationView의 속성 설정
  • menu - 위에서 생성한 bottom_menu 지정

---

현재까지의 UI 상황

• 아래에서 3개의 탭 출력

---

탭을 누르면 각각의 다른 화면을 출력하는 기능 구현하기 (각각의 프래그먼트 호출)

Android Studio - Java 사용

• MainActivity.java

public class MainActivity extends AppCompatActivity {

    BottomNavigationView navigationView;
    Fragment firstFragment, secondFragment, thirdFragment;

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

        // 액션바 숨기는 코드
//        getSupportActionBar().hide();

        // 네이게이션뷰에 사용 될 객체 생성
        navigationView = findViewById(R.id.bottomNavigationView);
        firstFragment = new FirstFragment();
        secondFragment = new SecondFragment();
        thirdFragment = new ThirdFragment();

        navigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int itemId = item.getItemId();

                Fragment fragment = null;

                // 메뉴 선택시 지정된 프래그먼트로 이동 (loadFragment 메소드 사용)
                if(itemId == R.id.firstFragment){
                    fragment = firstFragment;
                    getSupportActionBar().setTitle("홈");
                    getSupportActionBar().show();
                } else if(itemId == R.id.secondFragment){
                    fragment = secondFragment;
                    getSupportActionBar().setTitle("친구");
                } else if(itemId == R.id.thirdFragment){
                    fragment = thirdFragment;
                    getSupportActionBar().setTitle("셋팅");
                }
                return loadFragment(fragment);
            }
        });
    }

    private boolean loadFragment(Fragment fragment) {
        if(fragment != null){
            getSupportFragmentManager()
                    .beginTransaction()
                    .replace(R.id.fragment, fragment)
                    .commit();
            return true;
        }
        return false;
    }
}

---

실행 화면

• 홈, 친구, 셋팅 메뉴를 눌렀을 때 각각의 다른 화면 출력
  • (메뉴를 눌렀을 때 지정된 프래그먼트 호출)

 

 

---

Fragment 화면 코딩

Activity는 onCreate에서 코드를 작성하지만, Fragment는 onCreateView에서 코드를 작성

public class FirstFragment extends Fragment {

    // TODO: Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM1 = "param1";
    private static final String ARG_PARAM2 = "param2";

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

    // TODO: Rename and change types and number of parameters
    public static FirstFragment newInstance(String param1, String param2) {
        FirstFragment fragment = new FirstFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM1, param1);
        args.putString(ARG_PARAM2, param2);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    // Fragment는 onCreate가 아닌 onCreateView에서 연결
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_first, container, false);

		// 여기에 코드를 작성

        return rootView;
    }
}