如何使用Picasso for Android創建交互式GridView？

Question

嗨我想創建一個GridView使用圖像從網上存款使用畢加索。 我也希望用戶能夠點擊圖像，並加載全屏查看。

到目前爲止，我已經設法使它幾乎完美地工作。唯一的問題是，當他們點擊網格時顯示的圖像不是他們點擊的圖像，實際上它每次都會隨機選擇一個圖像。

我希望有人可以看看我的代碼，並告訴我哪裏出錯了。 謝謝。

所以這是我的MainActivity類別：

import android.app.Activity; 
import android.content.Intent; 
import android.os.Bundle; 
import android.view.View; 
import android.widget.AdapterView; 
import android.widget.AdapterView.OnItemClickListener; 
import android.widget.GridView; 


public class MainActivity extends Activity { 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     GridView gv = (GridView) findViewById(R.id.grid_view); 
     gv.setAdapter(new GridViewAdapter(this)); 


     gv.setOnItemClickListener(new OnItemClickListener() { 
      @Override 
      public void onItemClick(AdapterView<?> parent, View v, 
        int position, long id) { 

       // Sending image id to FullScreenActivity 
       Intent i = new Intent(getApplicationContext(), FullImageActivity.class); 
       // passing array index 
       i.putExtra("id", position); 
       startActivity(i); 
      } 
     }); 
    } 
} 

這是我的GridView類：

import android.content.Context; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.BaseAdapter; 
import com.squareup.picasso.Picasso; 
import java.util.ArrayList; 
import java.util.Collections; 
import java.util.List; 

import static android.widget.ImageView.ScaleType.CENTER_CROP; 

final class GridViewAdapter extends BaseAdapter { 

final Context context; 
final List<String> urls = new ArrayList<String>(); 

public GridViewAdapter(Context context) { 
this.context = context; 

// Ensure we get a different ordering of images on each run. 
Collections.addAll(urls, Info.URLS); 
Collections.shuffle(urls); 

// Triple up the list. 
ArrayList<String> copy = new ArrayList<String>(urls); 
urls.addAll(copy); 
urls.addAll(copy); 
} 

@Override public View getView(int position, View convertView, ViewGroup parent) { 
SquaredImageView view = (SquaredImageView) convertView; 
if (view == null) { 
    view = new SquaredImageView(context); 
    view.setScaleType(CENTER_CROP);  
} 

// Get the image URL for the current position. 
String url = getItem(position); 

// Trigger the download of the URL asynchronously into the image view. 
Picasso.with(context) // 
    .load(url) // 
    .placeholder(R.drawable.placeholder) // 
    .error(R.drawable.error) // 
    .fit() // 
    .into(view); 

return view; 
} 

@Override public int getCount() { 
return urls.size(); 
} 

@Override public String getItem(int position) { 
return urls.get(position); 
} 

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

最後我的全屏類：

import com.squareup.picasso.Picasso; 

import android.app.Activity; 
import android.content.Intent; 
import android.os.Bundle; 
import android.widget.ImageView; 

public class FullImageActivity extends Activity { 

@Override 
public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.full_image); 

    // get intent data 
    Intent i = getIntent(); 

    // Selected image id 
    int position = i.getExtras().getInt("id"); 
    GridViewAdapter ia = new GridViewAdapter(this); 

    ImageView iv = (ImageView) findViewById(R.id.full_image_view); 

    Picasso.with(this) // 
    .load(ia.getItem(position)) // 
    .placeholder(R.drawable.placeholder) // 
    .error(R.drawable.error) // 
    .fit() 
    .centerCrop()// 
    .into(iv); 
} 

} 

Answer 1

我相信這是您的罪魁禍首：

Collections.addAll(urls, Info.URLS); 
Collections.shuffle(urls); // this reshuffles on every new instance 

GridViewAdapter ia = new GridViewAdapter(this); // your full screen activity is creating a new instance. 

因爲我不能評論呢，答案是否定的。當你說startActivity，它會創建FullScreenActivity的新實例，然後在該FullScreenActivity你也是實例化一個新的適配器，然後進行洗牌工作。

如果您有疑問，請將其放入斷點。

Answer 2

無論出於何種原因，您都可以重新初始化適配器GridViewAdapter ia = new GridViewAdapter(this);這就是在構造函數中發生混洗的時候。

您的第二個活動中不應該有適配器。適配器用於列表。您應該簡單地將該活動傳遞給圖片網址。

GridView gv = (GridView) findViewById(R.id.grid_view); 
    GridViewAdapter adapter = new GridViewAdapter(this); 
    gv.setAdapter(adapter); 
    gv.setOnItemClickListener(new OnItemClickListener() { 
     @Override 
     public void onItemClick(AdapterView<?> parent, View v, 
       int position, long id) { 

      // Sending image url to FullScreenActivity 
      Intent i = new Intent(getApplicationContext(), FullImageActivity.class); 

      i.putExtra("url", adapter.getItem(position)); 
      startActivity(i); 
     } 
    }); 

和

public class FullImageActivity extends Activity { 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.full_image); 

    // get intent data 
    Intent i = getIntent(); 

    string url = i.getExtras().getString("url"); 

    ImageView iv = (ImageView) findViewById(R.id.full_image_view); 

    Picasso.with(this) // 
     .load(url) // 
     .placeholder(R.drawable.placeholder) // 
     .error(R.drawable.error) // 
     .fit() 
     .centerCrop()// 
     .into(iv); 
    } 

} 

Answer 3

你正在創建一個適配器兩次 - 一次在MainActivity，在FullImageActivity第二次。每次它被創建時，這就是原因。從畢加索尼斯複製粘貼示例btw;）