如何從服務器的圖像URL列表加載jQuery的gridview中的圖像

Question

我正在創建一個圖庫應用程序..它在這裏描述。 http://www.androidhive.info/2012/02/android-gridview-layout-tutorial/

我能夠從繪圖資源做到這一點。我需要的是我想從服務器獲取圖像的URL爲JSON並顯示它.. 我的JSON格式是： http://52.42.251.70/testData/imagelist.php

片段代碼：

public void onActivityCreated(Bundle savedInstanceState) { 
     super.onActivityCreated(savedInstanceState); 
     GridView gridView = (GridView)getView().findViewById(R.id.grid_view); 

     // Instance of ImageAdapter Class 
     gridView.setAdapter(new ImageAdapter(this.getActivity())); 

     /** 
     * On Click event for Single Gridview Item 
     * */ 
     gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() { 
      @Override 
      public void onItemClick(AdapterView<?> parent, View view, int position, long id) { 
       Intent i = new Intent(getActivity(), FullImageActivity.class); 
       // passing array index 
       i.putExtra("id", position); 
       startActivity(i); 
      } 
     }); 
    } 

Imageadapter.java

public class ImageAdapter extends BaseAdapter { 
    private Context mContext; 
    JSONObject jsonobject; 
    DatabaseUserTable myDatadb; 
    JSONArray jsonarray; 
    String imageUrl = ""; 
    String id = ""; 
    ArrayList<String> Urls = new ArrayList<String>(); 
    // Keep all Images in array 
    public Integer[] mThumbIds = { 
      R.drawable.imagewall,R.drawable.imagewall, 
      R.drawable.imagewall,R.drawable.imagewall, 
      R.drawable.imagewall,R.drawable.imagewall, 
      R.drawable.imagewall,R.drawable.imagewall, 
      R.drawable.imagewall,R.drawable.imagewall, 
      R.drawable.imagewall,R.drawable.imagewall, 
      R.drawable.imagewall,R.drawable.imagewall, 
      R.drawable.imagewall 
    }; 

    // Constructor 
    public ImageAdapter(Context c){ 
     mContext = c; 
    } 

    @Override 
    public int getCount() { 
     return mThumbIds.length; 
    } 

    @Override 
    public Object getItem(int position) { 
     return mThumbIds[position]; 
    } 

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

    @Override 
    public View getView(int position, View convertView, ViewGroup parent) { 
     ImageView imageView = new ImageView(mContext); 
     imageView.setImageResource(mThumbIds[position]); 
     imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); 
     imageView.setLayoutParams(new GridView.LayoutParams(220, 220)); 
     return imageView; 
    } 
} 

任何幫助將不勝感激..

Answer 1

下面是簡單的解決方案：

服務器上的新數據：https://dl.dropboxusercontent.com/u/31298901/demo/demo_image.txt

AndroidManifest.xml文件

<uses-permission android:name="android.permission.INTERNET" /> 
<application 
    android:allowBackup="true" 
    android:icon="@mipmap/ic_launcher" 
    android:label="@string/app_name" 
    android:supportsRtl="true" 
    android:theme="@style/AppTheme"> 
    <activity android:name=".MainActivity"> 
     <intent-filter> 
      <action android:name="android.intent.action.MAIN" /> 
      <category android:name="android.intent.category.LAUNCHER" /> 
     </intent-filter> 
    </activity> 
</application> 

MainActivi TY類

public class MainActivity extends AppCompatActivity { 

    GridView gridView; 
    MyGridAdapter myGridAdapter; 
    private static String DATA_URL = "https://dl.dropboxusercontent.com/u/31298901/demo/demo_image.txt"; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     gridView = (GridView) findViewById(R.id.gridview); 
     getData(); 
    } 


    private void getData(){ 

     RequestQueue queue = Volley.newRequestQueue(this); 

     StringRequest stringRequest = new StringRequest(Request.Method.GET, DATA_URL, new Response.Listener<String>() { 
      @Override 
      public void onResponse(String response) { 
       try { 
        JSONObject jsonObject = new JSONObject(response); 
        JSONArray allImageArray = jsonObject.optJSONArray("images"); 
        if(allImageArray != null && allImageArray.length() > 0){ 

         ArrayList<ImageObject> imageObjects = new ArrayList<>(); 
         for(int i = 0; i < allImageArray.length();i++){ 
          JSONObject jsonItem = allImageArray.optJSONObject(i); 

          imageObjects.add(new ImageObject(jsonItem)); 
         } 

         myGridAdapter= new MyGridAdapter(MainActivity.this, imageObjects); 

         runOnUiThread(new Runnable() { 
          @Override 
          public void run() { 
           gridView.setAdapter(myGridAdapter); 
          } 
         }); 
        } 
       } catch (Exception e){ 

       } 

      } 
     }, new Response.ErrorListener() { 
      @Override 
      public void onErrorResponse(VolleyError error) { 

      } 
     }); 

     stringRequest.setRetryPolicy(new DefaultRetryPolicy(6000, DefaultRetryPolicy.DEFAULT_MAX_RETRIES, DefaultRetryPolicy.DEFAULT_BACKOFF_MULT)); 
     queue.add(stringRequest); 
    } 
} 

