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);
    }