android - 如何从 JSON 加载多个图像并在 android 的画廊 View 中显示？

Question

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

已更新

这是我的 Gallery Activity 类

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 中。

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

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

毕加索库引用: http://square.github.io/picasso/

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

更新:

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

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

3. 在 ImageView 的 onClick 中 -> 使用同一组 URI 打开另一个 Activity ，并使用这些 URI 将这些图像填​​充到 ViewPager。

更新 2:

比方说，您的 Gallery 的 Adapter 是“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 在项目布局中有一个带有 ImageView 的 ViewPager。我们还向此 Activity 传递了两个额外的 Intent :

1. “urls”:这是将由 ViewPager 使用的 url 列表

2. "starting_index":它将告诉 Activity 从该值中提供的索引开始。即，如果用户点击您图库中的第二张图片，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);