앱만들기.24(인스타 하단바 bottom navigation view)

drawable -> vector assets 누르면 새로운 아이콘 추가됨

clip art에서 원하는 모양 변경가능

 

res -> new menu resource directory-> new menu file

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/action_add"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_add_24"
        android:title="추가"/>
    <item
        android:id="@+id/action_bt"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_bluetooth_24"
        android:title="블루투스"/>
    <item
        android:id="@+id/action_call"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_call_24"
        android:title="전화"/>
    <item
        android:id="@+id/action_email"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_email_24"
        android:title="메일"/>
    <item
        android:id="@+id/action_mood"
        android:enabled="true"
        android:icon="@drawable/ic_baseline_mood_24"
        android:title="기분"/>


</menu>

이번에는 constraintlayout 써보자~

 

일단 여기서 bottom navigation view 검색해서 하단에 놓아주고,

코딩하자.

 

constraintlayout은 제약을 주는 레이아웃

해상도 대응, 대세인 레이아웃

보통 디자인탭에서 작업하는게 더 편리

 

위젯관계설정

app : layout_constraint방향 ( 이 위젯의 해당방향에서)_to(대상 위젯의 해당방향으로)of : 대상 id or parent 

근데 이거 그냥 design탭에서 직접 마우스로끌어서 하는게 더 편함

위젯끌어와서 동그라미 드래그해주면 됨.

 

오~ 완전자세한설명

https://offbyone.tistory.com/249

안드로이드 UI 만들기 ConstraintLayout 기본 사용법

 

프래그먼트 매니저(Fragment Manager) 

프래그먼트를 다룰때에 꼭 필요한 요소,액티비티와 프래그먼트의 중간에서 서로를 이어주는 역할을 하는것

• 프래그먼트 트랜잭션 (Fragment Transaction)  트랜잭션(Transaction) 이란, 어떤 대상에 대해 추가, 제거, 변경 등의 작업들이 발생하는것을 묶어서 얘기하는 것입니다. 프래그먼트 매니저는 액티비티가 사용자의 입력 이벤트에 따라 프래그먼트를 추가 및 삭제 그리고 교체 등의 작업들을 수행 할 수 있게 해줍니다. 뿐만아니라 행해진 트랜잭션의 상태를 프래그먼트 백스택(Fragment Backstack) 을 통해 저장할 수 있습니다.
  
  

• 액티비티와의 통신

  트랜잭션이 프래그먼트를 통째로 추가, 삭제, 교체를 하는 작업인 반면에, 단일 프래그먼트에 대한 더 세부적인 작업 또한 가능합니다. 다시말해, 프래그먼트 내의 구성요소들 하나하나에 접근 할 수 있도록 해줍니다. 이를 통해 액티비티에서 특정 이벤트가 발생했을 때, 프래그먼트에서 적절한 UI 동작을 할 수 있도록 구현 할 수 있습니다.

 

프래그먼트 트랜잭션 (Fragment Transaction)

   프래그먼트 트랜잭션의 사전적 정의는 '프래그먼트를 추가, 삭제 및 교체를 할 수 있다.' 지만 실제 안드로이드 내의 프래그먼트 트랜잭션은 '프래그먼트 백 스택관리', '프래그먼트 전환 애니메이션 설정' 등 생각보다 더 많은 일들을 수행 할 수 있습니다.

 

1) 프래그먼트 트랜잭션 설정

  FragmentManager 를 통해 FragmentTransaction 의 인스턴스를 가져 올 수 있는데 그 방법은 다음과 같습니다.

우선 프래그먼트 매니저를 선언 해준 뒤에 beginTransaction() 를 호출 함으로써 프래그먼트 트랜잭션 작업을 시작 할 수 있습니다. 이후에 프래그먼트에 대한 각종 트랜잭션 작업들(추가, 삭제, 교체 등) 과 애니메이션, 프래그먼트 백스택 등을 추가 해준 뒤에 commit() 을 호출하여 트랜잭션을 마무리 해줍니다. 이 때, 주의해야 할 점은 반드시 commit() 을 호출해 주어야만 transaction 작업을 정상적으로 수행 할 수 있습니다.


출처: https://tedrepository.tistory.com/6 [Ted's IT Repository]

 

 

main.js 

 

package com.example.bottomnavi;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

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

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    private BottomNavigationView bottomNavigationView; //바텀네비게이션 뷰,하단바

    private FragmentManager fm;
    private FragmentTransaction ft;
    private Frag1 frag1;
    private Frag2 frag2;
    private Frag3 frag3;
    private Frag4 frag4;
    private Frag5 frag5;


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

            //객체생성, 프래그먼트를 자바에서 생성해줌
        bottomNavigationView = findViewById(R.id.bottomNavi);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch(menuItem.getItemId()){
                    case R.id.action_add:
                        setFrag(0);
                        break;
                    case R.id.action_bt:
                        setFrag(1);
                        break;
                    case R.id.action_call:
                        setFrag(2);
                        break;
                    case R.id.action_email:
                        setFrag(3);
                        break;
                    case R.id.action_mood:
                        setFrag(4);
                        break;
                }
                return true;
            }

        });
        frag1 = new Frag1();
        frag2 = new Frag2();
        frag3 = new Frag3();
        frag4 = new Frag4();
        frag5 = new Frag5();
        setFrag(0); //첫 프래그먼트 화면 지정 (번호 선택)



    }



    //프래그먼트 교체가 일어나는 실행문.
    private void setFrag(int n){
        fm = getSupportFragmentManager();
        ft = fm.beginTransaction();
        switch (n){
            case 0:
                ft.replace(R.id.main_frame,frag1);
                ft.commit(); //저장
                break;

            case 1:
                ft.replace(R.id.main_frame,frag2);
                ft.commit();
                break;

            case 2:
                ft.replace(R.id.main_frame,frag3);
                ft.commit();
                break;

            case 3:
                ft.replace(R.id.main_frame,frag4);
                ft.commit();
                break;

            case 4:
                ft.replace(R.id.main_frame,frag5);
                ft.commit();
                break;
        }



    }


}

Frag 1,2,3,4,5.js

package com.example.bottomnavi;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

public class Frag1 extends Fragment {

    private View view;

    @Nullable
    //프래그먼트는 oncreateview
    @Override
    public View onCreateView(@NonNull  LayoutInflater inflater, @Nullable  ViewGroup container, @Nullable  Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.frag1,container,false);



        return view;
    }
}

Frag.xml 1,2,3,4,5

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="1번화면 입니다."
        android:textSize="40sp"/>

</LinearLayout>

drawable.xml 예시

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</vector>

main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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/bottomNavi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:itemIconTint="#000000"
        app:itemTextColor="#000000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_menu"
        tools:layout_editor_absoluteX="1dp" />

    <FrameLayout
        android:id="@+id/main_frame"
        android:layout_width="424dp"
        android:layout_height="672dp"
        app:layout_constraintBottom_toTopOf="@+id/bottomNavi"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

 

중간에 frag2에 글자 잘못써서 안바뀌기는 하는데

우왕~쨌든신기하당!^^