Android开发 自定义ViewGroup 实现微信九格图功能（图片不同排布不同） 和 一种图片点击变暗效果

一、图片点击变暗效果

      1、继承Imageview

      2、重写OnDraw方法；判断室友点击（isPressed）如果为true则canvas。drawColor（0xARGB）,经常测试如果不写透明度 就没效果；

@Override
protected void onDraw(Canvas canvas) {

    super.onDraw(canvas);
    if(isPressed()){
        canvas.drawColor(0xaaededed);
    }
}

     3、重写dispatchSetPressed方法；当点击状态发生变化时通知重绘

@Override
protected void dispatchSetPressed(boolean pressed) {
    super.dispatchSetPressed(pressed);
    invalidate();
}

二、自定义ViewGroup实现微信九格宫功能

1、自定义view的流程onMeasure（测量）-onLayout（布局）

2、获取冲父布局传入的宽度（我写的是测量方式是EXACTLY,即布局宽度要设为match_parent，否则无发正确测量）viewH,item之间的间距margin=8，将dp转为px=margin*density + 0.5f，得到一个item的宽度onceItemW

3、根据传入的数组的长度判断有几个item，特殊的有1 张，4 张和其他张，如果为一张则item的宽高都为2*onceItemW + margin,设置imageView的scletype为fill_left，如果为4张则占两行；图片数目大于一张时item的宽高都为onceItemW，主要效果看图片

4、自定义接口，接口回调为图片添加点击事件

主要代码：

1、绑定数据

public void setBitmaps(final String[] bitmaps) {
    this.bitmaps = bitmaps;
    removeAllViews();
    myList.clear();
    for (int j = 0 ; j < bitmaps.length ; j ++){
        ClickImageView imageview = new ClickImageView(getContext());
        addView(imageview);
        myList.add(imageview);
        bitmapUtils.display(imageview, bitmaps[j] , mDisplayConfig );//xUtill开源框架
        imageview.setTag(j);//设置tag，为了接口回调时候使用，判断是哪张图片
        imageview.setId(bitmaps[j].hashCode());
        imageview.setOnClickListener(onClickListener);
    }
    invalidate();
    requestLayout();

}

2、测量

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

    int modeW =  MeasureSpec.getMode(widthMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);
    if (modeW == MeasureSpec.EXACTLY){//布局的宽要设为match_parent
        onceItemH = (width - DisplayUtil.dip2px(getContext() , 2 * margin))/3;
        measureW = width;
        viewW = measureW;
    }
    if ( bitmaps == null || bitmaps.length == 0){
        setMeasuredDimension(0 , 0);
    }else{
        getItemW();
       setMeasuredDimension(viewW , viewH);
    }
}

3.判断图片个数，设置相应的item宽高

public void getItemW(){
    int length = bitmaps.length;
    if (length == 1) {
        myList.get(0).setScaleType(ImageView.ScaleType.FIT_START);
        itemH = onceItemH * 2 + DisplayUtil.dip2px(getContext() ,margin);
        itemW = onceItemH * 2 +DisplayUtil.dip2px(getContext() ,margin);
        viewH = itemH;
    } else if (length == 2 || length == 3 ) {
        itemH = onceItemH;
        itemW = itemH;
        viewH = onceItemH;

    }else if(length == 4 || length == 5 || length == 6){
        itemH = onceItemH;
        itemW = itemH;
        viewH = onceItemH * 2 + DisplayUtil.dip2px(getContext() ,margin);
    }else if(length == 7 || length == 8 || length == 9){
        itemH = onceItemH;
        itemW = itemH;
        viewH = onceItemH * 3 + DisplayUtil.dip2px(getContext() ,2 * margin);
    }
}

