如何从 JSON 加载多张图片并在 android 的画廊视图中显示？

Question

我正在开发一个带有 Gallery 选项的应用程序。我在 JSON 中有一些 URL。我已经解析它并保存在 String ArrayList 中。现在我只想在 GalleryView 中显示那些图像。我浏览了各种没有帮助的参考资料。我也用过 UniversalImageLoader，它适用于一个 URL only.I 需要加载多个 URL，它存在于我的 ArrayList 中。请给我一些实现它的提示。

已更新

这是我的画廊Activityclass

public class Gallery extends AppCompatActivity {
public ArrayList<GalleryItem> imageURL;
private ImageView selectedImageView;
ArrayList<Drawable> dataDraw= new ArrayList<>();
private GridView mGridView;
public Gallery gallery;

private GalleryImageAdapter galImageAdapter;

public String url="my_url";
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_gallery);
    mGridView = (GridView) findViewById(R.id.galleryGrid);
    imageURL=new ArrayList<>();



    new AsyncHttpTaskforGallery().execute(url);
//        galImageAdapter = new GalleryImageAdapter(this, dataDraw);
    galImageAdapter=new GalleryImageAdapter(this,R.layout.gallery_item,imageURL);
    mGridView.setAdapter(galImageAdapter);


}



public class AsyncHttpTaskforGallery extends AsyncTask<String, Void, Integer> {

    @Override

    protected Integer doInBackground(String... params) {

        Integer result = 0;

        try {

            HttpClient httpclient = new DefaultHttpClient();
            HttpResponse httpResponse = httpclient.execute(new HttpGet(params[0]));
            int statusCode = httpResponse.getStatusLine().getStatusCode();


            if (statusCode == 200) {

                String response = streamToString(httpResponse.getEntity().getContent());
                parseResult(response);
                result = 1;
            }
            else {
                result = 0;
            }
        } catch (Exception e) {

            Log.d("TAG", e.getLocalizedMessage());
        }

        return result;
    }

    @Override

    protected void onPostExecute(Integer result) {


        if (result == 1) {
            galImageAdapter.setGridData(imageURL);
        }

        else {

        }


    }
}


String streamToString(InputStream stream) throws IOException {

    BufferedReader bufferedReader = new BufferedReader(new InputStreamReader(stream));
    String line;
    String result = "";

    while ((line = bufferedReader.readLine()) != null) {

        result += line;
    }


    if (null != stream) {

        stream.close();
    }

    return result;
}


private void parseResult(String result) {

    try {

        JSONArray posts = new JSONArray(result);

        GalleryItem galleryItem;
        for (int i = 0; i < posts.length(); i++) {

            JSONObject post = posts.optJSONObject(i);
            String path = post.optString("path");
            String newText=path.replace("\", "/");
            String image="http://***/"+newText;
            Log.e("imageURL", image);
            galleryItem=new GalleryItem();
            galleryItem.setImage(image);
            imageURL.add(galleryItem);

        }

    }

    catch (JSONException e) {

        e.printStackTrace();

    }
}
  }

图库适配器

public class GalleryImageAdapter extends ArrayAdapter<GalleryItem> {

private Context mContext;
private int layoutResourceId;
private ArrayList<GalleryItem> mGalleryData = new ArrayList<GalleryItem>();
public GalleryImageAdapter(Context mContext, int layoutResourceId, ArrayList<GalleryItem> mGalleryData) {
    super(mContext, layoutResourceId, mGalleryData);
    this.layoutResourceId = layoutResourceId;
    this.mContext = mContext;
    this.mGalleryData = mGalleryData;
}
public void setGridData(ArrayList<GalleryItem> mGalleryData) {
    this.mGalleryData = mGalleryData;
    notifyDataSetChanged();
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View row = convertView;
    ViewHolder holder;

    if (row == null) {
        LayoutInflater inflater = ((Activity) mContext).getLayoutInflater();
        row = inflater.inflate(layoutResourceId, parent, false);
        holder = new ViewHolder();

        holder.imageView = (ImageView) row.findViewById(R.id.IMVgallery);
        row.setTag(holder);
    } else {
         holder = (ViewHolder) row.getTag();
    }

    GalleryItem item = mGalleryData.get(position);

    Picasso.with(mContext).load(item.getImage()).into(holder.imageView);
    return row;
}
static class ViewHolder {

    ImageView imageView;
}

}

在 gridview 中显示图像效果不佳。我需要在 galleryview 中显示并单击图像，它应该展开。

