[안드로이드] 파이어베이스로 업로드한 사진 불러오기

https://github.com/lnjky/fashion_people

GitHub - lnjky/fashion_people: 패션 추천 어플

코드 전체를 보려면 위에 링크를 통해 확인할 수 있습니다.

---

스토리지에 사진 올리기를 보면 좋습니다.

https://loasd.tistory.com/78

[안드로이드] 파이어베이스 스토리지에 사진 올리기

---

위의 링크에서 소개한 방법을 통해 사진을 업로드했다면 이제 업로드한 사진을 불러오는 기능을 구현해야 한다.

프로필 Fragment에 업로드한 사진을 만들어주었다.

그리고 업로드한 사진을 클릭시 자신이 업로드한 사진을 볼 수 있게 해줄 것이다.

우선 리사이클러뷰를 활용해야 하기 때문에 리사이클러뷰를 만들어주도록 하자.

사진만 띄울거라 내용이 길지는 않다.

 

 1) UploadedImageAdapter

package com.example.styleplt.adapter;

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

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

import com.bumptech.glide.Glide;
import com.example.styleplt.R;
import com.example.styleplt.models.UploadedImage;

import java.util.List;

public class UploadedImageAdapter extends RecyclerView.Adapter<UploadedImageAdapter.UploadedImageViewHolder> {

    private List<String> imageDatas;

    public UploadedImageAdapter(List<String> imageDatas) {
        this.imageDatas = imageDatas;
    }

    @NonNull
    @Override
    public UploadedImageAdapter.UploadedImageViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new UploadedImageViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_uploaded_image, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull UploadedImageAdapter.UploadedImageViewHolder holder, int position) {
        Glide.with(holder.itemView.getContext()).load(imageDatas.get(position)).into(holder.Uploaded_image);
    }

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

    public class UploadedImageViewHolder extends RecyclerView.ViewHolder {

        private ImageView Uploaded_image;
        public UploadedImageViewHolder(@NonNull View itemView) {
            super(itemView);
            Uploaded_image = itemView.findViewById(R.id.item_uploaded_image);
        }
    }
}

어댑터를 이렇게 만들어주고

 

 2) item_uploaded_image  < 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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/button_round">

    <ImageView
        android:id="@+id/item_uploaded_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </ImageView>

</androidx.constraintlayout.widget.ConstraintLayout>

사진만 띄우고 아이템은 따로 꾸미지 않을 것이기 떄문에 아이템은 이렇게 만들어주었다.

 

사진만 가져오기 때문에 모델은 따로 만들어주지 않았다.

 

그리고 액티비티를 UploadedImageActivity.java로 만들어주었다.

전체 내용은 다음과 같다.

package com.example.styleplt;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.ImageView;

import com.example.styleplt.adapter.UploadedImageAdapter;
import com.example.styleplt.adapter.outerAdapter;
import com.example.styleplt.models.Outer;
import com.example.styleplt.utility.RecyclerDecoration;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.firestore.FirebaseFirestore;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.ListResult;
import com.google.firebase.storage.StorageReference;

import java.util.ArrayList;
import java.util.List;

public class UploadedImageActivity extends AppCompatActivity {

    private FirebaseAuth mAuth = FirebaseAuth.getInstance();
    private FirebaseFirestore mStore = FirebaseFirestore.getInstance();
    private FirebaseStorage mStorage = FirebaseStorage.getInstance();

    private ImageView iv_uploaded_image_back;

    private RecyclerView mImageRecyclerview;
    private UploadedImageAdapter UploadedImageAdapter;
    private List<String> ImageDatas;


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

        iv_uploaded_image_back = findViewById(R.id.iv_uploaded_image_back);

