如何從JSON加載多個圖像並在Android的圖庫視圖中顯示？

Question

我正在開發具有Gallery選項的應用程序。 我在JSON有一些URL。 我已經解析了它並保存在String ArrayList 。 現在，我只想在GalleryView顯示這些圖像。 我瀏覽了各種參考資料，這些參考資料對您沒有幫助。 我也使用過UniversalImageLoader ，它僅適用於一個URL。我需要加載ArrayList存在的多個URL。 請給我一些實現它的提示。

更新

這是我的畫廊活動課

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();

    }
}
  }

GalleryAdapter

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

有關Picasso庫的信息，請參見： http : //square.github.io/picasso/

讓我知道您是否需要更多幫助。

更新 ：

1. 嘗試找出如何使用GridLayoutManager實現RecyclerView

2. 您的recyclerview項目視圖中應該有一個imageview，您將在ViewHolder的初始化過程中使用Picasoo庫將其填充到圖像中。

3. 在ImageView的onClick中->打開具有相同URI集的另一個活動，並使用這些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”，該活動具有一個ViewPager，在項目布局中帶有一個imageview。 我們還向該活動傳遞了兩個額外的意圖：

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列表。