如何从 JSON 加载多个图像并在 android 的图库视图中显示？

Question

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

更新

这是我的画廊活动课程

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 -> 使用带有 GridLayoutManager 的 RecyclerView

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

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

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

毕加索图书馆，参考： http://square.github.io/picasso/

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

更新：

1. 尝试了解如何使用 GridLayoutManager 实现 RecyclerView

2. 您的 recyclerview 项目视图中应该有一个 imageview，您将在 ViewHolder 的初始化中使用 Picasoo 库填充该图像。

3. 在 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 中，我们将启动另一个活动“MyFullViewActivity”，这个活动在项目布局中有一个带有 imageview 的 ViewPager。我们还将两个 Intent Extras 传递给此活动：

1. "urls" : 这是 ViewPager 将使用的 url 列表

2. "starting_index" ：它将告诉活动在此值中提供的索引处开始。即，如果用户在您的图库中单击第二张图片，则 MyFullViewActivity 应该从该索引开始，而不是每次都从第一个索引开始。

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

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

更新 3：

这里是你如何初始化recyclerview：

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 中定义您的图像视图属性，并在主活动中将此适配器设置为您的网格视图并传递 url 列表。