座位雷达

<div class="iteye-blog-content-contain" style="font-size: 14px">

       由于涉及到工作内容保密的问题，所以无法提供源码，只能提供涉及该项功能的实现，本着开源和互相学习以及以后相同功能的重复利用的目的。

GridView虽然也支持横向滚动，但是并不支持代码控制，所以还是用到一个横向滚动来代替这个功能

<HorizontalScrollView
            android:id="@+id/hs_gridview"
            android:layout_width="610dp"
            android:layout_height="750dp"
            android:layout_weight="1"
            android:fillViewport="true"
            android:scrollbars="horizontal" >

            <LinearLayout
                android:layout_width="610dp"
                android:layout_height="490dp" >

                <cn.com.bcl.infoissuingsys.common.CommonGridView
                    android:id="@+id/gridView"
                    android:layout_width="1200dp"
                    android:layout_height="490dp"
                    android:layout_margin="0dp"
                    android:horizontalSpacing="20dp"
                    android:listSelector="@android:color/transparent"
                    android:numColumns="20"
                    android:scrollbarStyle="outsideInset"
                    android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"
                    android:scrollbarTrackVertical="@drawable/scrollbar_vertical_track"
                    android:scrollbars="vertical"
                    android:stretchMode="columnWidth"
                    android:verticalSpacing="5dp" />
            </LinearLayout>
        </HorizontalScrollView>

每个gridview的Item布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <cn.com.bcl.infoissuingsys.common.CommonImageView 
        android:id="@+id/zuoweiimage"
        android:layout_width="40dp"
        android:layout_height="35dp"
        android:scaleType="fitXY"
        android:src="@drawable/keyixuan"/>
    <cn.com.bcl.infoissuingsys.common.CommonTextView 
        android:id="@+id/zuoweihao"
        android:layout_width="40dp"
        android:layout_height="35dp"
        android:textColor="#000000"
        android:textSize="15dp"
        android:text="01"
        android:gravity="center"/>
</RelativeLayout>

绘制背景图片

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.PorterDuff.Mode;
import android.view.SurfaceHolder;
import android.view.SurfaceHolder.Callback;
import android.view.SurfaceView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.LinearLayout.LayoutParams;

public class RadarBgView extends SurfaceView implements SurfaceHolder.Callback {
    
    private String TAG  = "RadarView";
    private SurfaceHolder mHolder;
    
    private Context mCnxt;
    
    private int mSeatWidth = 410;
    
    private int mSeatHeight = 220;
    
    private int mStartSeatTop = 40;
    
    private int mLine = 0;
    
    private int mColumn=0;
    
    private int mLineNoWidth = 20;

    public RadarBgView(Context context) {
        super(context);
    }
    