4、布局

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    if (bitmaps == null){
       return;
    }else {
        int length = bitmaps.length;
        if (length == 1){
            myList.get(0).layout(0 ,0 ,itemW , itemH);
        }else if(length == 2 ){
            myList.get(0).layout(0 ,0 ,itemW , itemH);
            myList.get(1).layout(itemW  + itemMargin ,0 ,itemW * 2  + itemMargin , itemH);

        }else if (length == 3 ){
            myList.get(0).layout(0 ,0 ,itemW , itemH);
            myList.get(1).layout(itemW  + itemMargin ,0 ,itemW * 2  + itemMargin , itemH);
            myList.get(2).layout(itemW * 2  + 2 * itemMargin ,0 ,itemW * 3 + 2 * itemMargin , itemH);
        }else if(length == 4 ){
            myList.get(0).layout(0 ,0 ,itemW , itemH);
            myList.get(1).layout(itemW  + itemMargin ,0 ,itemW * 2  + itemMargin , itemH);
            myList.get(2).layout(0 ,itemW  + itemMargin ,itemW , 2 * itemH + itemMargin);
            myList.get(3).layout(itemW  + itemMargin ,itemW  + itemMargin ,itemW * 2 + itemMargin , 2 * itemH + itemMargin);
        }else if(length == 5 ){
            myList.get(0).layout(0 ,0 ,itemW , itemH);
            myList.get(1).layout(itemW  + itemMargin ,0 ,itemW * 2  + itemMargin , itemH);
            myList.get(2).layout(itemW * 2  + 2 * itemMargin ,0 ,itemW * 3 + 2 * itemMargin , itemH);
            myList.get(3).layout(0 ,itemW  + itemMargin ,itemW , 2 * itemH + itemMargin);
            myList.get(4).layout(itemW  + itemMargin ,itemW  + itemMargin ,itemW * 2 + itemMargin , 2 * itemH + itemMargin);
        }else if(length == 6 ){
            myList.get(0).layout(0 ,0 ,itemW , itemH);
            myList.get(1).layout(itemW  + itemMargin ,0 ,itemW * 2  + itemMargin , itemH);
            myList.get(2).layout(itemW * 2  + 2 * itemMargin ,0 ,itemW * 3 + 2 * itemMargin , itemH);
            myList.get(3).layout(0 ,itemW  + itemMargin ,itemW , 2 * itemH + itemMargin);
            myList.get(4).layout(itemW  + itemMargin ,itemW  + itemMargin ,itemW * 2 + itemMargin , 2 * itemH + itemMargin);
            myList.get(5).layout(itemW * 2  + 2 * itemMargin ,itemW  + itemMargin ,itemW * 3 + 2 * itemMargin , 2 * itemH + itemMargin);
        }else if(length == 7 ){
            myList.get(0).layout(0 ,0 ,itemW , itemH);
            myList.get(1).layout(itemW  + itemMargin ,0 ,itemW * 2  + itemMargin , itemH);
            myList.get(2).layout(itemW * 2  + 2 * itemMargin ,0 ,itemW * 3 + 2 * itemMargin , itemH);
            myList.get(3).layout(0 ,itemW  + itemMargin ,itemW , 2 * itemH + itemMargin);
            myList.get(4).layout(itemW  + itemMargin ,itemW  + itemMargin ,itemW * 2 + itemMargin , 2 * itemH + itemMargin);
            myList.get(5).layout(itemW * 2  + 2 * itemMargin ,itemW  + itemMargin ,itemW * 3 + 2 * itemMargin , 2 * itemH + itemMargin);
            myList.get(6).layout(0 ,itemW *2   + 2 * itemMargin ,itemW , 3 * itemH + 2 * itemMargin);
        }else if(length == 8 ){
            myList.get(0).layout(0 ,0 ,itemW , itemH);
            myList.get(1).layout(itemW  + itemMargin ,0 ,itemW * 2  + itemMargin , itemH);
            myList.get(2).layout(itemW * 2  + 2 * itemMargin ,0 ,itemW * 3 + 2 * itemMargin , itemH);
            myList.get(3).layout(0 ,itemW  + itemMargin ,itemW , 2 * itemH + itemMargin);
            myList.get(4).layout(itemW  + itemMargin ,itemW  + itemMargin ,itemW * 2 + itemMargin , 2 * itemH + itemMargin);
            myList.get(5).layout(itemW * 2  + 2 * itemMargin ,itemW  + itemMargin ,itemW * 3 + 2 * itemMargin , 2 * itemH + 2 * itemMargin);
            myList.get(6).layout(0 ,itemW *2   + 2 * itemMargin ,itemW , 3 * itemH + 2 * itemMargin);
            myList.get(7).layout(itemW  + itemMargin ,itemW * 2  + 2 * itemMargin ,itemW * 2 + itemMargin , 3 * itemH +  2 * itemMargin);
        }else if(length == 9 ){
            myList.get(0).layout(0 ,0 ,itemW , itemH);
            myList.get(1).layout(itemW  + itemMargin ,0 ,itemW * 2  + itemMargin , itemH);
            myList.get(2).layout(itemW * 2  + 2 * itemMargin ,0 ,itemW * 3 + 2 * itemMargin , itemH);
            myList.get(3).layout(0 ,itemW  + itemMargin ,itemW , 2 * itemH + itemMargin);
            myList.get(4).layout(itemW  + itemMargin ,itemW  + itemMargin ,itemW * 2 + itemMargin , 2 * itemH + itemMargin);
            myList.get(5).layout(itemW * 2  + 2 * itemMargin ,itemW  + itemMargin ,itemW * 3 + 2 * itemMargin , 2 * itemH + itemMargin);
            myList.get(6).layout(0 ,itemW *2   + 2 * itemMargin ,itemW , 3 * itemH + 2 * itemMargin);
            myList.get(7).layout(itemW  + itemMargin ,itemW * 2  + 2 * itemMargin ,itemW * 2 + itemMargin , 3 * itemH + 2 * itemMargin);
            myList.get(8).layout(itemW * 2  + 2 * itemMargin ,itemW * 2  + 2 * itemMargin ,itemW * 3 + 2 * itemMargin , 3 * itemH + 2 * itemMargin);
        }


    }

5、接口回调

 private OnClickListener onClickListener = new OnClickListener() {
    @Override
    public void onClick(View v) {
        if (onImageViewItemOnClickListener != null){
            onImageViewItemOnClickListener.onImageViewItemOnClick(v , (Integer) v.getTag());
        }
    }
};
    private OnImageViewItemOnClickListener onImageViewItemOnClickListener;
    public void setOnImageViewItemOnClickListener(OnImageViewItemOnClickListener onImageViewItemOnClickListener){
        this.onImageViewItemOnClickListener = onImageViewItemOnClickListener;
    }
    public interface OnImageViewItemOnClickListener{
        void onImageViewItemOnClick(View view , int position);
    }