如何在 GridView 中显示 Firebase 存储图像
Posted
技术标签:
【中文标题】如何在 GridView 中显示 Firebase 存储图像【英文标题】：How to Display Firebase Storage Images in GridView 【发布时间】：2020-12-08 21:51:45 【问题描述】：我是 android 新手，我正在学习 gridview。我想在 gridview 中显示来自可绘制对象的图像列表，但我不知道如何在 gridview 中显示来自 Firebase 存储的图像。
我看过很多教程，我尝试了很多 *** 答案，但我无法得到我需要的东西
我在 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 链接。 【参考方案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/picToDownload 是 storageFoldernoOfPhotos 中图片的名称是您拥有的照片数量，显然您可以设置查询并将它们加载到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 中显示以上是关于如何在 GridView 中显示 Firebase 存储图像的主要内容，如果未能解决你的问题，请参考以下文章
Flutter：从 Firebase 实时数据库项目创建 GridView
如何修复 GridView 和 AnimationBuilder 中的 Jank？