🟨 목 차 🟨
Navigation
1. Implementation
2. Menu 디렉터리와 item 만들기
3. Main Activity(홈 화면) 에서의 xml 파일에서 bottom navigation 추가
4. 각각의 네이게이션 아이템 항목에 대한 Fragment.xml 와 Fragment.java 추가
5. Main Activity.java(홈 화면)와 만든 Fragment.java 들과 연결
중고거래앱을 만들면서 어떤식으로 화면을 구성을 할 까 생각을 했다.
생각을 해낸 결과 '네비게이션바' 를 이용을 하여 각 바에 원하는 기능을 넣어 이동하는 느낌으로 구성을 하기로 했다.
말로만 하기에는 어려워서 동영상으로 쉽게 보여주겠다.
위에 동영상을 보게 된다면 밑에 네이게이션바 를 클릭하게 되면 네비게이션바를 유지하되 그 안에 있는 항목을 클릭하면 내가 원하는 화면을 구성을 할 수 있다.
◼️ Navigation ◼️
◼️ 1. Implementation
build.gradle(Module:app) > dependencies 에 추가한다.
implementation 'androidx.navigation:navigation-fragment:2.3.2'
implementation 'androidx.navigation:navigation-ui:2.3.2'
◼️ 2. Menu 디렉터리와 item 만들기
res > new > Android Resource Directory > Resource type > menu 를 추가하여 메뉴 디렉터리를 생성해준다.
생성된 menu 디렉터리에 FIile > new > Vector Accet 를 생성한다. (이름은 item 으로 생성하였다.)
그 후에 아래와 같은 코드를 입력해준다.(아이콘이 될 이미지는 안드로이드 스튜디오에서 제공해주는 벡터 이미지를 사용하였다.)
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/item_fragment1"
android:enabled="true"
android:icon="@drawable/icon_home"
android:title="홈">
</item>
<item
android:id="@+id/item_fragment2"
android:enabled="true"
android:icon="@drawable/icon_near"
android:title="내 근처">
</item>
<item
android:id="@+id/item_fragment3"
android:enabled="true"
android:icon="@drawable/icon_chat"
android:title="채팅">
</item>
<item
android:id="@+id/item_fragment4"
android:enabled="true"
android:icon="@drawable/icon_me"
android:title="나의 수수">
</item>
</menu>
◼️ 3. Main Activity(홈 화면) 에서의 xml 파일에서 bottom navigation 추가한다.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Fragment1_home">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:layout_width="match_parent"
android:layout_height="60dp"
android:id="@+id/bottomNavi"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:background="#fff"
app:labelVisibilityMode = "labeled"
app:menu="@menu/item"
></com.google.android.material.bottomnavigation.BottomNavigationView>
//app:menu 를 이용하여 전에 menu 디렉토리의 item.xml 파일을 넣어 연결해준다.
<!-- TODO: Update blank fragment layout -->
<FrameLayout
android:id="@+id/main_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"></FrameLayout>
</RelativeLayout>
bottomNavigation의 기본 색상은 검정색이며, 타이들(필수)+아이콘이 기본 외형이다. 만약 아이콘만 보여주고싶을땐app:labelVisibilityMode="unlable" 속성을 추가해주면 된다.
app:menu 를 이용하여 전에 menu 디렉토리의 item.xml 파일을 넣어 연결해준다.
◼️ 4. 각각의 네이게이션 아이템 항목에 대한 Fragment.xml 와 Fragment.java 추가 해준다.
File > new > Fragment > Fragment(blank) > Fragment1(name) 생성 하면 java와 layout이 동시에 생성된다.
먼저 Fragment1.java에 onCreateView를 제외하고 나머지는 다 지워준다.
item 갯수에 맞게 xml,java 파일 복사붙여넣기 또는 new로 생성하기로 만들어준다. (나는 4개의 item의 갯수는 4개가 있으니 Fragment 1~4를 만들었다.)
package com.example.shopproject;
import static com.example.shopproject.Sell_Form.image_data;
import android.content.Context;
import android.content.Intent;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.database.ChildEventListener;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import java.util.ArrayList;
public class Fragment1_home extends Fragment {
Context context;
private EditText search_product;
private TextView city;
private TextView trade_text;
private TextView myproduct_text;
private ImageView check;
private ImageView category;
private ImageView alarm;
private ImageView trade_image;
private ImageView myproduct_image;
private Spinner location_spinner;
private FirebaseAuth mFirebaseAuth;
private DatabaseReference mDatabaseRef;
private ChildEventListener mChild;
private ArrayList<Trade_RecyclerProductData> arrayList00;
static ArrayList<Trade_RecyclerProductData> arrayList33 = new ArrayList<>();
static ArrayList<Trade_RecyclerProductData> filterdList = new ArrayList<>(); //리사이클러뷰 데이터가 담겨 있는 곳을 ArrayList로 참조한다.
static Trade_RecyclerProductAdapter recyclerProductAdapter; //내가 만든 RecyclerProductAdapter 의 변수를 생성한다.
private RecyclerView recyclerView; //기본적으로 제공하는 RecyclerView 의 변수를 생성한다.
private LinearLayoutManager linearLayoutManager; //기본적으로 제공하는 LinearLayoutManager의 변수를 생성한다.
private int i=1; // 리사이클러뷰 안에 있는 아이템의 갯수를 카운터 해주기 위한 변수를 만들어준다.
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment1_home, container, false);
search_product = view.findViewById(R.id.search_product);
category = view.findViewById(R.id.category);
trade_text = view.findViewById(R.id.trade_text);
trade_image = view.findViewById(R.id.trade_image);
myproduct_text = view.findViewById(R.id.myproduct_text);
myproduct_image = view.findViewById(R.id.myproduct_image);
alarm = view.findViewById(R.id.alarm);
location_spinner = view.findViewById(R.id.location_spinner);
return view;
}
5. Main Activity.java(홈 화면)와 만든 Fragment.java 들과 연결하기
package com.example.shopproject;
import android.os.Bundle;
import android.view.MenuItem;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.bottomnavigation.BottomNavigationView;
public class Main_Activity extends AppCompatActivity implements SendEventListener {
BottomNavigationView bottomNavigationView;
static String loc;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
bottomNavigationView = findViewById(R.id.bottomNavi); //만들었던 main_activity의 bottomNavi 연결하기
//처음화면 설정
getSupportFragmentManager().beginTransaction().add(R.id.main_frame,new Fragment1_home()).commit();
//바텀 네비게이션 뷰 안의 아이템 설정(각 아이템 클릭 이벤트)
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
switch (item.getItemId()) {
//각 item 클릭시 id값을 가져와 replace()를 이용해 FrameLayout에 각 Fragemnt.xml띄위기
case R.id.item_fragment1:
getSupportFragmentManager().beginTransaction().replace(R.id.main_frame, new Fragment1_home()).commit();
break;
case R.id.item_fragment2:
getSupportFragmentManager().beginTransaction().replace(R.id.main_frame, new Fragment2_near()).commit();
break;
case R.id.item_fragment3:
getSupportFragmentManager().beginTransaction().replace(R.id.main_frame, new Fragment3_chat()).commit();
break;
case R.id.item_fragment4:
getSupportFragmentManager().beginTransaction().replace(R.id.main_frame, new Fragment4_me()).commit();
break;
}
return true;
}
});
}
'프로젝트 > Android Studio_중고거래앱_Project' 카테고리의 다른 글
Android Studio_중고거래 앱(구글 Map Api 사용을 하여 현재 위치 추출하기) (0) | 2022.08.04 |
---|---|
Android Studio_중고거래 앱(등록된 상품 목록을 클릭하면 자세한 상품 내용 보여주는 화면 구성) (0) | 2022.08.04 |
Android Studio_중고거래 앱(상품 등록, 상품 등록 후 상품 목록들) (2) | 2022.08.02 |
Android Studio_중고거래 앱(회원가입,로그인) (4) | 2022.07.27 |
Android Studio_중고거래 앱(설계) (0) | 2022.07.27 |