5. 안드로이드 카카오톡처럼 보이는 BottomNavigationView 구현

오랜만에 만들고 싶은 어플리케이션이 생겼다.

오랜만에 안드로이드 스튜디오를 실행시키니 많은 업그레이드 후 아이콘이 야광색으로 바뀌었다.

버전이 3.6.1이네 ...

아주 조그마한 걱정이 생겼다. 기존에 쓰던 것들이 안될거 같다는 생각이..

기존에 만들어 놓은 bottomNavigationView 코드가 있어 복붙하니 역시 안되는군..

 

1. Implementation

 Gradle(app)로 들어가 안드로이드 디벨럽에서 본 대로 입력하자.

implementation 'androidx.navigation:navigation-fragment:2.3.0-alpha01'
implementation "androidx.navigation:navigation-ui:2.3.0-alpha01"

 

2. Menu만들기

 Menu_bottom.xml을 만들자 이미지는 벡터이미지로 만들어서 대충 넣어보자

 

3. xml부분 

activity_main.xml

FrameLayout을 사용이유는 아래 BottomNavigationView의 아이템들을 누르면 화면이 바뀌어야 해서 만들었다.

 

fragment_menu1.xml ~ fragment_menu3.xml

프레그먼트를 1~3까지 이렇게 비슷하게 만들어 놓자.

 

 

4, JAVA부분

Menu1Fragment.java~Menu3Fragment.java

프레그먼트 부분 먼저 JAVA를 만들어 놓아야 한다.

Menu1Fragment~Menu3Fragment까지 비슷하게 만들어주자.

public class Menu1Fragment extends Fragment {

    ViewGroup viewGroup;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        viewGroup = (ViewGroup) inflater.inflate(R.layout.fragment_menu1,container,false);

        return viewGroup;
    };
}

그리고 마지막으로 Main부분

public class MainActivity extends AppCompatActivity {

    private FragmentManager fragmentManager = getSupportFragmentManager();
    private Menu1Fragment menu1Fragment = new Menu1Fragment();
    private Menu2Fragment menu2Fragment = new Menu2Fragment();
    private Menu3Fragment menu3Fragment = new Menu3Fragment();

    private BottomNavigationView bottomNavigationView;

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

        bottomNavigationView = findViewById(R.id.bottom_navigation_view);
        // 첫화면에 띄워야 할 것들 지정해주기
        getSupportFragmentManager().beginTransaction().replace(R.id.layout_main_frame,menu1Fragment).commitAllowingStateLoss();
        //바텀 네비게이션뷰 안의 아이템들 설정
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                FragmentTransaction transaction = fragmentManager.beginTransaction();
                switch (item.getItemId()) {
                    case R.id.navigation_menu1: {
                        getSupportFragmentManager().beginTransaction().replace(R.id.layout_main_frame, menu1Fragment).commitAllowingStateLoss();
                        break;
                    }
                    case R.id.navigation_menu2: {
                        getSupportFragmentManager().beginTransaction().replace(R.id.layout_main_frame, menu2Fragment).commitAllowingStateLoss();
                        break;
                    }
                    case R.id.navigation_menu3: {
                        getSupportFragmentManager().beginTransaction().replace(R.id.layout_main_frame, menu3Fragment).commitAllowingStateLoss();
                        break;
                    }
                }
                return true;
            }
        });
    }
}

fragmentManager을 만들어서 프레그먼트를 관리를 해줘야하고, bottomNavigationView안의 아이템을 눌렀을때 

보여주어야 하는것을 switch안에 해놓는다.

 

그러면 이렇게 아래 아이콘을 누르면 화면이 숙숙 바뀐다

끝~