안드로이드 스튜디오 탭 바(Tab Bar) 구현하기

 

안드로이드 스튜디오 Activity와 Fragment의 차이 

 

 

Activity

 

앱이 실행되면 첫 번째로 호출되는 컴포넌트,

 

화면 전체를 차지하며, 모든 UI 요소를 포함한다

 

 

vs

 

 

Fragment

 

ex) 태블릿의 두 패널 화면(왼쪽 목록, 오른쪽 상세 보기), 탭 뷰의 각 탭 등.

 

Activity 내에서 부분적으로 UI를 구성할 수 있는 재사용 가능한 컴포넌트

 

Activity의 하위 컴포넌트로, 여러 Fragment를 조합하여 하나의 Activity를 구성한다.

 

화면의 일부만을 차지하며, 여러 Fragment가 하나의 Activity 내에서 동시 작동할 수 있다.

 

Fragment는 자신의 수명 주기를 가지지만, 이는 Activity의 수명 주기에 종속된다.

 

 

 

Flutter : 원소스 멀티유저란 ?

 

- Flutter는 구글에서 개발한 오픈소스 UI 소프트웨어 개발 키트(SDK)

 

- 하나의 소스코드로 다양한 플랫폼에서 애플리케이션을 개발할 수 있도록 도와준다

 

- '원소스 멀티유저'는 Flutter의 핵심 철학 중 하나

 

 

원소스 멀티유저

 

단일 코드베이스로 iOS, Android, 웹, 데스크탑 등 다양한 플랫폼에서 동작하는 애플리케이션을 개발

별도의 코드를 작성할 필요 없이, 하나의 코드로 여러 환경에 배포할 수 있다.

또한 플랫폼 간의 UI와 동작의 일관성을 유지할 수 있다.

 

 

 

 

탭 바(Tab Bar) 구현하기

 

 

라이브러리 설치하기

 

 

 

 

 

activity_main에 RelativeLayout 끌어다놓고, Constraint 연결해준다

 

 

 

 

 

 

BottomNavigationView를 검색한 후, RelativeLayout 안에 넣고, layout_height를 wrap_content로 설정한다.

 

 

 

 

 

BottomNavigationView 의 layout_alignParentBottom을 true로 해준다.

 

 

 

 

 

BottomNavigationView 의 background를 하얀색으로 설정해준다.

 

 

 

 

 

폴더 모양 밑에 있는 Resource Manager를 클릭해주고, Navigation으로 이동한다.

 

 

 

 

+ 버튼을 누르고 Navigation Resource File을 선택한다.

 

 

 

 

이름은 my_nav로 하였다.

 

 

 

 

 

 

패키지로 만들어서 파일 생성해도 된다

 

 

 

 

나타나는 화면에서 아래와 동일한 아이콘을 선택하여 Create new destination을 클릭한다

 

 

 

 

빈 프레임워크를 선택하였다.

 

 

 

 

 

 

같은 방식으로, 2개 더 만들어준다.

 

 

 

 

마우스로 조정 가능하다.

 

 

 

 

 

다시 activity_main으로 와서 NavHostFragment를 RelativeLayout안에 넣어준다.

 

 

 

 

 

resource의 layout 폴더의 fragment_first로 이동해서,

 

 

 

TextView 클릭하고,

 

 

 

 

 

layout_height를 wrap_content로 설정하고, 텍스트와 텍스트사이즈를 변경해준다 

 

 

 

 

 

resource 폴더에서 마우스 오른쪽 클릭으로, menu 폴더를 만들어주고

 

 

 

 

 

그 menu 폴더 안에 bottom_menu라는 메뉴 파일을 만들어준다

 

 

 

 

 

bottom_menu 파일에서, 아이템을 세개 끌어다 놓고,

 

 

 

 

 

아이디 설정과 title, icon 설정을 해준다. 아이콘은 아래의 웹사이트에서 다운받는다.

 

 

 

 

home, smartdisplay , settings 아이콘 다운받고 drawable 폴더에 넣는다.

 

https://fonts.google.com/icons

Material Symbols and Icons - Google Fonts

 

 

 

 

 

 

activity_main으로 이동해서, bottomNavigationView를 클릭한 후 menu를 검색하여 오른쪽 부분을 클릭한다

 

 

 

 

 

아래와 같이 bottom menu 탭 바가 만들어졌다.

 

 

 

 

글자 안나오고 아이콘만 나오게 하려면 unlabeled 하면 된다.

 

 

 

 

 

 

 

 

탭 바를 누르면 fragment를 동작하게 만드는 방법

 

MainActivity.java 클래스로 이동하여서 작성해준다.

 

package com.~.tabbar;

import android.os.Bundle;
import android.view.MenuItem;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

import com.google.android.material.bottomnavigation.BottomNavigationItemView;
import com.google.android.material.bottomnavigation.BottomNavigationView;
import com.google.android.material.navigation.NavigationBarView;


public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;

    // 각각의 프레그먼트들을 멤버변수로 만든다.
    Fragment firstFragment;
    Fragment secondFragment;
    Fragment thirdFragment;

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

        bottomNavigationView = findViewById(R.id.bottomNavigationView);

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

        bottomNavigationView.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {

                int itemId = menuItem.getItemId();
                
                //비어 있는 프레그먼트 만든다
                Fragment fragment = null;

                if(itemId == R.id.firstFragment){
                    fragment = firstFragment;

                } else if(itemId == R.id.secondFragment){
                    fragment = secondFragment;

                } else if(itemId == R.id.thirdFragment){
                    fragment = thirdFragment;

                }
                
                return loadFragment(fragment);
            }
        });

    }

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

 

 

 

 

 

 

탭 버튼 아이콘 색 바꾸기 

 

아래 블로그를 참고한다.

 

https://lcw126.tistory.com/330

안드로이드 BottomNavigationView ( icon, text 색상 변경 )