Android自定义Viewgroup切换View带有吸附效果

转载请标明出处： 【http://blog.youkuaiyun.com/hlglinglong/article/details/42687043】

1.概述

先上效果图

大概就是这个效果，先说说实现思路

1.首先我们要拿到图片的url(网络)或id、路径(本地)，将View与数据进行绑定，写我们自己的Adapter

2.自定义Viewgroup将要显示的view进行布局，以及处理触摸事件进行逻辑处理

3.写切换回调

2.实现

1）自定义Adapter

这里我下载的网络图片，同样可以将图片放到res下设置ImageView的内容

public class DragPageViewAdapter {
    private static final String TAG = "DragPageViewAdapter";
    private List<WxCollocationRandomList> mDatas;
    private Context mContext;
    private LayoutInflater inflater;
    /**
     * 宽和高
     */
    int width;
    int height;

    public DragPageViewAdapter(Context mContext) {
        this.mContext = mContext;
        inflater = LayoutInflater.from(mContext);
        width = (int) (0.8*DragViewActivity.mScreenWidth);<span style="font-family: Arial, Helvetica, sans-serif;">//宽是屏幕宽度的0.8</span>
        height = (int) (0.8*DragViewActivity.mScreenWidth);

    }

    public int getCount(){
        return mDatas==null?0:mDatas.size();
    }

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

    public Object getItem(int position){
        return mDatas==null?null:mDatas.get(position);
    }

    public View getView(int position, View convertView, ViewGroup parent){
        LogHelper.d(TAG, "position :" + position);
        final ImageView imageView = new ImageView(mContext);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(width,height);
        params.addRule(Gravity.CENTER);
        imageView.setLayoutParams(params);
        imageView.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.gray_border));
        ViewHelper.setAlpha(imageView,1.0f);

        String url = mDatas.get(position).getPictureUrl();
        if (!Utils.stringIsNull(url)){
            url = url.substring(0, url.lastIndexOf(".")) + "--300x300.png";
//            UILHelper.loadImageUrl(url, imageView,0);
            UILHelper.loadImageUrl(url, new SimpleImageLoadingListener(){
                @Override
                public void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) {
                    imageView.setImageBitmap(loadedImage);
                }
            });
        }
        convertView = imageView;
        convertView.setTag(mDatas.get(position));
//        viewHolder.mImageView.setImageResource((Integer) mDatas.get(position));
        return convertView;
    }

    public void setData(List data){
        mDatas = data;
    }



    private class ViewHolder{
        ImageView mImageView;
    }
}

通过此Adapter将所需要的图片匆网络下载下来，当我们需要的时候ImageView自己去请求下载。并将数据通过setTag的方法与ImageView进行绑定

2）自定义Viewgroup

直接上代码，我们要做的事情

a.onMeasure方法测量子自己及子view

b.onLayout方法给子view进行布局

c.onTouchEvent处理触摸事件，up的时候判断是否切换下一个view，如果不是的话通过属性动画将view的状态恢复

d.绑定切换的回调

e.切换后把当前的View从viewgruop中remove掉，add一个需要加载的view，同时给当前view赋值为切换的view，保证viewgroup中不多于指定的子view个数，保证不OOM

public class DragPageView extends ViewGroup{
    private static final String TAG = "DragPageView";
    /**
     * 适配器
     */
    private DragPageViewAdapter mAdapter;
    /**
     * view的个数
     */
    private int ONE_SCREEN_COUNT = 2;
    /**
     * 屏幕的宽和高
     */
    private int mScrenWidth;
    private int mScreenHeight;
    /**
     * 子元素的宽 高
     */
    private int mChildWidth;
    private int mChildHeight;
    /**
     * 当前最后一张图片的index
     */
    private int mLastIndex;
    /**
     * 当前第一张图片的下标
     */