处理好item点击事件的gallery(画廊)效果(无bug)

前言

首先看下需要实现的效果图

屏幕是横屏的，每个item点击后滑到中间，再次点击之后就跳转，同时滑动也会有选中的状态

首先看到这个效果，很多人会说，这还不简单，不就是一个画廊效果吗，用viewpager简单实现。
加个父布局，设置一下android:clipChildren=”false”不就搞定了吗，是的，这样可以实现这样的效果，但是功能却满足不了，这个功能指的是item的点击事件
首先看下viewpager实现这个关键的代码

   class ViewpagerAdapter extends PagerAdapter {
        ImageView ivPortrait;
        @Override
        public Object instantiateItem(ViewGroup container, final int position) {
            final UserInfo info = mDatas.get(position);
            View view = LayoutInflater.from(LeiDaActivity.this).inflate(R.layout.viewpager_layout, null);
            ivPortrait = (ImageView) view.findViewById(R.id.iv);
            ImageView ivSex = (ImageView) view.findViewById(R.id.iv_sex);
            TextView tvName = (TextView) view.findViewById(R.id.tv_name);
            TextView tvDistance = (TextView) view.findViewById(R.id.tv_distance);
            tvName.setText(info.getName());
            tvDistance.setText(info.getDistance() + "km");
            ivPortrait.setImageResource(info.getPortraitId());
            if (info.getSex()) {
                ivSex.setImageResource(R.drawable.girl);
            } else {
                ivSex.setImageResource(R.drawable.boy);
            }

            ivPortrait.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(LeiDaActivity.this, "这是 " + info.getName() + " >.<", Toast.LENGTH_SHORT).show();
                    Log.d("swt", position+"");
                }
            });
            container.addView(view);
            return view;
        }

这是viewpager的adapter，网上很多人都会把点击事件写在这里，其实这是错误的，
首先这里的position是当前实例化view的position
也就是说

然后还有一个问题就是，如果你把点击事件写在这里，会出现这样的一个问题

图中红圈标记的位置也会响应点击事件，不信的同学可以试试，
而且我觉得使用viewpager实现这个效果点击事件是不好处理的，所以我换个思路
接下来我考虑使用recyclerview实现这个效果,item的点击事件是很好处理了，
但是坑的是 我发现

如果当前position是可见的，那么你点击的话不会有滑动效果(recyclerview)

也就是scroll不会执行，
呵呵呵呵，那么这个我也放弃了。最后我决定用最原始的控件
gallery来实现，至于效果，那就自己写

xml 布局

xml布局很简单直接上代码了，上面之所以要保留一个LinearLayout是项目需要，我还需要放置一些控件在顶部，大家可以忽略

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.primedu.m.hualang.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:layout_weight="3">

        <Gallery
            android:id="@+id/gallery"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:spacing="50dp"
            />

    </LinearLayout>
</RelativeLayout>

解释一下android:spacing=”50dp”，这个是控制每个item的边距，因为我是横屏的界面，所以我设置的比较大

ps:横屏设置  <activity android:name=".MainActivity" android:screenOrientation="landscape">

java文件

   mGallery = (Gallery) findViewById(R.id.gallery);
        BaseAdapter adapter = new BaseAdapter() {
            @Override
            public int getCount() {
                return mImgs.length;
            }

            @Override
            public Object getItem(int position) {
                return position;
            }

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

            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                // 创建一个ImageView
                ImageView imageView = new ImageView(MainActivity.this);
                imageView.setImageResource(mImgs[position % mImgs.length]);
                // 设置ImageView的缩放类型
                imageView.setLayoutParams(new Gallery.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
                imageView.setScaleType(ImageView.ScaleType.CENTER);
                          /*  TypedArray typedArray = obtainStyledAttributes(R.styleable.Gallery);
                            imageView.setBackgroundResource(typedArray.getResourceId(android.R.style.theme_#Theme_galleryItemBackground, 0));*/

                return imageView;
            }
        };
        mGallery.setAdapter(adapter);

首先设置一个adapter，那么界面就出来了，接下来实现效果，
首先选中的view是高亮的，我在源码里发现了这个

  public void setUnselectedAlpha(float unselectedAlpha) {
        mUnselectedAlpha = unselectedAlpha;
    }

设置没有被选中的view的透明度
mGallery.setUnselectedAlpha(0.5f);
所以我设置他为半透明
接下来设置点击事件，gallery帮我们已经做好了点击事件

    mGallery.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                if (position == defaultpostion) {
                    Toast.makeText(MainActivity.this, "跳转", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(MainActivity.this, "当前点击的是" + position, Toast.LENGTH_SHORT).show();
                }
                defaultpostion = position;

            }
        });

设置一个默认的position
当点击之后，进行覆盖赋值
进行判断如果点击的position和当前的defaultpostion 一致，那么就可以跳转了
mGallery.setSelection(3);
设置初始化的时候选中第三个view
接下来实现选中的效果，缩放和放大
从效果图可以看到，选中的是放大，没选中的是不变
当item被滑动或者被点击的时候都会调用这个方法
mGallery.setOnItemSelectedListener(this);//设置好监听，mainactiivity implements AdapterView.OnItemSelectedListener

  @Override
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {

        Log.d("swt", parent.getCount() + "");

        for (int i = 0; i < parent.getChildCount(); i++) {
            parent.getChildAt(i).setScaleX(1);
            parent.getChildAt(i).setScaleY(1);

        }
        view.setScaleX(1.5f);
        view.setScaleY(1.5f);

    }

在监听中我们做了俩件事
1，首先初始化所有的item的放大，缩小比例为1
2，设置选中的view方法1.5倍

好了，到这里就结束了，功能看起来很简单，代码也不多，但是关于gallery网上的资料比较少，而且为了实现这个功能，踩得坑实现在太多，所以写下来，给以后要实现类似功能的人一点启发，如果你有更好的方法实现，欢迎指教

代码下载地址http://download.csdn.net/detail/qq_15527709/9823633