2016-10-03 2 views
1

Ich erstelle eine Galerie-Anwendung..Es wird hier beschrieben. http://www.androidhive.info/2012/02/android-gridview-layout-tutorial/So laden Sie Bilder in Gridview von JSON von Server mit einer Liste von Image-URLs

ich in der Lage bin, dies zu erreichen von ziehbar Ressourcen .. Was ich brauche, ist i Bild-URL als json vom Server holen will, und um es anzuzeigen .. Mein JSON-Format ist: http://52.42.251.70/testData/imagelist.php

Fragment Code:

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; 
    } 
} 

Beliebig Hilfe versteht sich ..

+0

können Sie auch [this] (http://www.androidhive.info/2012/01/android-json-parsing-tutorial/) von der gleichen Website überprüfen. – Nisarg

+0

Ihre Daten sind keine Antwort im JSON-Format http://jsonviewer.stack.hu/?utm_content=buffer2b790&utm_medium=social&utm_source=app.net&utm_campaign=buffer#http://52.42.251.70/testData/imagelist.php –

+0

@LiemVo ist korrekt , Sie Json ist nicht gültig. Sie benötigen ein {vor jedem "id" -Tag, Sie haben eines vor dem ersten, aber keines anderen. –

Antwort

1

Hier ist einfache Lösung:

Die neuen Daten auf dem Server: https://dl.dropboxusercontent.com/u/31298901/demo/demo_image.txt

Die 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> 

Datei

MainActivi ty Klasse

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

Das Layout für 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; 
    } 
} 

Abhängigkeiten in gradle bauen

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' 
} 
+1

Full Source Code ist hier https://github.com/liemvo/GridViewImage –

+2

Lassen Sie mich das versuchen. –

+1

Großartig .. Es funktioniert perfekt .. Aber ich würde gerne etwas wissen .. Wenn ich dies zu fragement hinzufügen runOnUiThread zeigt Fehler .. Auch wie könnte ich ein Laden zeigen? Der leere Bildschirm wird angezeigt .. –

1

Sie picasso Bibliothek verwenden können, das gleiche zu tun.

Konfiguration

setzten compile 'com.squareup.picasso:picasso:2.5.2' in Ihrer Modulebene build.gradle Datei.

Verwendet

imageView.setImageResource(mThumbIds[position]); ersetzen mit Picasso.with(getActivity()).load("URL of the image").into(imageView);

Für Ihre URL scheint es eine Liste von Bild-URLs. So können Sie diese Liste an Ihren Adapter weitergeben, nachdem Sie die Antwort erhalten haben.

+0

GridView gridView = (GridView) getView(). FindViewById (R.id.grid_view) gridView.setAdapter (neues ImageAdapter (this.getActivity())); @Manu Sharma Ich habe dies verwendet, um den Adapter zu nennen. Wie könnte ich die Bilder vom Server in eine Liste laden und an Adapter übergeben .. Ich könnte asyc Aufgabe verwenden, um die Liste zu füllen. Aber danach, wie könnte ich sie an Adapter übergeben –

+0

Wenn Sie die Liste der URLs vom Server erhalten. Übergeben Sie es an Ihren Adapterbaustein. Ändern Sie die Signatur Ihres Adapterbausteins in 'public ImageAdapter (Kontextkontext, Liste urls) {mContext = context;' –

+1

Wenn Sie die URL-Liste vom Server erhalten. Übergeben Sie es an Ihren Adapterbaustein. Ändern Sie die Signatur Ihres Adapterbausteins in 'public ImageAdapter (Kontextkontext, Liste urls) {mContext = context; mUrls = urls' und ändern Sie' gridView.setAdapter (new ImageAdapter (this.getActivity())); 'in' gridView. setAdapter (neues ImageAdapter (this.getActivity(), urls/* welches eine Liste von URL-Strings * /)) ist; '. Probieren Sie es aus und sagen Sie mir, wenn Sie ein Problem haben. –

Verwandte Themen