Answer 1

GalleryView -> 将 RecyclerView 与 GridLayoutManager 结合使用

然后在 RecyclerView Adapter 的 ViewHolder 初始化中，使用 Picasso 库将图像加载到相应的 ImageView 中。

现在当用户点击单个图像时会发生什么？您打算以全屏视图打开它吗？

如果是，请使用 ViewPager。再次使用类似的技术。使用 Picasso 在 ViewPager 适配器的相应 ImageView 中加载图像。

毕加索库请参考： http://square.github.io/picasso/

如果您需要更多帮助，请告诉我。

更新:

尝试了解如何使用 GridLayoutManager 实现 RecyclerView
你的 recyclerview 项目视图应该有一个图像视图，你将在 ViewHolder 的初始化中使用 Picasoo 库填充图像。
在 ImageView 的 onClick 中 -> 使用相同的一组 URI 打开另一个 activity 并使用这些 URI 将这些图像填充到 ViewPager。

更新 2:

比方说，您的图库适配器是 "MyAdapter"。它应该是这样的：

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {

    private Context mContext;
    private ArrayList<String> mUrls;

    public MyAdapter(Context context, ArrayList<String> urls) {
        mContext = context;
        mUrls = urls;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View layoutView = LayoutInflater.from(parent.getContext()).inflate(R.layout.my_gallery_item_layout, null);
        MyViewHolder rcv = new MyViewHolder(layoutView);
        return rcv;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, int position) {
        Picasso.with(mContext).load(mUrls.get(position)).into(holder.mImageView);
        //Do something here
    }

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

    public class MyViewHolder extends RecyclerView.ViewHolder{

        private final ImageView mImageView;
        //Other views

        public MyViewHolder(final View itemView) {
            super(itemView);
            mImageView = itemView.findViewById(R.id.gallery_item_imageview);
            mImageView.setOnClickListener(new View.OnClickListener(){

                @Override
                public void onClick(View view){
                    //This is were the magic happens:
                    //We are opening the full image viewer activity that contains a ViewPager to show the images
                    Intent intent = new Intent(mContext, MyFullViewActivity.class);
                    intent.putStringArrayListExtra("urls", mUrls);
                    intent.putInt("starting_index", getPosition());
                    mContext.startActivity(intent);
                }

            });
            //Initialize other views here

        }
    }
}

注意在ImageView的onCLick中，我们会启动另一个activity "MyFullViewActivity"，这个activity在item布局中有一个带有imageview的ViewPager。我们还向此 activity:

传递了两个额外的意图

"urls" ：这是将由 ViewPager
"starting_index" ：它将告诉 activity 从该值提供的索引开始。即，如果用户点击您图库中的第二张图片，则 MyFullViewActivity 应该从该索引开始，而不是每次都从第一个索引开始。

现在您可以实现 ViewPagerAdapter 并相应地更改图像（如上例所述使用 Picasso）。

如果您需要更多帮助，请告诉我。

更新 3：

以下是初始化回收视图的方法：

RecyclerView mGalleryViewRecyclerView = findViewById(R.id.my_gallery_recycler_view);
GridLayoutManager mGridLayoutManager = new GridLayoutManager(mContext, 2); // here 2 indicates the number of columns in each row.
mGalleryViewRecyclerView.setLayoutManager(mGridLayoutManager);

Answer 2

您可以使用 picasso 和适配器来执行此操作：网格适配器：

public class GridAdapter extends BaseAdapter {
private Context mContext;
private ArrayList<String> list;
public ListAdapter(Context context,ArrayList<String> posters){
    this.mContext = context;
    this.list = posters;
    notifyDataSetChanged();
}

@Override
public int getCount() {
    return list.size();
}

@Override
public Object getItem(int position) {
    return list.get(position);
}

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View view=null;
    ImageView imageView;
        if (convertView == null) {
            view = LayoutInflater.from(mContext).inflate(R.layout.list_item, parent, false);
            imageView = (ImageView) view.findViewById(R.id.list_image);
        } else {
            imageView = (ImageView) convertView;
        }
    Picasso.with(mContext).load(posters.get(position)).into(imageView);
    return view;
}
}

在您的 list_item.xml 中定义您的图像视图属性，并在主 activity 中将此适配器设置为您的网格视图并传递 url 的列表。

如何从 JSON 加载多张图片并在 android 的画廊视图中显示？

How to load multiple images from JSON and display in gallery view in android?

android

android-gallery

android-image

android-layout

android-volley