如何在 Picasso 中设置 onClickListener

Question

我是一个 Android 初学者，我正在构建一个音板应用程序来获得乐趣，我正在使用 Picasso 并排显示 2 列 ImageButton。为什么是毕加索？因为使用简单的 ScrollView 和 ImageButton 我的应用程序在向下滚动时滞后很多。

无论如何，我试图在点击图片时播放声音，但我在互联网上找不到与此相关的任何内容。

这是我的代码：

ImageListAdapter.java

package com.kitbass.mastersynthetizer;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageButton;
import android.widget.ImageView;

import com.squareup.picasso.Picasso;


public class ImageListAdapter extends ArrayAdapter {
    private Context context;
    private LayoutInflater inflater;

    private Integer[] imageResources;

    static class ViewHolder {
        ImageButton mImageButton;
    }

    public ImageListAdapter(Context context, Integer[] imageUrls) {
        super(context, R.layout.listview_item_image, imageUrls);

        this.context = context;
        this.imageResources = imageUrls;

        inflater = LayoutInflater.from(context);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        // ViewHolder pattern in play
        ViewHolder viewHolder;
        if (null == convertView) {
            viewHolder = new ViewHolder();
            convertView = inflater.inflate(R.layout.listview_item_image, parent, false);
            viewHolder.mImageButton = (ImageButton) convertView.findViewById(R.id.iv_button);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        Picasso
                .with(context)
                .load(imageResources[position])
                .fit()
                .centerInside()
                .into(viewHolder.mImageButton);

        return convertView;
    }
}

PicassoActivity.java

     GridView gridView = (GridView) findViewById(R.id.heenok_grid_view);
     gridView.setAdapter(new ImageListAdapter(PicassoActivity.this, imgResourcesHeenok));
     gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long id) {
                Toast.makeText(PicassoActivity.this, "" + position, Toast.LENGTH_SHORT).show();
            }
     });

activity_picasso.xml

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/heenok_grid_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:numColumns="2" />

listview_item_image.xml

<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iv_button"
    android:layout_width="match_parent"
    android:layout_height="121dp"
    android:background="@null"
    android:foreground="?attr/selectableItemBackgroundBorderless" />

谢谢！

UPDATE ：错误是我使用的是 ImageButton 而不是 ImageView... 这就是为什么我连一个Toast 工作

Answer 1

首先，我会为您的适配器做一些不同的事情class 使用 ViewHolder 模式回收您的视图：

将您的 xml 更改为：

添加一个 ID
移除 onClick 方法调用

根据：

<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/iv_button"
    android:layout_width="match_parent"
    android:layout_height="121dp"
    android:background="@null"
    android:foreground="?attr/selectableItemBackgroundBorderless"/>

然后在您的适配器中使用 ViewHolder 模式：

public class ImageListAdapter extends ArrayAdapter {
    private Context context;
    private LayoutInflater inflater;

    private Integer[] imageResources;

    static class ViewHolder{
       ImageButton mImageButton;
    }

    public ImageListAdapter(Context context, Integer[] imageUrls) {
        super(context, R.layout.listview_item_image, imageUrls);

        this.context = context;
        this.imageResources = imageUrls;

        inflater = LayoutInflater.from(context);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        // ViewHolder pattern in play
        ViewHolder viewHolder;
        if (null == convertView) {
            viewHolder = new ViewHolder();
            convertView = inflater.inflate(R.layout.listview_item_image, parent, false);
            viewHolder.mImageButton = (ImageButton) convertView.findViewById(R.id.iv_button);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder) convertView.getTag();
        }

        Picasso
                .with(context)
                .load(imageResources[position])
                .fit()
                .centerInside()
                .into(viewHolder.mImageButton);

        return convertView;
    }
}

或者换成更流行的RecyclerView

那么由于您使用 GridView 来处理点击，因此您需要在 Activity class:

中添加 AdapterView.OnItemClickListener

mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener(){
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l){
      //... handle the sound playing here
      // onSoundButtonClick() ? maybe
    }

});

对于所有这些你可以找到一个例子here

祝你好运，编码愉快！

Answer 2

更新您的 listview_item_image.xml 如下：

<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/image_button"
    android:layout_width="match_parent"
    android:layout_height="121dp"
    android:background="@null"
    android:foreground="?attr/selectableItemBackgroundBorderless"/>

更新 ImageListAdapter 方法 getView() 为：

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    if (null == convertView) {
        convertView = inflater.inflate(R.layout.listview_item_image, parent, false);
    }

    ImageButton imageButton = (ImageButton) convertView.findViewById(R.id.image_button);

    Picasso
        .with(context)
        .load(imageResources[position])
        .fit()
        .centerInside()
        .into(imageButton);

    return convertView;
}

希望这会奏效。

如何在 Picasso 中设置 onClickListener

How to set onClickListener in Picasso

android

xml

onclicklistener

picasso