4. 악보 검색 / 등록 페이지 제작 (2) - 프래그먼트에 리사이클러 뷰 추가

학교 수업이 끝나고 저녁을 먹고나서부터 5시간을 넘게 씨름한 끝에

첫번째 탭에 프래그먼트를 넣고, 프래그먼트에 리사이클러 뷰를 넣는 것을 성공했다.

 

Do It 안드로이드 프로그래밍의 예제 코드를 거의 베끼다시피해서 만든 앱이지만,

익숙해지면 혼자서도 곧 만들 수 있을 것 같다.

 

리사이클러 뷰에는 카드뷰를 활용해

앨범아트, 노래제목, 가수 3가지의 정보를 저장하도록 하였다.

 

나중에는 노래의 원키를 같이 저장하는 것을 고려중이다.

 

첫번째 악보탭의 xml 코드는 다음과 같이 바뀌었다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <FrameLayout
        android:id="@+id/frag_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="?attr/actionBarSize">

    </FrameLayout>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_nav" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

프레임 레이아웃을 틀로하여 프래그먼트를 동적으로 생성하여 넣도록 하였다.

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context=".FragMusicSheet">

    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/recyclerView"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"/>

</LinearLayout>

 

이 코드는 첫번째 탭에 들어가는 리사이클러 뷰의 xml 코드이다.

 

package com.everdu.chordshare;

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;

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

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

public class MainActivity extends AppCompatActivity {

    ActionBar actionBar;

    BottomNavigationView bottomNavigationView;

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

        actionBar = getSupportActionBar();
        actionBar.setTitle("악보");

        FragMusicSheet fragMusicSheet = new FragMusicSheet();
        FragGroup fragGroup = new FragGroup();
        getSupportFragmentManager().beginTransaction().replace(R.id.frag_container, fragMusicSheet).commit();

        bottomNavigationView = findViewById(R.id.bottom_nav);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.tab_music_sheet:
                        actionBar.setTitle("악보");
                        getSupportFragmentManager().beginTransaction().replace(R.id.frag_container, fragMusicSheet).commit();
                        return true;

                    case R.id.tab_group:
                        actionBar.setTitle("그룹");
                        getSupportFragmentManager().beginTransaction().replace(R.id.frag_container, fragGroup).commit();
                        return true;

                    case R.id.tab_my_page:
                        actionBar.setTitle("마이페이지");
                        return true;
                }
                return false;
            }
        });
    }
}

 

위 코드는 MainActivity에 들어가는 자바코드이다.

탭을 선택할 때마다, 상단 액션바의 타이틀을 바꾸도록 하였고,

프레임 레이아웃 틀에 프래그먼트를 다르게 넣도록 하였다.

 

앞으로 할 일은, 상단탭에 악보 추가 버튼을 넣어서 임의로 악보를 추가할 수 있도록 하는 것,

실제로 데이터베이스에서 정보를 가져와서 리사이클러 뷰로 보여주는 것

 

이 두가지를 우선적으로 하려고 한다.

 

package com.everdu.chordshare;

import android.content.Context;
import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;

public class FragMusicSheet extends Fragment {

    RecyclerView recyclerView;
    ItemSheetAdapter adapter;
    Context context;

    @Override
    public void onAttach(@NonNull Context context) {
        super.onAttach(context);
        this.context = context;
    }

    @Override
    public void onDetach() {
        super.onDetach();
        if (context != null) {
            context = null;
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment_frag_music_sheet, container, false);

        initUI(rootView);

        return rootView;
    }

    private void initUI(ViewGroup rootView) {
        recyclerView = rootView.findViewById(R.id.recyclerView);

        LinearLayoutManager layoutManager = new LinearLayoutManager(getContext());
        recyclerView.setLayoutManager(layoutManager);

        adapter = new ItemSheetAdapter();

        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));
        adapter.addItem(new ItemSheetList("내 손을 잡아", "아이유(IU)"));

        recyclerView.setAdapter(adapter);
    }
}

 

이 코드가 첫번째 탭에 붙는 프래그먼트의 자바코드이다.

스크롤을 테스트하기 위해 임의 데이터를 넣었다.

 

책의 소소코드를 복사해서 타이핑하다보니 생각없이 넣었지만,

지금생각해보니 당장은 onAttach, onDetach 메소드는 필요가 없는 메소드였다ㅋㅋ

 

package com.everdu.chordshare;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import java.util.ArrayList;

public class ItemSheetAdapter extends RecyclerView.Adapter<ItemSheetAdapter.ViewHolder> {

    ArrayList<ItemSheetList> items = new ArrayList<ItemSheetList>();

    @NonNull
    @Override
    public ItemSheetAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        LayoutInflater inflater = LayoutInflater.from(parent.getContext());
        View itemView = inflater.inflate(R.layout.item_sheet_list, parent, false);
        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(@NonNull ItemSheetAdapter.ViewHolder holder, int position) {
        ItemSheetList item = items.get(position);
        holder.setItem(item);
    }

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

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

    public void setItems(ArrayList<ItemSheetList> items) {
        this.items = items;
    }

    public ItemSheetList getItem(int position) {
        return items.get(position);
    }

    static class ViewHolder extends RecyclerView.ViewHolder {

        TextView song_name;
        TextView singer;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);

            song_name = itemView.findViewById(R.id.txv_song_name);
            singer    = itemView.findViewById(R.id.txv_singer);
        }

        public void setItem(ItemSheetList item) {
            song_name.setText(item.song_name);
            singer.setText(item.singer);
        }
    }
}

 이 코드는 리사이클러 뷰에 들어가는 어댑터 코드이다.

리사이클러 뷰에 데이터를 넣고 가져오는 기능을 담당한다.

 

package com.everdu.chordshare;

public class ItemSheetList {
    String song_name;
    String singer;

    public ItemSheetList(String song_name, String singer) {
        this.song_name = song_name;
        this.singer = singer;
    }

    public String getSong_name() {
        return song_name;
    }

    public void setSong_name(String song_name) {
        this.song_name = song_name;
    }

    public String getSinger() {
        return singer;
    }

    public void setSinger(String singer) {
        this.singer = singer;
    }
}

이 코드가 일종의 구조체 역할을 하는 코드로,

카드뷰에 담는 정보를 저장하는 클래스이다.

 

디자인을 조금 바꿔서 더 보기 좋게 만들어보았다.

 

 

악보탭을 눌렀을 때의 화면이다.

위 아래로 스크롤이 가능하다.

 

그룹 탭이다.

프래그먼트 구분을 위해 테스트용으로 텍스트만 넣고

아직 아무런 작업을 하지 않았다.

 

 

마지막으로 마이페이지 탭이다.

그룹과 같은 레이아웃을 복사해와서 똑같은 레이아웃을 가진 상태이다.

역시 아무 작업을 하지 않아서 타이틀이 변하는 것말고는 아무런 변화가 없다.

 

이 둘은 나중에 차차 추가할 계획이다.