        iv_uploaded_image_back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Intent intent = new Intent(); // 인텐트 객체 생성하고
                setResult(RESULT_OK, intent); // 응답 보내기
                finish(); // 현재 액티비티 없애기
            }
        });

        LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        mImageRecyclerview = findViewById(R.id.Uploaded_Recyclerview);
        mImageRecyclerview.setLayoutManager(layoutManager);
        ImageDatas = new ArrayList<>();

        StorageReference listRef = FirebaseStorage.getInstance().getReference().child("image").child(mAuth.getCurrentUser().getUid());
        listRef.listAll().addOnSuccessListener(new OnSuccessListener<ListResult>() {
            @Override
            public void onSuccess(ListResult listResult) {
                for(StorageReference file:listResult.getItems()){
                    file.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            ImageDatas.add(uri.toString());
                            Log.e("Itemvalue",uri.toString());
                        }
                    }).addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            mImageRecyclerview.setAdapter(UploadedImageAdapter);
                        }
                    });
                }
            }
        });

        UploadedImageAdapter = new UploadedImageAdapter(ImageDatas);
        mImageRecyclerview.setAdapter(UploadedImageAdapter);

        RecyclerDecoration spaceDecoration = new RecyclerDecoration(20);
        mImageRecyclerview.addItemDecoration(spaceDecoration);
    }
}

스토리지에 저장한 사진을 전부 가져오는 방법을 통해 확인할 수 있게 만들었다.

스토리지에 저장했을 때 경로를 image - 사용자id 의 경로에 저장해두었기 때문에 여기있는 사진을 전부 가져오기만 하면 된다.

 

스토리지에 저장한 방식은 아래의 링크를 통해 자세히 확인 가능하다.

https://loasd.tistory.com/78

[안드로이드] 파이어베이스 스토리지에 사진 올리기

 

주요 기능은 아래의 코드이다.

        StorageReference listRef = FirebaseStorage.getInstance().getReference().child("image").child(mAuth.getCurrentUser().getUid());
        listRef.listAll().addOnSuccessListener(new OnSuccessListener<ListResult>() {
            @Override
            public void onSuccess(ListResult listResult) {
                for(StorageReference file:listResult.getItems()){
                    file.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            ImageDatas.add(uri.toString());
                            Log.e("Itemvalue",uri.toString());
                        }
                    }).addOnSuccessListener(new OnSuccessListener<Uri>() {
                        @Override
                        public void onSuccess(Uri uri) {
                            mImageRecyclerview.setAdapter(UploadedImageAdapter);
                        }
                    });
                }
            }
        });

.listAll()을 통해 해당 위치에 있는 사진을 전부 가져온다.

그리고 onSuccess에 성공했을 때 코드를 작성해준다.

ImageData에 스토리지에 저장된 이미지의 uri를 가져오고 이를 저장해준다.

그리고 리사이클러뷰에 가져온 이미지를 띄워주는 방법을 사용하였다.

        UploadedImageAdapter = new UploadedImageAdapter(ImageDatas);
        mImageRecyclerview.setAdapter(UploadedImageAdapter);

 

리사이클러뷰를 이전의 방식과 다르게 모델을 만들지 않고 사진만 가져오는 방식으로 코드를 작성하는 점 말고는 크게 다른점이 없다.

.listAll()만 사용하면 어렵지 않게 만들 수 있다.

 

실제 어플을 실행했을 때의 사진이다.

업로드한 사진에 올렸던 사진이 성공적으로 나온 것을 확인할 수 있다.

 

 

.listAll()의 샘플코드는 다음과 같다.

StorageReference listRef = storage.getReference().child("files/uid");

listRef.listAll()
        .addOnSuccessListener(new OnSuccessListener<ListResult>() {
            @Override
            public void onSuccess(ListResult listResult) {
                for (StorageReference prefix : listResult.getPrefixes()) {
                    // All the prefixes under listRef.
                    // You may call listAll() recursively on them.
                }

                for (StorageReference item : listResult.getItems()) {
                    // All the items under listRef.
                }
            }
        })
        .addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                // Uh-oh, an error occurred!
            }
        });

이는 파이어베이스의 문서에서도 확인할 수 있다.

https://firebase.google.com/docs/storage/android/list-files?hl=ko