欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android实现电影院选座效果

程序员文章站 2022-06-23 15:05:12
本文实例为大家分享了android实现电影院选座效果展示的具体代码,供大家参考,具体内容如下 这是一个简单的电影院选座效果,实现该效果大致分为三步: 1.自...

本文实例为大家分享了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实现电影院选座效果

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