0

Firebaseのチャットのサンプルプログラムを利用し、勉強していますが、
チャット画面で画像の表示ができません。

https://codelabs.developers.google.com/codelabs/firebase-android/index.html

・参考 web版
https://codelabs.developers.google.com/codelabs/firebase-web/index.html

FirebaseRecyclerAdapterで画像をセットしようとしています。

viewHolderに画像をセットしているのですが、画像のないviewHolderにも
画像が表示されてしまいます。

mFirebaseAdapter = new FirebaseRecyclerAdapter<FriendlyMessage,
            MessageViewHolder>(
            FriendlyMessage.class,
            R.layout.item_message,
            MessageViewHolder.class,
            mFirebaseDatabaseReference.child(MESSAGES_CHILD)) {


        @Override
        protected void populateViewHolder(final MessageViewHolder viewHolder,
                                          final FriendlyMessage friendlyMessage, final int position) {
            mProgressBar.setVisibility(ProgressBar.INVISIBLE);


            viewHolder.messageTextView.setText(friendlyMessage.getText());
            viewHolder.messengerTextView.setText(friendlyMessage.getName());
            if (friendlyMessage.getPhotoUrl() == null) {
                viewHolder.messengerImageView
                        .setImageDrawable(ContextCompat
                                .getDrawable(MainActivity.this,
                                        R.drawable.ic_account_circle_black_36dp));
            } else {
                Glide.with(MainActivity.this)
                        .load(friendlyMessage.getPhotoUrl())
                        .into(viewHolder.messengerImageView);
            }

            if (friendlyMessage.getImageUrl() != null) {

                mFirebaseStorageReference = mFirebaseStorage.getReferenceFromUrl(friendlyMessage.getImageUrl());
                mFirebaseStorageReference.getMetadata().addOnSuccessListener( new OnSuccessListener<StorageMetadata>() {
                    @Override
                    public void onSuccess( StorageMetadata storageMetadata ) {

                        mDownloadUri = storageMetadata.getDownloadUrl();

                        Glide.with(MainActivity.this)
                                .load(mDownloadUri.toString())
                                .into(viewHolder.messageImageView);



                    }
                }).addOnFailureListener(new OnFailureListener() {
                    @Override
                    public void onFailure(@NonNull Exception exception) {
                    }
                });
            }

画像のURLは、DBに入っていないため、mDownloadUri = storageMetadata.getDownloadUrl();でURLを取得しています。

ちなみに、
https://firebase.google.com/docs/storage/android/file-metadata#get_file_metadata
にある

// Alternatively you can get the metadata with
StorageMetadata storageMetadata = forestRef.getMetadata().getResult();

では、metadataが取得できないため、addOnSuccessListenerで取得しています。

1 件の回答 1

2

RecyclerView ではその名の通り View の再利用をすることでリストの様なUIを実現をします。

画像のないviewHolderにも画像が表示されてしまいます。

ということですが、画像のセットされた viewHolder の中の itemView が再利用されることで過去にセットされた画像がそのまま表示されていると思われます。

画像が無い場合には setImageResouce(0) で画像をクリアするなどすると良いと思います。

if (friendlyMessage.getImageUrl() != null) {
    mFirebaseStorageReference = mFirebaseStorage.getReferenceFromUrl(friendlyMessage.getImageUrl());
    mFirebaseStorageReference.getMetadata().addOnSuccessListener( new OnSuccessListener<StorageMetadata>() {
        @Override
        public void onSuccess( StorageMetadata storageMetadata ) {

            mDownloadUri = storageMetadata.getDownloadUrl();

            Glide.with(MainActivity.this)
                    .load(mDownloadUri.toString())
                    .into(viewHolder.messageImageView);



        }
    }).addOnFailureListener(new OnFailureListener() {
        @Override
        public void onFailure(@NonNull Exception exception) {
        }
    });
} else {
    viewHolder.messageImageView.setImageResource(0);
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。