Android实现电影院选座效果

本文实例为大家分享了android实现电影院选座效果展示的具体代码，供大家参考，具体内容如下

这是一个简单的电影院选座效果，实现该效果大致分为三步：

1.自定义view进行绘制；
2.手势缩放效果的实现；
3.手势触摸被选和未被选效果的实现；

先来看第一步，效果的绘制；

public class moveseatview extends view {
 private final boolean dbg = false;
 private paint paint = new paint();
 private matrix matrix = new matrix();
 private matrix tempmatrix = new matrix();
 //座位水平间距
 private int spacing;
 //座位垂直间距
 private int verspacing;
 //行号宽度
 private int numberwidth;
 //行数
 private int row;
 //列数
 private int column;
 //可选座位的图片
 private bitmap seatbitmap;
 //选中时座位的图片
 private bitmap checkedseatbitmap;
 private int lastx;
 private int lasty;
 //整个座位图的宽度
 private int seatbitmapwidth;
 private int seatbitmapheight;
 private float screenheight;
 //屏幕的最小宽度
 private int defaultscreenwidth;
 //标识是否正在缩放
 private boolean isscaling;
 private float scalex, scaley;
 //是否是第一次缩放
 private boolean firstscale = true;
 private boolean isonclick;
 private int downx, downy;
 private boolean pointer;
 //用于存储已经选在好的座位
 public arraylist<point> list;
 /**
  * 默认的座位图片的宽度，如果使用的自己的座位的图片比这个尺寸大或者小，会缩放到这个大小
  */
 private float defaultimgw = 40;
 private float defaultimgh = 34;
 /**
  * 座位图片的宽度
  */
 private int seatwidth = 40;
 /**
  * 座位图片的高度
  */
 private int seatheight = 34;
 private float zoom;
 float xscalel = 1;
 float yscalel = 1;
 
 public moveseatview(context context) {
  this(context, null);
 }
 
 public moveseatview(context context, attributeset attrs) {
  this(context, attrs, 0);
 }
 
 public moveseatview(context context, attributeset attrs, int defstyleattr) {
  super(context, attrs, defstyleattr);
 
 }
 
 private void init() {
  spacing = (int) dip2px(5);
  verspacing = (int) dip2px(10);
  defaultscreenwidth = (int) dip2px(80);
  seatbitmap = bitmapfactory.decoderesource(getresources(), r.drawable.seat_default);
  xscalel = defaultimgw / seatbitmap.getwidth();
  yscalel = defaultimgh / seatbitmap.getheight();
  checkedseatbitmap = bitmapfactory.decoderesource(getresources(), r.drawable.seat_green);
  seatbitmapwidth = (int) (column * seatbitmap.getwidth() * xscalel + (column - 1) * spacing);
  seatbitmapheight = (int) (row * seatbitmap.getheight() * yscalel + (row - 1) * verspacing);
  paint.setcolor(color.red);
  numberwidth = (int) dip2px(20);
  screenheight = dip2px(20);
  list = new arraylist<>();
  matrix.posttranslate(numberwidth + spacing, screenheight + 1 + verspacing);
 }
}

上面这些都是一些初始化动作，接下来在ondraw方法中进行绘制；

@override
 protected void ondraw(canvas canvas) {
  if (row <= 0 || column <= 0) {
   return;
  }
  drawseat(canvas);
  super.ondraw(canvas);
 }

具体的绘制逻辑实在drawseat(),方法中实现的；

/**
  * 绘制
  *
  * @param canvas
  */
 private void drawseat(canvas canvas) {
  zoom = getmatrixscalex();
  float translatex = gettranslatex();
  float translatey = gettranslatey();
  float scalex = zoom;
  float scaley = zoom;
  for (int i = 0; i < row; i++) {
   float top = i * seatbitmap.getheight() * yscalel * scaley + i * verspacing * scaley + translatey;
   float bottom = top + seatbitmap.getheight() * yscalel * scaley;
   for (int j = 0; j < column; j++) {
    float left = j * seatbitmap.getwidth() * xscalel * scalex + j * spacing * xscalel * scalex + translatex;
    float right = left + seatbitmap.getwidth() * xscalel * scalex;
    tempmatrix.settranslate(left, top);
    tempmatrix.postscale(xscalel, yscalel, left, top);
    tempmatrix.postscale(scalex, scaley, left, top);
    if (ishave(i, j)) {
     //绘制被选
     canvas.drawbitmap(checkedseatbitmap, tempmatrix, paint);
     //绘制文字
     drawtext(canvas, i, j, top, left);
    } else {
     //绘制普通
     canvas.drawbitmap(seatbitmap, tempmatrix, paint);
    }
   }
  }
 }

主要是计算绘制的位置，矩阵的缩放，根据是否被选进行绘制不同的效果；