    public RadarBgView(Context context,int line,int column) {
        super(context);
        this.mLine = line;
        this.mColumn = column;
        mCnxt = context;
        mHolder=this.getHolder();
        mHolder.addCallback(this);
        setZOrderOnTop(true);
        mHolder.setFormat(PixelFormat.TRANSLUCENT);
        setFocusable(false);
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {
        
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        drawBg(mLine,mColumn);
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }
    
    /** change background */
    public void notifyBgChange(){
        
    }
    
    /**draw background by seat */
    public void drawBg(int line,int column){
        Paint paint=new Paint();
//        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        
        int divider = 1;
        /** onriginal 图片 */
        Bitmap originalSeatBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.small);
        int originalWidth = originalSeatBitmap.getWidth();
        int originalHeight = originalSeatBitmap.getHeight();
        /** 新的高度和宽度 */
        float newWidth = (mSeatWidth-mLineNoWidth-divider*(column-1))/column;
        float newHeight = (mSeatHeight-divider*(line-1))/line;
        /** 计算缩放比例 */
        float scaleWidth = newWidth/originalWidth;
        float scaleHeight = newHeight/originalHeight;
        /**取得要缩放的参数 */
        Matrix matrix = new Matrix();
        matrix.postScale(scaleWidth, scaleHeight);
        /** 生成新图片 */
        Bitmap newBm = Bitmap.createBitmap(originalSeatBitmap, 0, 0, originalWidth, originalHeight,matrix,true);
        originalSeatBitmap.recycle();
        originalSeatBitmap = null;
        

        Paint testP=new Paint();
//      paint.setColor(Color.BLACK);
        testP.setAntiAlias(true);
        testP.setTextSize(5);
        
        Canvas canvas = null;
        try {
            canvas = mHolder.lockCanvas();
            synchronized (mHolder) {
                int offsetY = mStartSeatTop;
                for (int i = 0; i < line; i++) {
                    canvas.drawText(String.valueOf(i+1), 6, offsetY+newBm.getHeight(), testP);
                    int offsetX = mLineNoWidth;
                    for (int j = 0; j < column; j++) {
                        canvas.drawBitmap(newBm, offsetX, offsetY, paint);
                        offsetX+=(newBm.getWidth()+divider);
                    }
                    offsetX=0;
                    offsetY+=(newBm.getHeight()+divider);
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (canvas != null) {
                mHolder.unlockCanvasAndPost(canvas);
            }
        }
    }
}

绘制雷达区域的座位表和选择区域，实现点击事件，同步实际ScrollView和GridView的同步

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

public class RadarAreaView extends SurfaceView implements
        SurfaceHolder.Callback {

    private String TAG = "RadarAreaView";
    private SurfaceHolder mHolder;
    private Handler mHandler;
    /** gridView 的 显示区域宽高 */
    private int mDisplayWidth = 630;
    private int mDisplayHeight = 490;
    /** gridView real 高宽 */
    private int mWholeWidth;
    private int mWholeHeight;
    /** 雷达座位区域长宽 */
    private int mRadarSeatWidth = 410;
    private int mRadarSeatHeight = 260;
    /** 显示区域偏移量 */
    private int mOffsetX = 0;
    private int mOffsetY = 40;
    /** 座位行列数 */
    private int mLineNum = 0;
    private int mColumnNum = 0;
    /** radar和gridView的长高缩放比例 */
    private float mScaleX;
    private float mScaleY;
    
    private int mLineNoWidth = 20;
    
    private int mStartSeatTop = 40;

    Bitmap mAreaBm = null;
    

    public RadarAreaView(Context context) {
        super(context);
    }

    public RadarAreaView(Context context, int line, int column,Handler handler) {
        super(context);
        mHolder = this.getHolder();
        mHolder.addCallback(this);
        setZOrderOnTop(true);
        mHolder.setFormat(PixelFormat.TRANSLUCENT);
        this.mLineNum = line;
        this.mColumnNum = column;
        this.mHandler = handler;
        setFocusable(false);
        /** 初始化可视区域的图片大小 */
        initAreaBm();
        /** 雷达View与实际 View 的长宽比例 */
        mScaleX = ((float)(mRadarSeatWidth-mLineNoWidth))/mWholeWidth;
        mScaleY = ((float)(mRadarSeatHeight-mStartSeatTop)/mWholeHeight);
    }

    /**
     * 根据实际比例初始化选择区域框的的图片大小
     */
    private void initAreaBm() {
        Bitmap originalBm = BitmapFactory.decodeResource(getResources(),
                R.drawable.area);
        int originalWidth = originalBm.getWidth();
        int originalHeight = originalBm.getHeight();

        int dividerX = 20;
        int dividerY = 5;
        /** original 图片 */
        mWholeWidth = 40 * mColumnNum + dividerX * (mColumnNum - 1);
        mWholeHeight = 35 * mLineNum + dividerY * (mLineNum - 1);
        /** 计算缩放比例 */
        float scaleWidth = ((float)mDisplayWidth) / mWholeWidth;
        float scaleHeight = ((float)mDisplayHeight) / mWholeHeight;
        /** 计算Area宽缩放后的长宽 */
        float newAreaWidth = (mRadarSeatWidth-mLineNoWidth)*scaleWidth;
        float newAreaHeight = (mRadarSeatHeight-mStartSeatTop)*scaleHeight;
        /** 计算缩放比例 */
        float newScaleWidth = newAreaWidth/originalWidth;
        float newScaleHeight = newAreaHeight/originalHeight;
        /**取得要缩放的参数 */
        Matrix matrix = new Matrix();
        matrix.postScale(newScaleWidth, newScaleHeight);
        /** 生成新图片 */
        mAreaBm = Bitmap.createBitmap(originalBm, 0, 0, originalWidth,
                originalHeight, matrix, true);
        originalBm.recycle();
        originalBm = null;
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width,
            int height) {
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
            drawArea();
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }

    /** clear && refresh Area by offsetX & offset Y */
    public void drawArea() {
        Paint paint = new Paint();
        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        
        Paint clearP = new Paint();
        clearP.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

        Canvas canvas = null;
        try {
            canvas = mHolder.lockCanvas();
            synchronized (mHolder) {
                canvas.drawPaint(clearP);
                canvas.drawBitmap(mAreaBm, mOffsetX, mOffsetY, null);
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (canvas != null) {
                mHolder.unlockCanvasAndPost(canvas);
            }
        }
    }
    
    /** 点击雷达区域时，同步GridView显示的位置 */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        final float x = event.getX();
        final float y = event.getY();
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            /**caculate scroll */
            /**雷达区域每个item的宽高 */
            float xItemSize = (mRadarSeatWidth-mLineNoWidth)/mColumnNum;
            float yItemSize = (mRadarSeatHeight-mStartSeatTop)/mLineNum;
            int cornerX = 0;
            int cornerY = 0;
            /** 图像是左上角开始画的，所以为了让方框居于点击位置的中心，进行了偏移计算 */
            cornerX=(int) (x-mAreaBm.getWidth()/2);
            cornerY=(int) (y-mAreaBm.getHeight()/2);
            int offsetX = 0;
            int offsetY = 0;
            /** 对于超出座位图的点击事件进行处理 */
            if (cornerX<=mLineNoWidth) {
                offsetX = 0;
            } else if(cornerX>=(mRadarSeatWidth-mAreaBm.getWidth())){
                offsetX = (int) ((mRadarSeatWidth-mLineNoWidth-mAreaBm.getWidth()));
            }else{
                offsetX = (int) ((cornerX-mLineNoWidth));
            }
            if (cornerY<=mStartSeatTop) {
                offsetY = 0;
            } else if(cornerY>=(mRadarSeatHeight-mAreaBm.getHeight())){
                offsetY = (int) ((mRadarSeatHeight-mStartSeatTop-mAreaBm.getHeight()));
            }else{
                offsetY = (int) ((cornerY-mStartSeatTop));
            }
            int scrollX = (int) (offsetX/mScaleX);
            int position =(int) ((int)(offsetY/yItemSize)*mColumnNum+(int)(offsetX/xItemSize));
            /** scroll seat gridView */
            /** 从View发消息给Activity同步实际View的滚动 */
            Message msg = new Message();
            Bundle bundle = new Bundle();
            bundle.putInt("scrollX", scrollX);
            bundle.putInt("position", position);
            bundle.putInt("linePosition", (int)(offsetY/yItemSize));
            msg.setData(bundle);
            mHandler.sendMessage(msg); 
            /**caculate and draw Area */
            /** 根据点击位置和计算的左上角位置重绘选择区域 */
            if (cornerX<=mLineNoWidth) {
                mOffsetX = mLineNoWidth;
            } else if(cornerX>=(mRadarSeatWidth-mAreaBm.getWidth())){
                mOffsetX = (int) ((mRadarSeatWidth-mAreaBm.getWidth()));
            }else{
                mOffsetX =(int) cornerX;
            }
            if (cornerY<=mStartSeatTop) {
                mOffsetY = mStartSeatTop;
            } else if(cornerY>=(mRadarSeatHeight-mAreaBm.getHeight())){
                mOffsetY = (int) ((mRadarSeatHeight-mAreaBm.getHeight()));
            }else{
                mOffsetY = (int) cornerY;
            }
            drawArea();
            break;

        default:
            break;
        }
        return true;
    }
    
    /**GridView滚动时传入当前第一个可见的position 控制雷达的垂直方向的滚动同步 */
    public void scrollVertical(int position){
        float yItemSize = (mRadarSeatHeight-mStartSeatTop)/mLineNum;
        mOffsetY= (int) ((position/mColumnNum) * yItemSize)+mStartSeatTop;
        drawArea();
    }
    
    /** 通过传入的HorizantalScrollView的move offset来控制雷达的水平方向的滚动同步 */
    public void scrollHorizontal(int originalX){
        mOffsetX =mLineNoWidth + (int)(originalX*mScaleX);
        drawArea();
    }
}

Fragment或者Activity中局部代码

