GridView 表格里面的图片点击效果控制

Posted 2021-10-12 峥嵘life

GridView 表格里面的图片点击效果控制

• • 一、效果图
  • 二、代码详解
  • • 1、布局文件
    • 2、重点的Adapter代码
    • 3、显示的Activity代码
    • • 代码下载链接：
• 共勉：人生短短几十年，好好珍惜吧。

点击GridView的item默认会有背景变暗的效果，
但是没有设置成图片按下的效果，这个需要自己做适配，
网上查找了一下居然没有现成的示例，不过依靠牢固的基础工是可以完成的。

主要实现过程是通过Adapter中的getView回调，在View中进行onTouchEvent和onClick监听

一、效果图

这里只对部分item设置了点击图片可以有按下效果。
如果要点击Item要图片和文字都有按下效果也是可以参考一下我的代码进行适配的。

二、代码详解

1、布局文件

<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:orientation="vertical">

    <GridView
        android:id="@+id/gridView"
        android:layout_width="match_parent"
        android:numColumns="2"
        android:layout_height="300dp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/gridView"
        android:background="#0f0"
        android:gravity="center"
        android:onClick="jumpToActivity2"
        android:text="其他内容"
        android:textSize="30sp" />

</RelativeLayout>

这个比较简单，就一个网格布局。

2、重点的Adapter代码

AppGridViewAdapter2.java

package com.liwenzhi.viewpagerandrecycleview.adapter;

import android.content.Context;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.liwenzhi.viewpagerandrecycleview.R;

import java.util.List;

/**
 * 用于GridView装载数据的适配器,适配图片点击按下效果
 */
public class AppGridViewAdapter2 extends BaseAdapter {
    static String TAG = "AppGridViewAdapter2";
    private List<CutBean> mList;// 定义一个list对象
    private Context mContext;// 上下文

    /**
     * 构造方法
     *
     * @param context 上下文
     * @param list    所有APP的集合
     */
    public AppGridViewAdapter2(Context context, List<CutBean> list) {
        mContext = context;
        mList = list;
    }

    public int getCount() {
        return mList.size();
    }

    public Object getItem(int position) {
        return mList.get(position);
    }

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

    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(
                    R.layout.app_item, parent, false);
            holder = new ViewHolder(convertView);
            // 在缓冲的View对象中添加holder标签
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        CutBean cutInfo = mList.get(position);
        holder.setData(cutInfo);
        return convertView;
    }

    // ViewHolder的使用,也是相当于缓冲的功能,避免重复的findViewById
    static class ViewHolder {
        TextView name;
        ImageView iv;

        // 传入的是一个布局重用的View对象
        public ViewHolder(View convertView) {
            // 冲缓冲中提取数据
            iv = (ImageView) convertView.findViewById(R.id.ivAppIcon);
            name = (TextView) convertView.findViewById(R.id.tvAppName);
        }

        // set方法，方便数据的显示，直接显示在屏幕中
        public void setData(CutBean bean) {
            iv.setImageResource(bean.getPictureId());
            name.setText(bean.getTitle());


            //需要自适配按下事件
            if (bean.getPicturePreId() != 0) {
                iv.setOnTouchListener(new View.OnTouchListener() {
                    @Override
                    public boolean onTouch(View v, MotionEvent event) {
                        Log.i(TAG, "event.getAction() = " + event.getAction());
                        if (event.getAction() == MotionEvent.ACTION_DOWN) {
                            iv.setImageResource(bean.getPicturePreId());
                        } else {
                            iv.postDelayed(new Runnable() {
                                @Override
                                public void run() {
                                    iv.setImageResource(bean.getPictureId());
                                }
                            }, 200);

                        }
                        return false;
                    }
                });
                //如果这里没有设置onClick事件，上面收到down事件，其他事件无法收到！！？？
                //如果设置了onClick事件，会有个问题setOnItemClickListener收不到事件回调，只能自己写回调了
                iv.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        if (mCallback != null) {
                            mCallback.callback(bean.getTag());
                        }
                    }
                });
            }
        }
    }

    //定义回调接口
    public interface IImageClickCallback {
        void callback(String tag);
    }

    //定义回调对象
    static IImageClickCallback mCallback;

    /**
     * 暴露给外部的设置图片点击事件回调
     */
    public void setImageClickCallback(IImageClickCallback callback) {
        mCallback = callback;
    }

}

重点消化上面的代码。
如果要点击Item任何部位都有图片按下效果，对ViewHolder里面的convertView进行onTouch和onClick监听即可。

3、显示的Activity代码

package com.liwenzhi.viewpagerandrecycleview.activity;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.Toast;

import com.liwenzhi.viewpagerandrecycleview.R;
import com.liwenzhi.viewpagerandrecycleview.adapter.AppGridViewAdapter2;
import com.liwenzhi.viewpagerandrecycleview.adapter.CutBean;

