반응형
https://github.com/lnjky/fashion_people
GitHub - lnjky/fashion_people: 패션 추천 어플
패션 추천 어플. Contribute to lnjky/fashion_people development by creating an account on GitHub.
github.com
코드 전체를 보려면 위에 링크를 통해 확인할 수 있습니다.
이전 찜하기 기능 만들기에 이어서 작성한 글입니다.
[안드로이드] 파이어베이스로 찜하기 만들기
https://github.com/lnjky/fashion_people GitHub - lnjky/fashion_people: 패션 추천 어플 패션 추천 어플. Contribute to lnjky/fashion_people development by creating an account on GitHub. github.com 코드 전체를 보려면 위에 링크를 통해
loasd.tistory.com
찜을 했다면 이제 찜한 목록들을 봐야한다.
그래서 여기에 접근하기 위해 Profile Fragment에 찜목록을 만들어주었다.
이렇게 업로드한 사진, 찜목록을 만들어주었다.
그러면 이제 찜목록 액티비티와 XML을 만들어주고 찜한 사진들을 볼 수 있게 리사이클러뷰와 연결해주면 된다.
우선 XML이다.
이렇게 간단하게 툴바를 include해주고 리사이클러뷰만 넣었다.
<?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=".SaveListActivity">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar">
</include>
<ImageView
android:id="@+id/iv_save_back"
android:layout_width="40dp"
android:layout_height="33dp"
android:background="@drawable/ic_baseline_arrow_back_24"
app:layout_constraintBottom_toBottomOf="@+id/toolbar"
app:layout_constraintEnd_toStartOf="@+id/tv_save_title"
app:layout_constraintHorizontal_bias="0.064"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/toolbar"
app:layout_constraintVertical_bias="0.481">
</ImageView>
<TextView
android:id="@+id/tv_save_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/koreanah1_r"
android:text="찜 목록"
android:textColor="@color/white"
android:textSize="25dp"
app:layout_constraintBottom_toBottomOf="@+id/toolbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/toolbar" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_save_image"
android:layout_width="400dp"
android:layout_height="670dp"
android:layout_marginTop="5dp"
app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/toolbar">
</androidx.recyclerview.widget.RecyclerView>
</androidx.constraintlayout.widget.ConstraintLayout>XML에서는 신경쓸 것이 별로 없어 만들기 쉬웠다.
그리고 JAVA파일을 손대주면 된다.
이름을 SaveListActivity로 만들어주었고 전체 코드는 다음과 같다.
package com.example.styleplt;
import static com.example.styleplt.utility.FirebaseID.collectionId;
import static com.example.styleplt.utility.FirebaseID.documentId;
import static com.example.styleplt.utility.FirebaseID.time;
import static com.example.styleplt.utility.FirebaseID.timestamp;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.RecyclerView;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import com.example.styleplt.adapter.SaveAdapter;
import com.example.styleplt.adapter.UploadAdapter;
import com.example.styleplt.models.Save;
import com.example.styleplt.models.Upload;
import com.example.styleplt.utility.FirebaseID;
import com.example.styleplt.utility.RecyclerDecoration;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.firestore.DocumentSnapshot;
import com.google.firebase.firestore.EventListener;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.firestore.FirebaseFirestoreException;
import com.google.firebase.firestore.Query;
import com.google.firebase.firestore.QuerySnapshot;
import com.google.firebase.storage.FirebaseStorage;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
public class SaveListActivity extends AppCompatActivity {
private ImageView iv_save_back;
private FirebaseAuth mAuth = FirebaseAuth.getInstance();
private FirebaseFirestore mStore = FirebaseFirestore.getInstance();
private FirebaseStorage mStorage = FirebaseStorage.getInstance();
private RecyclerView mSaveRecyclerView;
private SaveAdapter mAdapter;
private List<Save> mDatas;
private String currentid = mAuth.getCurrentUser().getUid();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_save_list);
iv_save_back = findViewById(R.id.iv_save_back);
mSaveRecyclerView = findViewById(R.id.rv_save_image);
iv_save_back.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Intent intent = new Intent(); // 인텐트 객체 생성하고
setResult(RESULT_OK, intent); // 응답 보내기
finish(); // 현재 액티비티 없애기
}
});
RecyclerDecoration spaceDecoration = new RecyclerDecoration(20);
mSaveRecyclerView.addItemDecoration(spaceDecoration);
}
@Override
public void onStart() {
super.onStart();
// inent로 이미지 uri 받아오기 + 데이터 세팅하는거 수정
mDatas = new ArrayList<>();
mStore.collection(FirebaseID.save).document(currentid).collection("uploaded")
.orderBy(time, Query.Direction.DESCENDING) // DESCENDING = 오름차순, ASCENDING = 내림차순 정렬
.addSnapshotListener(new EventListener<QuerySnapshot>() {
@Override
public void onEvent(@Nullable QuerySnapshot value, @Nullable FirebaseFirestoreException error) {
if (value != null) {
mDatas.clear();
for (DocumentSnapshot snap : value.getDocuments()) {
Map<String, Object> shot = snap.getData();
String documentID = String.valueOf(shot.get((documentId)));
String nickname = String.valueOf(shot.get(FirebaseID.nickname));
String image = String.valueOf(shot.get(FirebaseID.image));
String contents = String.valueOf(shot.get(FirebaseID.contents));
String time = String.valueOf(shot.get(FirebaseID.time));
Save data = new Save(documentId, contents, image, nickname, timestamp, time);
mDatas.add(data);
}
mAdapter = new SaveAdapter(mDatas);
mSaveRecyclerView.setAdapter(mAdapter);
}
}
});
}
}
단순히 파이어스토어에 올라와있는 사진들과 내용을 가져오게 하였다.
기존의 저장경로가 save - documentId - uploaded 에 저장되어있기 때문에 그 경로에 있는 것들을 전부 가져와서 리사이클러뷰에 띄워주게 하였다.
그래서 경로를 이렇게 정해주었다.
mStore.collection(FirebaseID.save).document(currentid).collection("uploaded")여기서 currentid는 현재 사용자의 id로 넣기에는 너무 길어질것 같아서 위에서 미리 선언해주었다.
private String currentid = mAuth.getCurrentUser().getUid();이렇게 데이터들을 가져오고 리사이클러뷰와 연결해주었다.
리사이클러뷰는 아래와 같이 만들어주었다.
1) Save.java < models >
package com.example.styleplt.models;
import com.example.styleplt.utility.FirebaseID;
import com.google.firebase.firestore.FieldValue;
public class Save {
private String documentId;
private String contents;
private String image;
private String nickname;
private String timestamp;
private String time;
public Save() {
}
public Save(String documentId, String contents, String image, String nickname, String timestamp, String time) {
this.documentId = documentId;
this.contents = contents;
this.image = image;
this.nickname = nickname;
this.timestamp = timestamp;
this.time = time;
}
public String getDocumentId() {
return documentId;
}
public void setDocumentId(String documentId) {
this.documentId = documentId;
}
public String getContents() {
return contents;
}
public void setContents(String contents) {
this.contents = contents;
}
public String getImage() {
return image;
}
public void setImage(String image) {
this.image = image;
}
public String getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getTimestamp() {
return timestamp;
}
public void setTimestamp(String timestamp) {
this.timestamp = timestamp;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
@Override
public String toString() {
return "Save{" +
"documentId='" + documentId + '\'' +
", contents='" + contents + '\'' +
", image='" + image + '\'' +
", nickname='" + nickname + '\'' +
", timestamp='" + timestamp + '\'' +
", time='" + time + '\'' +
'}';
}
}
2) SaveAdapter < Adapters >
package com.example.styleplt.adapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import com.example.styleplt.R;
import com.example.styleplt.models.Save;
import com.example.styleplt.models.Upload;
import org.w3c.dom.Text;
import java.util.List;
public class SaveAdapter extends RecyclerView.Adapter<SaveAdapter.SaveViewHolder> {
private List<Save> datas;
public SaveAdapter(List<Save> datas) {
this.datas = datas;
}
@NonNull
@Override
public SaveAdapter.SaveViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new SaveAdapter.SaveViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_save, parent, false));
}
@Override
public void onBindViewHolder(@NonNull SaveAdapter.SaveViewHolder holder, int position) {
Save data = datas.get(position);
holder.item_save_comments.setText(data.getContents());
holder.item_save_time.setText(data.getTimestamp());
Glide.with(holder.itemView)
.load(datas.get(position).getImage())
.into(holder.item_save_image);
}
@Override
public int getItemCount() {
return datas.size();
}
public class SaveViewHolder extends RecyclerView.ViewHolder {
private ImageView item_save_image;
private TextView item_save_time;
private TextView item_save_comments;
public SaveViewHolder(@NonNull View itemView) {
super(itemView);
item_save_image = itemView.findViewById(R.id.item_save_image);
item_save_time = itemView.findViewById(R.id.item_save_time);
item_save_comments = itemView.findViewById(R.id.item_save_comments);
}
}
}간단히 이미지, 코멘트, 시간만 띄울 생각으로 간단히 작성하였다.
3) item_save < 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="wrap_content"
android:background="@drawable/button_round"
android:orientation="vertical">
<TextView
android:id="@+id/item_save_comments"
android:layout_width="380dp"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:background="@drawable/button_round"
android:gravity="center"
android:text="contents"
android:textColor="@color/black"
android:textSize="23dp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</TextView>
<ImageView
android:id="@+id/item_save_image"
android:layout_width="390dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.476"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/item_save_comments"
app:layout_constraintVertical_bias="0.2">
</ImageView>
<TextView
android:id="@+id/item_save_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="시간"
android:textColor="@color/black"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/item_save_image">
</TextView>
<TextView
android:id="@+id/item_save_collectionid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="invisible">
</TextView>
</androidx.constraintlayout.widget.ConstraintLayout>이렇게 적용하면 이런 모습이다.
사진, CONTENTS는 띄우지만 시간은 INVISIBLE을 해주었고 collectionid는 화면에 보이지 않고 사용하기 위해서 추가해 주었다.
이렇게 연결을 하고 찜목록에 들어가면 이렇게 나온다.
예시라고 작성해둔 코멘트가 상단에, 그리고 찜한 사진을 하단에 배치하였다.
작성 시간은 INVISIBLE을 해주었기 때문에 표시되지 않는다.
디자인 감각이 없기도 하고 깔끔하게 기능만 구현하였기 때문에 그렇게 멋있지는 않은데 따로 기능을 추가하거나 깔끔하게 보이고 싶다면 리사이클러뷰에서 연결해서 작성해주면 된다.
반응형
'안드로이드' 카테고리의 다른 글
| [안드로이드] 토스트 메시지 (0) | 2023.01.12 |
|---|---|
| [안드로이드] 파이어베이스로 업로드한 사진 불러오기 (0) | 2023.01.12 |
| [안드로이드] 파이어베이스로 찜하기 만들기 (0) | 2023.01.12 |
| [안드로이드] 피드에 별점주기 (0) | 2023.01.11 |
| [안드로이드] 파이어베이스로 피드 만들기 - 2 (0) | 2023.01.11 |