    /**
     * GridView
     */
    private GridView mGridView;
    /**
     * HorizontalScrollView
     */
    private HorizontalScrollView mHsGridView;  
    private RelativeLayout mRelativeLayout_radar;
    private RadarAreaView mRav;
    private RadarBgView mRbv;

mRbv = new RadarBgView(mContext,mNumLine,mNumColumns);
        mRav = new RadarAreaView(mContext,mNumLine,mNumColumns,radarHandler);
        mRelativeLayout_radar.addView(mRbv);
        mRelativeLayout_radar.addView(mRav);
 /** 控制垂直滚动 */
 mGridView.setOnScrollListener(new OnScrollListener() {
            
            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {
                
            }
            
            @Override
            public void onScroll(final AbsListView view, int firstVisibleItem,
                    int visibleItemCount, int totalItemCount) {
                    View v = view.getChildAt(view.getFirstVisiblePosition()/mNumColumns);
                    int[] location = new int[2];
                    if(null!=v){
                        v.getLocationOnScreen(location);
                        if (mIsInitDefault) {
                            mDefaultLocation = location[1];
                            mIsInitDefault = false;
                        }
                        mRav.scrollVertical(view.getFirstVisiblePosition());
                    }
            }
        });
/** HorizontalScrollView控制横向滚动同步 */
 mHsGridView.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    break;
                case MotionEvent.ACTION_MOVE:
                    int offsetX = mHsGridView.getScrollX();
                    mRav.scrollHorizontal(offsetX);
                    break;

                default:
                    break;
                }
                return false;
            }
        });

从雷达区域来的消息处理，同步实际GridView的滚动

private Handler radarHandler = new Handler(){
        public void handleMessage(Message msg) {
            Bundle bundle = msg.getData();
            final int position = bundle.getInt("position");
            final int linePosition = bundle.getInt("linePosition");
            final int scrollX = bundle.getInt("scrollX");
            mGridView.post(new Runnable() {
                
                @Override
                public void run() {
                    mHsGridView.scrollTo(scrollX, (int) mGridView.getY());
                    mGridView.setSelection(position);
                }
            });
        };
    };

给自己mark一下

</div>