爲MainActivity activity_layout.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:paddingBottom="@dimen/activity_vertical_margin" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    android:paddingTop="@dimen/activity_vertical_margin" 
    tools:context="com.android.vad.gridview.MainActivity"> 

    <GridView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:id="@+id/gridview" 
     android:columnWidth="120dp" 
     android:verticalSpacing="10dp" 
     android:numColumns="auto_fit"> 

    </GridView> 
</RelativeLayout> 

GridAdapter.java

public class MyGridAdapter extends BaseAdapter{ 
private Context context; 
private ArrayList<ImageObject> imageObjects; 

private LayoutInflater mLayoutInflate; 


public MyGridAdapter (Context context, ArrayList<ImageObject> imageObjects){ 
    this.context = context; 
    this.imageObjects = imageObjects; 

    this.mLayoutInflate = LayoutInflater.from(context); 
} 

public int getCount() { 
    if(imageObjects != null) return imageObjects.size(); 
    return 0; 
} 

@Override 
public Object getItem(int position) { 
    if(imageObjects != null && imageObjects.size() > position) return imageObjects.get(position); 

    return null; 
} 

@Override 
public long getItemId(int position) { 
    if(imageObjects != null && imageObjects.size() > position) return imageObjects.get(position).getId(); 
    return 0; 
} 

@Override 
public View getView(int position, View convertView, ViewGroup parent) { 
    ViewHolder viewHolder = null; 
    if (convertView == null) { 

     viewHolder = new ViewHolder(); 

     convertView = mLayoutInflate.inflate(R.layout.imageitem, parent, 
       false); 
     viewHolder.imageView = (ImageView) convertView.findViewById(R.id.image); 
     convertView.setTag(viewHolder); 
    } else { 
     viewHolder = (ViewHolder) convertView.getTag(); 
    } 
    ImageObject imageObject = (ImageObject) getItem(position); 
    if(imageObject != null) { 
     Glide 
       .with(context) 
       .load(imageObject.getImageUrl()) 
       .centerCrop() 
       .crossFade() 
       .into(viewHolder.imageView); 
    } 

    return convertView; 
} 

private class ViewHolder { 
    public ImageView imageView; 
} 

}

imageitem.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" android:layout_width="80dp" 
    android:layout_height="120dp"> 

    <ImageView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:id="@+id/image"/> 
</LinearLayout> 

佈局

ImageObject.java

public class ImageObject { 
    private int id; 
    private String imageUrl; 

    public ImageObject(){ 

    } 

    public ImageObject(JSONObject jsonObject){ 
     if(jsonObject == null) return; 
     this.id = jsonObject.optInt("id"); 
     this.imageUrl = jsonObject.optString("imageUrl"); 
    } 

    public int getId() { 
     return id; 
    } 

    public void setId(int id) { 
     this.id = id; 
    } 

    public String getImageUrl() { 
     return imageUrl; 
    } 

    public void setImageUrl(String imageUrl) { 
     this.imageUrl = imageUrl; 
    } 
} 

依賴的gradle中建

dependencies { 
    compile fileTree(dir: 'libs', include: ['*.jar']) 
    testCompile 'junit:junit:4.12' 
    compile 'com.android.support:appcompat-v7:23.4.0' 
    compile 'com.github.bumptech.glide:glide:3.7.0' 
    compile 'com.mcxiaoke.volley:library:1.0.19' 
} 

Answer 2

您可以使用畢加索庫做相同的。

配置

把compile 'com.squareup.picasso:picasso:2.5.2'在模塊級的build.gradle文件。

用途

與Picasso.with(getActivity()).load("URL of the image").into(imageView);

您提供的網址似乎圖像的URL列表取代imageView.setImageResource(mThumbIds[position]); 。因此您可以在獲得響應後將此列表傳遞給適配器。