【问题标题】:How to Display Firebase Storage Images in GridView如何在 GridView 中显示 Firebase 存储图像
【发布时间】:2020-12-08 21:51:45
【问题描述】:

我是 Android 新手,我正在学习 gridview。我想在 gridview 中显示来自可绘制对象的图像列表,但我不知道如何在 gridview 中显示来自 Firebase 存储的图像。

我看过很多教程,我尝试了很多 Stackoverflow 答案,但我无法得到我需要的东西

我在 Firebase 存储中创建了一个新文件夹,并在那里上传了 6 张图片,我想在 gridview 中显示所有 6 张图片。

这是我如何从 drawable 显示图像的代码,我不知道如何加载该 url,在滑行中我完全困惑和搞砸了自己

public class NewListCreate extends BottomSheetDialogFragment {


   int[] images = {R.drawable.menu, R.drawable.musicbox, R.drawable.shoppingbag, R.drawable.shoppingcart, R.drawable.wallet, R.drawable.weddingdress};
    int imageRes = images[0];

  

    public NewListCreate() {
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.new_list_create, container, false);

        ImageButton done = view.findViewById(R.id.done);
        final EditText listname = (EditText) view.findViewById(R.id.listname);
        final GridView gridView = (GridView) view.findViewById(R.id.gridview);

        final CustomAdpter customAdpter = new CustomAdpter(images, getContext());
        gridView.setAdapter(customAdpter);
        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                customAdpter.selectedImage = i;
                customAdpter.notifyDataSetChanged();
                imageRes = images[i];


            }
        });




        done.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {


                String itemname = listname.getText().toString();
                if (!TextUtils.isEmpty(listname.getText().toString())) {

                    startActivity(new Intent(getContext(), CheckslateHome.class).putExtra("data", itemname).putExtra("image", imageRes));
                    dismiss();
                } else {
                    Toast.makeText(getContext(), "List Name not Empty ", Toast.LENGTH_SHORT).show();
                }

            }

        });


        return view;


    }


    public class CustomAdpter extends BaseAdapter {

        public int selectedImage = 0;
        private int[] icons;
        private Context context;
        private LayoutInflater layoutInflater;

        public CustomAdpter(int[] icons, Context context) {
            this.icons = icons;
            this.context = context;
            this.layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        }

        @Override
        public int getCount() {
            return icons.length;
        }

        @Override
        public Object getItem(int i) {
            return null;
        }

        @Override
        public long getItemId(int i) {
            return 0;
        }

        @Override
        public View getView(int i, View view, ViewGroup viewGroup) {

            if (view == null) {
                view = layoutInflater.inflate(R.layout.image_list, viewGroup, false);

            }
            StorageReference storageReference = FirebaseStorage.getInstance().getReference();
            ImageView imageicons = view.findViewById(R.id.image);

            if (i < icons.length) {

                imageicons.setImageResource(icons[i]);

                if (i != selectedImage) {
                    imageicons.setImageAlpha(50);
                }
                imageicons.setScaleType(ImageView.ScaleType.CENTER_CROP);
                // imageicons.setLayoutParams(new GridView.LayoutParams(150, 150));
                if (i == selectedImage) {

                    view.setBackgroundColor(Color.WHITE);
                } else {
                    view.setBackgroundColor(Color.TRANSPARENT);
                }
            }
            ;


            return view;
        }
    }
}

这里是 Firebase 存储信息

【问题讨论】:

  • 您是否更改了 Firebase 中的规则以进行身份​​验证?或者你能为此做recyclerview吗?
  • 是的,我改变了规则读写 True
  • 我不知道如何在项目中添加 firebase 和实现,我看过很多教程,但我很困惑和完全搞砸了也有很多教程,但 android 没有
  • 您已经阅读了有关文档的内容,firebase 有一个很棒的文档。我可以与回收站视图共享一个 firebase 链接。

标签: android firebase firebase-storage


【解决方案1】:

我用以下代码在我的应用中做了一个小而快的演示,结果是 this

对于 gridAdapter,我有这个:

public class GridAdapter extends BaseAdapter {
Context context;
private final String[] values;
private final String[] images;
View view;
LayoutInflater layoutInflater;

public GridAdapter(Context context, String[] values, String[] images) {
    this.context = context;
    this.values = values;
    this.images = images;
}

@Override
public int getCount() {
    return values.length;
}

@Override
public Object getItem(int position) {
    return null;
}

@Override
public long getItemId(int position) {
    return 0;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    if(convertView==null)
    {
        view = new View(context);
        view=layoutInflater.inflate(R.layout.single_item,null);
        ImageView imageView = view.findViewById(R.id.imageView);
        TextView textView = view.findViewById(R.id.textView);
        Glide.with(context).load(images[position]).into(imageView);
        textView.setText(values[position]);
    }
    return view;
}

}

对于我拥有GridView 的活动,我已经这样做了:

  gridView = findViewById(R.id.gridView) ;

   databaseReference = FirebaseDatabase.getInstance().getReference().child("Posts");
   databaseReference.addListenerForSingleValueEvent(new ValueEventListener() {
       @Override
       public void onDataChange(@NonNull DataSnapshot snapshot) {
           for(DataSnapshot dataSnapshot:snapshot.getChildren())
           {
               if(i<19)
               {
                   Post post = dataSnapshot.getValue(Post.class);
                   images[i]=post.getpImage();
                   values[i]=post.getpTitle();
                   i++;
               }
           }
           GridAdapter gridAdapter = new GridAdapter(getApplicationContext(),values,images);
           gridView.setAdapter(gridAdapter);
       }

       @Override
       public void onCancelled(@NonNull DatabaseError error) {

       }
   });