import java.util.ArrayList;
import java.util.List;

/**
 * 普通的GridView
 * <p>
 * 设置图片点击后，设置按下效果
 */
public class Activity2 extends Activity {
    private static final String TAG = "Activity2";
    private static final int APP_NUM_COLUMNS = 4; //设置每行多少个
    private List<CutBean> mCutBeanList = new ArrayList<>();
    private AppGridViewAdapter2 mAdapter2;
    private GridView mGridView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.i(TAG, "onCreate");
        initData();
        initViews();
        initEvent();
    }

    private void initData() {
        mCutBeanList.add(new CutBean("1", "插入1", R.mipmap.number1));
        mCutBeanList.add(new CutBean("2", "插入2", R.mipmap.number2));
        mCutBeanList.add(new CutBean("3", "插入3", R.mipmap.number3));
        mCutBeanList.add(new CutBean("4", "插入4", R.mipmap.number4));
        mCutBeanList.add(new CutBean("5", "插入5", R.mipmap.number5));
        mCutBeanList.add(new CutBean("6", "插入6", R.mipmap.number6));
        mCutBeanList.add(new CutBean("7", "插入7", R.mipmap.number7));
        mCutBeanList.add(new CutBean("8", "插入8", R.mipmap.number8));
        mCutBeanList.add(new CutBean("9", "插入9", R.mipmap.number9));
        mCutBeanList.add(new CutBean("10", "插入10", R.mipmap.number10));
        mCutBeanList.add(new CutBean("11", "插入11", R.mipmap.number11, R.mipmap.number11_pre));
        mCutBeanList.add(new CutBean("12", "插入12", R.mipmap.number12, R.mipmap.number12_pre));

    }

    public void initViews() {
        setContentView(R.layout.activity_main2);
        mGridView = findViewById(R.id.gridView);
        mAdapter2 = new AppGridViewAdapter2(this, mCutBeanList);
        mGridView.setNumColumns(APP_NUM_COLUMNS);//设置每行多少个
        mGridView.setAdapter(mAdapter2);
//        gridView.setSelector(new ColorDrawable(Color.TRANSPARENT)); //去除按下Item背景变暗的设置
    }

    private void initEvent() {
        //Item点击事件，
        mGridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(Activity2.this, "position = " + position + ",Tag = " + mCutBeanList.get(position).getTag(), Toast.LENGTH_LONG).show();
                doSomethingForTag(mCutBeanList.get(position).getTag());
            }
        });


        //图片点击事件
        mAdapter2.setImageClickCallback(new AppGridViewAdapter2.IImageClickCallback() {
            @Override
            public void callback(String tag) {
                Toast.makeText(Activity2.this, "ImageClick  Tag = " + tag, Toast.LENGTH_LONG).show();
                doSomethingForTag(tag);
            }
        });

        //说明一下：如果没设置按下效果的图片，那么只回调自带的OnItemClick事件
        //如果设置了按下效果图片，那么点击图片会回调创建的ImageClick事件，点击Item里面的文字，会回调自带的OnItemClick事件
        //任何时候只会回调OnItemClick事件或者OnItemClick事件其中一个，不会同时回调的情况。

    }

    //处理具体事务
    private void doSomethingForTag(String tag) {

    }


    //关闭界面
    public void jumpToActivity2(View view) {
        finish();
    }

}

item对应的Bean类

package com.liwenzhi.viewpagerandrecycleview.adapter;

/**
 * 实用工具表格列表Bean
 */
public class CutBean {
    private String tag;//标签，用于点击后获取对应位置
    private String title; //标题的资源id
    private int pictureId; //图片id
    private int picturePreId; //图片id

    public CutBean(String tag, String title, int pictureId) {
        this.tag = tag;
        this.title = title;
        this.pictureId = pictureId;
    }

    public CutBean(String tag, String title, int pictureId, int picturePreId) {
        this.tag = tag;
        this.title = title;
        this.pictureId = pictureId;
        this.picturePreId = picturePreId;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String titleId) {
        this.title = titleId;
    }

    public int getPictureId() {
        return pictureId;
    }

    public void setPictureId(int pictureId) {
        this.pictureId = pictureId;
    }

    public String getTag() {
        return tag;
    }

    public void setTag(String tag) {
        this.tag = tag;
    }

    public int getPicturePreId() {
        return picturePreId;
    }

    public void setPicturePreId(int picturePreId) {
        this.picturePreId = picturePreId;
    }
}

到这里代码介绍完了。

代码就介绍到这里，需要具体代码可以进行下载。

代码下载链接：

https://download.csdn.net/download/wenzhi20102321/24341981

一般场景列表点击用默认的背景变暗就行，
但是有些特殊场景要图片按下效果比较好看，
比如我的实际场景是悬浮框里面的列表，并且没有文字的，
需要按下效果才好看，所以才需要去适配的。

共勉：人生短短几十年，好好珍惜吧。