Android实现电影院选座效果
程序员文章站
2022-06-23 15:05:12
本文实例为大家分享了android实现电影院选座效果展示的具体代码,供大家参考,具体内容如下
这是一个简单的电影院选座效果,实现该效果大致分为三步:
1.自...
本文实例为大家分享了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实现电影院选座效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Mac系统下安装Nevicat连接MySQL的操作教程
下一篇: Android自定义实现可滑动按钮