RecyclerView, Firebase DB, reload

Firebase DB를 사용하여 RecyclerView에 출력하고, 갱신 버튼을 눌러, DB를 reloading하여 출력해 보자.

 

1. dependency 추가

implementation 'androidx.recyclerview:recyclerview:1.3.0'
implementation 'com.github.bumptech.glide:glide:4.10.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.10.0'

2. activity_main.xml에 recyclerview 추가. reload 버튼 추가

<Button
    android:id="@+id/btn_Reload"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="reload"
    />

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

3. 아이템 디자인 list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/iv_profile"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/ic_launcher"
            />
        <LinearLayout
            android:layout_marginLeft="15dp"
            android:gravity="center_vertical"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >
            <TextView
                android:id="@+id/tv_id"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello"/>
            <TextView
                android:id="@+id/tv_pw"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello"/>
            <TextView
                android:id="@+id/tv_userName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="hello"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

4. 아이템 class. User class (getter and setter 는  alt+insert키로 쉽게 자동생성 하세요.. )

public class User {
    private String profile ;
    private String id ;
    private int pw ;
    private String userName ;

5. CustomAdapter class

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.CustomViewHolder> {
    private ArrayList<User> arrayList ;
    private Context context ;

    public CustomAdapter(ArrayList<User> arrayList, Context context) {
        this.arrayList = arrayList;
        this.context = context;
    }

    @NonNull
    @Override
    public CustomAdapter.CustomViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false) ;
        CustomViewHolder holder = new CustomViewHolder(view) ;
        return holder; // 홀더 리턴
    }

    @Override
    public void onBindViewHolder(@NonNull CustomAdapter.CustomViewHolder holder, int position) {
        Glide.with(holder.itemView)
                .load(arrayList.get(position).getProfile())
                .into(holder.iv_profile) ;
        holder.tv_id.setText(arrayList.get(position).getId());
        holder.tv_pw.setText(String.valueOf(arrayList.get(position).getPw()));
        holder.tv_userName.setText(arrayList.get(position).getUserName());
    }

    @Override
    public int getItemCount() {
        return (arrayList!=null ? arrayList.size(): 0);
    }

    public class CustomViewHolder extends RecyclerView.ViewHolder {
        ImageView iv_profile ;
        TextView tv_id ;
        TextView tv_userName ;
        TextView tv_pw ;

        public CustomViewHolder(@NonNull View itemView) {
            super(itemView);
            iv_profile = itemView.findViewById(R.id.iv_profile) ;
            tv_id = itemView.findViewById(R.id.tv_id) ;
            tv_userName = itemView.findViewById(R.id.tv_userName) ;
            tv_pw = itemView.findViewById(R.id.tv_pw) ;

        }
    }
}

6. Firebase 설정.

Tools - firebase 선택.  (예전엔 수작업으로 한 거를 편리하게 다 해준다..)

우측에 Realtime Database 메뉴를 선택한다.  Get started with Realtime Database 로 가서, 차례로 진행한다.

connect your app to firebase ; 브라우저로 구글 로그인하여 firebase 콘솔로 가서 프로젝트 생성까지 진행됨.

(실시간 DB를 잘 만든다. 필드도  User class에 맞게 다 맞춘다. +를 눌러 User를 만들고 다시 +를 눌러 User_01을 만들고 다시 +를 눌러 profile, id, pw, userName 필드들을 만든다.   처음엔 사용법을 몰라 어렵다. 하위 노드를 위해 미리 +를 연속해서 눌러줘야 된다. 미리 만들고, 엔터치면 하위에 추가가 안되서 삽질.. )

Add the Realtime Database to your app ; dependency 등을 알아서 설정해 준다.

그러나,... 나의 경우는 빌드시 에러가...  찾아보니, 버전 문제가 또 있다... (어쩌라고.. 정말  막막하게 만드는  버전 호환성...)

build.gradle (project) 에서 4.3.10 으로 들어가 있는데 찾아보니 버전을 14로 올리면 해결된다고 해서 해보니 성공하였음.

classpath 'com.google.gms:google-services:4.3.14'

 

7.MainActivity에서 RecyclerView와 Adapter 연결 및 Firebase 연동...

public class MainActivity extends AppCompatActivity {
    private RecyclerView recyclerView ;
    private RecyclerView.Adapter adapter ;
    private RecyclerView.LayoutManager layoutManager ;
    private ArrayList<User> arrayList ;
    private FirebaseDatabase database ;
    private DatabaseReference databaseReference ;
    private ValueEventListener valueEventListener ;


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

        recyclerView = findViewById(R.id.recyclerview) ;
        recyclerView.setHasFixedSize(true);
        layoutManager = new LinearLayoutManager(this) ;
        recyclerView.setLayoutManager(layoutManager);
        arrayList = new ArrayList<User>() ;

        adapter = new CustomAdapter(arrayList, this) ;
        recyclerView.setAdapter(adapter);

        database = FirebaseDatabase.getInstance();
        databaseReference = database.getReference("User") ; // User table

        valueEventListener = new ValueEventListener() {
            @Override
            public void onDataChange(@NonNull DataSnapshot snapshot) {
                Log.e("AAA", "reload data") ;
                // 데이터를 수신.
                arrayList.clear();
                for (DataSnapshot ds : snapshot.getChildren()) {
                    User user = ds.getValue(User.class) ;
                    Log.e("AAA", user.getId()) ;
                    arrayList.add(user) ;
                }
                adapter.notifyDataSetChanged();
            }

            @Override
            public void onCancelled(@NonNull DatabaseError error) {
                Log.e("AAA", error.toString()) ;
            }
        } ;

        databaseReference.addListenerForSingleValueEvent(valueEventListener);

        findViewById(R.id.btn_Reload).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                databaseReference.addListenerForSingleValueEvent(valueEventListener);
            }
        });

    }
}

- Reload를 어떻게 하나 궁금했는데 찾아보니 위와 같이 하니 되었다. databaseReference에 리스너를 또 등록하면 됨. 그러면 노드들을 다시 가져오고 갱신되었다.