[부스트코스:안드로이드 프로그래밍] 4. 화면 내비게이션

*해당 포스팅은 커넥트 재단의 edwith-[부스트 코스] 안드로이드 프로그래밍의 강의 자료를 바탕으로 작성되었습니다

 

---

<KEY POINT>

1. 화면에 나타나는 내비게이션 메뉴 레이아웃 작성하기.

2. 뷰 페이저 사용하기.

3. 프레그먼트에서 다른 프레그먼트 부르기

 

1. 화면에 나타나는 네비게이션 메뉴 레이아웃 작성하기.

저 같은 경우에는 안드로이드 스튜디오에서 기본적으로 제공하는 내비게이션 액티비티를 사용하지 않았습니다. 기초적인 지식이 없는 상태에서 미리 코딩되어있는 코드를 이해하기가 힘들어서 직접 짜 보았습니다.

 

xml 코드의 최상위 레이아웃은 리니어 레이아웃으로 하였고 크기를 임의로 지정해주었습니다.

 

그리고 여기서 핵심 포인트는 메인 액티비티의 xml 코드의 최상위 레이아웃이 DrawerLayout 이어야 합니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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=".StartActvity"
    android:id="@+id/framecontainer">

    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/pager"/>



    <include layout="@layout/navi"/> 

</androidx.drawerlayout.widget.DrawerLayout>

그리고 내비게이션 xml 레이아웃을 include 해주어야 합니다. 그래서 레이아웃에 마치, view를 보여주는 것처럼 하게 되는 것입니다.

private DrawerLayout drawerLayout;
private View drawView;

//onCreate 메소드 내에..

drawerLayout =  findViewById(R.id.framecontainer); //최상위 레이아웃을 찾아줌.

drawView = findViewById(R.id.view);//네비게이션 xml 레이아웃 파일의 최상위 레이아웃.


DrawerLayout.DrawerListener listener = new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {

            }

            @Override
            public void onDrawerOpened(@NonNull View drawerView) {

            }

            @Override
            public void onDrawerClosed(@NonNull View drawerView) {

            }

            @Override
            public void onDrawerStateChanged(int newState) {

            }
        };

2. 뷰 페이저 사용하기.

뷰 페이저의 역할은 좌 우로 스크롤하였을 때 목록들이 넘어가게 해 줍니다. 각 화면은 다 프레그먼트화 시켜주었으며 프레그먼트 화 시켜준 프레그먼트 뷰 페이저에 올려주었습니다.

ViewPager pager = (ViewPager) findViewById(R.id.pager);

        pager.setOffscreenPageLimit(3);

        MoviePagerAdapter adapter = new MoviePagerAdapter(getSupportFragmentManager());

        fragment1= new Fragment1();
        adapter.addItem(fragment1);

        Fragment2 fragment2 = new Fragment2();
        adapter.addItem(fragment2);

        Fragment3 fragment3 = new Fragment3();
        adapter.addItem(fragment3);

        pager.setAdapter(adapter);

뷰 페이저 역시 리스트 뷰처럼 어댑터를 상속받은 클래스를 하나 정의해주어야 합니다.

class MoviePagerAdapter extends FragmentStatePagerAdapter {
            ArrayList<Fragment> items = new ArrayList<Fragment>();

        public MoviePagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public void addItem(Fragment item) {
            items.add(item);
        }

        @Override
        public Fragment getItem(int position) {
            return items.get(position);
        }

        @Override
        public int getCount() {
            return items.size();
        }

    }

3. 프레그먼트에서 다른 프레그먼트 불러들이기.

영화 목록 화면에서 상세보기 버튼을 누르면 영화 상세 화면이 나오게 하는 방법은 getFragmentmanager를 사용하시면 됩니다. getsupport가 안 되는 이유는 액티비티가 아닌 프레그먼트이기 때문입니다.

 

프레그먼트 1 자바 소스 코드.(군도 화면)

public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment1,container,false);
        mainActivity = new MainActivity(); // 메인 프레그 먼트\

        movieImage = rootView.findViewById(R.id.movieImage1);

        Button button = rootView.findViewById(R.id.goDetailButton);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                FragmentTransaction transaction = getFragmentManager().beginTransaction();
                transaction.add(R.id.framecontainer,mainActivity);
                transaction.addToBackStack(null);
                transaction.commit();
            }
        });



        return rootView;
    }

여기서 영화 상세화면으로 넘어왔는데 다시 영화 목록 화면을 누르면 앱이 죽어서 종료가 되어버렸습니다. 그 이유는 하나의 액티비티 위에 여러 가지 프레그먼트가 쌓이는데 그 쌓인 프레그먼트들은 그대로 싸이는 것이 아니라 날아가버리기 때문입니다. 이러한 문제를 해결하기 위해서 프레그먼트도 액티비티와 마찬가지로 스택을 쌓아주는 addToBackStack 함수를 이용하여 스택을 쌓아주었습니다.

 

 

4강까지 공부를 해오면서 점점 어려워지지만 많은 위젯들의 쓰임새를 알게 되어 유용하게 쓰일 수 있을 것 같습니다.