Android Studio - Fragment

Fragment

 

 

 

기존의 안드로이드는

 

하나의 화면에 하나의 데이터를 표시한다는게 안드로이드의 철학.

핸드폰은 화면이 작기때문에

 

버튼을 누르면 새로운 화면을 띄워 원하는 데이터의 가독성을 확보할 수 있지만

태블릿 같은 경우는

 

화면이 넓기 때문에 공간의 낭비를 최소화 하여 화면에 일부만

갱신하게끔 하는 것을 Fragment 라고 한다.

즉, 전체는 액티비티고 화면을 탭을 눌러 바꾸고 싶은 부분만 바꾸게하는걸 Fragment 라고 한다.

 

사용 방법은 아래와 같다.

 

 

 

1. activity_main.xml의 TextView를 지워주고,  레이아웃을 RelativeLayout으로 바꾼다.

 

 

↓  ↓  ↓

 

<?xml version="1.0" encoding="utf-8"?>
<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">

   

</RelativeLayout>

 

 

 

2. Bottom으로 검색하여, BottomNavigationView를 가져온다.

 

 

 

 

 

3. id, width, height, align 설정을 통해 원하는 위치에 배치 할 수 있다.

 

이번 예시는 아래에 배치하도록 하겠다.

 

 

 

코드로 보면 아래와 같다.

 

<?xml version="1.0" encoding="utf-8"?>
<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/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" />
</RelativeLayout>

 

 

 

4. 왼쪽에 Resource Manager 탭 클릭 - Navigation 클릭 - + 버튼 클릭 - Navigation Resource File 클릭

 

 

 

 

5. File name : my_nav로 지정 후 OK버튼 클릭

 

 

 

 

6. OK 버튼 선택

 

 

 

 

7. Design 탭에서 Create new destination 클릭

 

 

 

 

8. Fragment(Blank) 선택 후 NEXT 버튼 클릭

 

 

 

 

9. Fragment Name : FirstFragment 지정 후 FINISH 버튼 클릭

 

 

 

 

10. 3개의 탭을 구현하기 위해 SecondFragment, ThirdFragment도 만들어 준다.

 

 

 

 

11. 다시 activity_main으로 돌아와 NavHostFragment를 가져온다.

 

 

 

12. 보통은 자동으로 인식이 되겠지만 안되는 경우

 

수동으로 navGraph 우측 버튼을 클릭해서 my_nav를 선택해 준다.

 

 

 

 

13. Fragment의 위치를 지정해 준다.

 

Attributes에서 above라고 검색하면 layout_above가 나타나는데

 

bottomNavigationView를 선택하면 그 위로 올라가게 된다.

 

즉, 우리는 메뉴 탭을 Fragment 아래에 구성 할 것이다.

 

 

 

 

14. Fragment 3개에 기본적으로 배치되어 있는 TextView의 Text를 아래와 같이 바꾸어 주고

 

가독성이 좋게 Size도 키워 준다.

 

 

 

※ 주의 ※

 

TextView의 첫번째 text 변경 후 secondFragment에서 TextView의 text를 변경하려 할 때

 

firstFragment, thirdFragment의 TextView가 함께 변경되는 상황이 생길 수 있는데

 

그땐 strings.xml 파일에 리소스가 추가되어 그런 것이니 당황하지 말고

 

Design View가 아닌 Code View에서 하드코딩해 주면 문제없이 사용 가능하다.

 

아래는 참고용 코드이다.

 

<?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=".FirstFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="첫번째 프래그먼트"
        android:textSize="30sp" />

</FrameLayout>

 

 

15. 이제 메뉴를 만들어야 한다.

 

Resource Manager탭 클릭 - 더보기 클릭 - Menu 선택 - Menu Resource File 클릭

 

 

 

 

16. File name : bottom_menu로 지정 후 OK버튼 클릭

 

 

 

 

17. Design View에서 Menu Item을 3개 추가한다.

 

 

 

18. 탭에 아이콘을 넣기위해 아이콘을 만들자

 

Resource Manager에서 drawable클릭 - Vector Asset 클릭

 

 

 

 

19. Clip Art를 이용해 Home, People, Setting 아이콘을 추가해 준다.

 

Name은 각각 ic_home, ic_people, ic_setting으로 지정하자.

 

 

 

 

 

20. 아이콘 까지 추가를 완료했으면 Menu Item들의 id, title, icon을 지정해주자.

 

id는 각 Fragment의 id와 동일하게 하고

 

title은 홈, 친구, 설정으로 하고

 

icon도 알맞게 설정 해 준다.

 

 

 

 

21. activity_main.xml 파일로 돌아가 BottomNavigationView에서 menu를 검색 후 셋팅해준다.

 

 

 

 

22. menu 설정을 마치면 프리뷰와 같이 아이콘 3개와 함께 탭이 추가된 걸 확인 할 수 있다.

 

 

 

 

23. 에뮬레이터나 본인의 핸드폰을 USB에 연결해 실행해 본다.

 

아직 화면 전환은 되지 않는게 당연하다. 

 

 

 

24. 화면 전환을 위해 MainActivity.java에 코드를 추가해 주자

 

 

public class MainActivity extends AppCompatActivity {

    BottomNavigationView navigationView;

    Fragment firstFragment;
    Fragment secondFragment;
    Fragment thirdFragment;

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

        // 액션바 숨기는 코드
//        getSupportActionBar().hide();
        getSupportActionBar().setTitle("홈");
        navigationView = findViewById(R.id.bottomNavigationView);

        firstFragment = new FirstFragment();
        secondFragment = new SecondFragment();
        thirdFragment = new ThirdFragment();

        navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                int itemId = item.getItemId();

                Fragment fragment = null;

                if(itemId == R.id.firstFragment){
                    fragment = firstFragment;
                    getSupportActionBar().setTitle("홈");
                    getSupportActionBar().show();
                } else if(itemId == R.id.secondFragment){
                    fragment = secondFragment;

                    getSupportActionBar().setTitle("친구");
                    getSupportActionBar().show();
                    
                } else if(itemId == R.id.thirdFragment){
                    fragment = thirdFragment;

                    getSupportActionBar().hide();

                }
                return loadFragment(fragment);
            }
        });

    }

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

 

 

25. 에뮬레이터 혹은 핸드폰으로 실행 후 확인

 

 

 

 

 

정상적으로 작동하는 것을 확인 할 수 있다.

 

각 페이지마다 기능 구현은 각 Fragment.java 클래스에서 코드를 작성해 기능을 구현 할 수 있다.