/**
  * 绘制文字
  *
  * @param canvas
  * @param row
  * @param column
  * @param top
  * @param left
  */
 private void drawtext(canvas canvas, int row, int column, float top, float left) {
  string txt = (row + 1) + "排";
  string txt1 = (column + 1) + "座";
  //实例化文字画笔
  textpaint txtpaint = new textpaint(paint.anti_alias_flag);
  txtpaint.setcolor(color.white);
  //设置字体样式
  txtpaint.settypeface(typeface.default_bold);
  float seatheight = this.seatheight * getmatrixscalex();
  float seatwidth = this.seatwidth * getmatrixscalex();
  txtpaint.settextsize(seatheight / 3);
  //获取中间线
  float center = seatheight / 2;
  float txtwidth = txtpaint.measuretext(txt);
  float startx = left + seatwidth / 2 - txtwidth / 2;
  //只绘制一行文字
  if (txt1 == null) {
   canvas.drawtext(txt, startx, getbaseline(txtpaint, top, top + seatheight), txtpaint);
  } else {
   canvas.drawtext(txt, startx, getbaseline(txtpaint, top, top + center), txtpaint);
   canvas.drawtext(txt1, startx, getbaseline(txtpaint, top + center, top + center + seatheight / 2), txtpaint);
  }
  if (dbg) {
   log.d("drawtest", "top" + top);
 
  }
 }

这里是使用textpaint画笔进行文字的绘制，在绘制文字的时候要注意基准线；

/**
  * 获取基准线
  * @param p
  * @param top
  * @param bottom
  * @return
  */
 private float getbaseline(paint p, float top, float bottom) {
  paint.fontmetrics fontmetrics = p.getfontmetrics();
  int baseline = (int) ((bottom + top - fontmetrics.bottom - fontmetrics.top) / 2);
  return baseline;
 }

这样大致的绘制做完成了，剩下的第二步和第三步都涉及到手势触摸，在ontouchevent方法中去实现具体的逻辑；

@override
 public boolean ontouchevent(motionevent event) {
  int x = (int) event.getx();
  int y = (int) event.gety();
  //手势缩放
  scaleguesturedetector.ontouchevent(event);
  //手势
  gesturedetector.ontouchevent(event);
  //获取当前操作的手指数量
  int pointercount = event.getpointercount();
  if (pointercount > 1) {
   //多手指操作
   pointer = true;
  }
  switch (event.getaction()) {
   case motionevent.action_down:
    pointer = false;
    downx = x;
    downy = y;
    invalidate();
    break;
   case motionevent.action_up:
    autoscale();
    break;
   case motionevent.action_move:
    if (!isscaling && !isonclick) {
     int downdx = math.abs(x - downx);
     int downdy = math.abs(y - downy);
     if ((downdx > 10 || downdy > 10) && !pointer) {
      int dx = x - lastx;
      int dy = y - lasty;
      matrix.posttranslate(dx, dy);
      invalidate();
     }
    }
    lastx = x;
    lasty = y;
    isonclick = false;
    break;
  }
  return true;
 }

刚触摸去选择的时候会有个手势缩放的效果，手势缩放系统提供了scalegesturedetector类可以很容易的实现，具体的逻辑系统都已经处理好了，在对应的回调方法里面去实现就可以了；

/**
  * 手势缩放
  */
 scalegesturedetector scaleguesturedetector = new scalegesturedetector(getcontext(), new scalegesturedetector.onscalegesturelistener() {
  @override
  public boolean onscale(scalegesturedetector detector) {
   //正在缩放的时候回调
   isscaling = true;
   float scalefactor = detector.getscalefactor();
   if (getmatrixscaley() * scalefactor > 3) {
    scalefactor = 3 / getmatrixscaley();
   }
   if (firstscale) {
    scalex = detector.getcurrentspanx();
    scaley = detector.getcurrentspany();
    firstscale = false;
   }
   if (getmatrixscaley() * scalefactor < 0.5) {
    scalefactor = 0.5f * getmatrixscaley();
   }
   matrix.postscale(scalefactor, scalefactor, scalex, scaley);
   invalidate();
   return true;
  }
 
  @override
  public boolean onscalebegin(scalegesturedetector detector) {
   //开始缩放的时候回调
   return false;
  }
 
  @override
  public void onscaleend(scalegesturedetector detector) {
   //缩放完成回调
   isscaling = false;
   firstscale = true;
 
  }
 });

其他的手势操作系统还提供了gesturedetector类，可以使用gesturedetector来实现具体的效果；

gesturedetector gesturedetector = new gesturedetector(getcontext(), new gesturedetector.simpleongesturelistener() {
  @override
  public boolean onsingletapconfirmed(motionevent e) {
   int x = (int) e.getx();
   int y = (int) e.gety();
   for (int i = 0; i < row; i++) {
    for (int j = 0; j < column; j++) {
     int tempx = (int) ((j * seatwidth + j * spacing) * getmatrixscalex() + gettranslatex());
     int maxtempx = (int) (tempx + seatwidth * getmatrixscalex());
     int tempy = (int) ((seatheight * i + i * verspacing) * getmatrixscaley() + gettranslatey());
     int maxtempy = (int) (tempy + seatheight * getmatrixscaley());
     if (x >= tempx && x <= maxtempx && y >= tempy && y <= maxtempy) {
      if (ishave(i, j)) {
       remove(i, j);
      } else {
       list.add(new point(i, j));
      }
     }
    }
   }
   float currentscaley = getmatrixscaley();
   if (currentscaley < 1.7) {
    scalex = x;
    scaley = y;
    zoomanimate(currentscaley, 1.9f);
   }
   invalidate();
   return true;
  }
 });

完成上面三步，效果也就大致实现了，提供外部设置的方法供调用就可以了；

/**
  * 对外界提供的设置方法
  * @param row
  * @param column
  */
 public void setdata(int row, int column) {
  this.row = row;
  this.column = column;
  init();
  invalidate();
 }

源码地址：android实现电影院选座效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。