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

不念不忘少年蓝@ 2022-09-12 09:54 148阅读 0赞

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

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

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

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

## 一、效果图 ##

![在这里插入图片描述][607242e231f443d3b2b373f3fe1f7701.gif_pic_center]

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

## 二、代码详解 ##

### 1、布局文件 ###

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

### 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][https_download.csdn.net_download_wenzhi20102321_24341981]

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

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

[607242e231f443d3b2b373f3fe1f7701.gif_pic_center]: /images/20220828/fe4e9d70783744ec9282860c972465a0.png
[https_download.csdn.net_download_wenzhi20102321_24341981]: https://download.csdn.net/download/wenzhi20102321/24341981