我参考了我的 Firebase 数据库来获取我存储在 Firebase 存储上的图片的 URL,我使用 Post 类来获取信息,因为它对我来说更容易、更快捷。

您需要获取图像的 URL 并将它们添加到字符串数组图像中,如果您没有设置存储图片 URL 的数据库,请查看 this 文档以了解如何获取存储中的 URL。

您可以通过以下方式从 Firebase 存储中获取一张图片的 URL

storageReference.child("icons/menu").getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {
        @Override
        public void onSuccess(Uri uri) {
            images[0] = String.valueOf(uri);
            values[0] = "menu"
          //Here you can also add thiss
         /*GridAdapter gridAdapter = new 
                      GridAdapter(getApplicationContext(),values,images);
       gridView.setAdapter(gridAdapter);*/

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

        }
    });

【讨论】:

  • 您是否将图像存储在“帖子”文件夹内的 firebase 中? Post Class 里面有什么?
  • “帖子”不是文件夹,它是我的 Firebase 数据库的路径,我在其中存储了 URL 和其他信息在子帖子中,帖子类无关紧要,我使用它从数据库中获取信息。如果您没有 firebase 数据库和图片的 URL,则必须从 firebase 存储中获取 URL,如文档中所示,通常当您将照片上传到 firebase 存储时,您会保存URL 并将其添加到数据库中,以便您以后访问它。
  • 所以我想通过我的 Firebase 的链接对吗?对不起,我是全新的
  • firebase.google.com/docs/storage/android/… 选中此项,而不是“// Got the download URL for 'users/me/profile.png'”,您可以执行类似 images[0]=String.valueOf(uri) 的操作;但这只会给你一张图片,而且你必须设置图片的路径
  • 我已经添加了如何获取图片菜单的 URL,该部分应添加到包含 GridView 的活动中。这足以让您弄清楚。跨度>
【解决方案2】:

我创建了一个 FirebaseUtils 类,在其中我有一系列静态 firebase 方法可供我选择(不是双关语)。
为了实现你想要的,只需创建一个循环然后调用下面的 downloadPic 方法

    for( int index = 0; index < noOfPhotos; index++ )
        FirebaseUtils.downloadPic( ivPic[index], "Photos/", image[index] );

ivPic 是图像视图
picToDisplay 是从存储下载的图片
storageFolder 是上的文件夹firebase 例如:Photos/
picToDownloadstorageFolder
noOfPhotos 中图片的名称是您拥有的照片数量,显然您可以设置查询并将它们加载到ArrayList 中以方便使用

    //////////////////////////////////////////////////////////////////////////////////

    private static void loadPicIntoGlide( @NonNull ImageView ivPic, 
                                          @NonNull String picToDisplay )
    {
        if( picToDisplay.isEmpty() )
        {
            Glide.with( ivPic.getContext() )
                    .load( R.mipmap.ic_default_pic )
                    .into( ivPic );
        }
        else
        {
            Glide.with( ivPic.getContext() )
                    .load( picToDisplay )
                    .into( ivPic );
        }
    }

    ///////////////////////////////////////////////////////////////////////////////////


    public static void downloadPic( @NonNull ImageView ivPicView,
                                    @NonNull String storageFolder,
                                    @NonNull String picToDownload )
    {
        StorageReference storageRef = FirebaseStorage.getInstance().getReference();
        Uri uri = Uri.fromFile( new File( picToDownload ) );
        StorageReference storageReference = storageRef.child( 
               storageFolder + picToDownload );

        storageReference.getDownloadUrl().addOnSuccessListener( 
                                                new OnSuccessListener<Uri>()
        {
            @Override
            public void onSuccess( Uri uri )
            {
                String actPic = uri.toString();
                loadPicIntoGlide( ivPicView, actPic );
            }
        } )
        .addOnFailureListener( new OnFailureListener()
        {
            @Override
            public void onFailure( @NonNull Exception e )
            {
                loadPicIntoGlide( ivPicView, "" );
            }
        } );
    }

【讨论】:

    【解决方案3】:
    public class CustomAdpter extends BaseAdapter {
    
    FirebaseStorage firebaseStorage = FirebaseStorage.getInstance();    
    
    private Context context;
    
    public CustomAdapter(Context c) {
        context = c;
    }
    
    public int getCount() {
        return thumbId.length;
    }
    
    public Object getItem(int position) {
        return null;
    }
    
    public long getItemId(int position) {
        return 0;
    }
    
    // create a new ImageView for each item referenced by the Adapter
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView;
        if (convertView == null) {
            // if it's not recycled, initialize some attributes
            imageView = new ImageView(context);
            imageView.setLayoutParams(new GridView.LayoutParams(200, 200));
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            imageView.setPadding(8, 8, 8, 8);
        } else {
            imageView = (ImageView) convertView;
        }
    
        imageView.setImageResource(thumbId [position]);
    
    
    
    
        return imageView;
    }
    
    // references to our images
    public Integer[] thumbId = {
    
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7,
            R.drawable.sample_0, R.drawable.sample_1,
            R.drawable.sample_2, R.drawable.sample_3,
            R.drawable.sample_4, R.drawable.sample_5,
            R.drawable.sample_6, R.drawable.sample_7
    };
    
    }
    

    【讨论】:

    • 图像希望从 Firebase Bro 中显示,而不是从 Drawable 中显示
    猜你喜欢
    • 1970-01-01
    • 2017-01-22
    • 1970-01-01
    • 2016-12-13
    • 2020-04-20
    • 2017-12-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多