Android,시 크 한 영화 표 만 들 기 온라인 좌석 선택 app 온라인 좌석 선택 기능
12526 단어 android온라인좌석 을 선택 하 다
효과 분석:
전체 컨트롤 은 좌석 그림 영역,좌석 미리 보기 그림 영역,줄 번호 영역,화면 영역 으로 나 뉜 다.
1.좌석 도 는 자 유 롭 게 이동 할 수 있 고 확대 축소 이동 후 자동 으로 적당 한 위치 로 되 돌아 가 며 선택 한 좌석 은 자동 으로 적당 한 비율 로 확 대 됩 니 다.
2.줄 번호 부분 은 좌석도 의 크기 조정 과 상하 이동,화면 영역 은 좌석도 의 좌우 이동 에 따라 크기 를 조정 합 니 다.
3.손가락 을 눌 렀 을 때 미리 보기 그림 이 나타 납 니 다.미리 보기 그림 에 빨간색 사각형 이 있 습 니 다.현재 볼 수 있 는 영역 을 표시 하고 미리 보기 그림 을 따라 이동 합 니 다.
관련 된 지식 포인트:
view 의 그리 기 원리,사건 분배 메커니즘 등 은 말 하지 않 겠 습 니 다.이것들 은 기초 입 니 다.여 기 는 소개 할 생각 이 없습니다.인터넷 에는 이 방면 의 자료 가 매우 많 습 니 다.
1.매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스 매트릭스
2.신축성 이동,신축성 확대.
3.제스처 감청 의 사용 은 Gesture Detector,Scale Gesture Detector 를 통 해 크기 조정 비례 폭 을 얻 을 수 있 습 니 다.
인 코딩 구현
다음 과 같은 몇 가지 핵심 부분 을 통 해 소개 하면 다른 부분 은 모두 비슷 한 사고 로 이 루어 진다.
1.좌석 도 그리 기
2.좌석도 의 크기 조정 과 이동
3.좌석 도 자동 재생,자동 크기 조정
4.미리 보기 그림 부분의 그리 기 실현
다른 부분,예 를 들 어 영화관 스크린,왼쪽 줄 번호 부분의 사고방식 은 좌석 도 실현 사고방식 과 일치한다.
1.좌석 도 그리 기
좌석 도 는 실제 적 으로 2 차원 행렬 로 줄 수 와 열 수가 있 습 니 다.우 리 는 줄 수 와 열 수 에 따라 일정한 간격 을 더 해서 그리 면 됩 니 다.
void drawSeat() {
for (int i = 0; i < row; i++) {
for (int j = 0; j < column; j++) {
int left = j * seatBitmap.getWidth() + j * spacing;
int top = i * seatBitmap.getHeight() + i * verSpacing;
int seatType = getSeatType(i, j);
switch (seatType) {
case SEAT_TYPE_AVAILABLE:
seatCanvas.drawBitmap(seatBitmap, left, top, paint);
break;
case SEAT_TYPE_NOT_AVAILABLE:
break;
case SEAT_TYPE_SELECTED:
seatCanvas.drawBitmap(checkedSeatBitmap, left, top, paint);
break;
case SEAT_TYPE_SOLD:
seatCanvas.drawBitmap(seatSoldBitmap, left, top, paint);
break;
}
}
}
isNeedDrawSeatBitmap = false;
}2.좌석도 의 크기 조정 과 이동
이동 크기 조정 기능 은 Matirx 를 사용 하여 이 루어 집 니 다.Matrix 는 안 드 로 이 드 에서 그림 의 크기 조정,이동,회전 등 변환 을 할 수 있 습 니 다.
matrix 자 체 는 3*3 의 행렬 이 고 행렬 의 모든 값 은 하나의 변환 속성 을 대표 합 니 다.다음 과 같 습 니 다.
MSCALE_X MSKEW_X MTRANS_X
MSKEW_Y MSCALE_Y MTRANS_Y
MPERSP_0 MPERSP_1 MPERSP_2
float[] value=new float[9]; value[0]는 크기 조정 x 값 을 표시 합 니 다.
value[1]는 비스듬히 자 른 x 값 을 나타 낸다.
value[2]는 x 축 에서 이동 하 는 값 을 나타 낸다.
value[3]는 비스듬히 자 른 y 값 을 나타 낸다.
value[4]가 표시 하 는 y 축의 크기 조정 비율
value[5]는 y 축의 이동 값 을 나타 낸다.
Matrix 클래스 는 이 값 을 바 꿀 수 있 는 방법 이 있 습 니 다.
setScale(float sx,float sy,float px,float py):x 축 과 y 주의 크기 조정 비율 을 설정 하고 px,py 는 크기 조정 중심 점 을 표시 합 니 다.
setTranslate(float dx,float dy):x 축 과 y 주 상의 오프셋 을 설정 합 니 다.
이에 대응 하 는 두 가지 방법 이 있다.
postScale(float sx, float sy, float px, float py)
postTranslate(float dx, float dy) 이상 은 Matrix 의 사용 방법 입 니 다.Canvas 대상 은 drawBitmap 방법 으로 matrix 를 받 을 수 있 습 니 다.그림 을 그 릴 때 matrix 를 사용 하여 변환 할 수 있 습 니 다.
좌석 도 이동 크기 조정 실현 방향:
좌석 도 크기 조정 이동 을 위해 서 두 가지 일 을 해 야 합 니 다.
1.이동 하 는 값 을 가 져 오고 축소 하 는 비율 을 확대 합 니 다.
onTouchEvent 방법 을 다시 써 서 이동 하 는 x 값 과 y 값 을 계산 합 니 다.
Scale Gesture Detector 라 는 종 류 를 사용 하여 확대 축소 비율 을 가 져 옵 니 다.아주 간단 합 니 다.Scale Gesture Detector 의 대상 을 만 든 다음 onTouchEvent 방법 에서 Scale Gesture Detector.onTouchEvent(event)를 호출 합 니 다....하면 된다
2.가 져 온 값 에 따라 좌석 도 를 이동 하고 크기 조정 합 니 다.
이동 하 는 값 과 크기 조정 비율 을 가 져 온 후,matrix.postScale(x,y)과 matrix.postTrans(x,y)를 사용 하여 대응 하 는 변환 을 하면 됩 니 다.view 를 호출 하 는 invalidate 방법 을 바 꾸 어 view 가 matrix 를 다시 그리 면 유효 합 니 다.
다음은 핵심 코드 만 열거 하고 논 리 를 줄 였 습 니 다.전체 코드 는 github 에서 보십시오.
ScaleGestureDetector scaleGestureDetector = new ScaleGestureDetector(getContext(), new ScaleGestureDetector.OnScaleGestureListener() {
@Override
public boolean onScale(ScaleGestureDetector detector) {
float scaleFactor = detector.getScaleFactor();
matrix.postScale(scaleFactor, scaleFactor, scaleX, scaleY);
invalidate();
return true;
}
});
@Override
public boolean onTouchEvent(MotionEvent event) {
int y = (int) event.getY();
int x = (int) event.getX();
scaleGestureDetector.onTouchEvent(event);
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = x;
downY = y;
break;
case MotionEvent.ACTION_MOVE:
int downDX = Math.abs(x - downX);
int downDY = Math.abs(y - downY);
if (downDX > 10 || downDY > 10) {
int dx = x - lastX;
int dy = y - lastY;
matrix.postTranslate(dx, dy);
invalidate();
}
break;
case MotionEvent.ACTION_UP:
....
break;
}
lastY = y;
lastX = x;
return true;
}
@Override
protected void onDraw(Canvas canvas) {
.....
canvas.drawBitmap(seat, matrix, paint);
.....
}왜 자동 으로 튕 겨 야 합 니까?왜냐하면 당신 이 조작 할 때 좌석 도 를 화면 밖으로 옮 길 수 있 기 때 문 입 니 다.크기 를 조정 할 때 그림 을 비교적 작 게 조정 하거나 비교적 크게 조정 할 수 있 기 때 문 입 니 다.이 때 프로그램 은 계산 을 통 해 비교적 적합 한 위치 로 자동 으로 이동 할 수 있 고 적당 한 크기 를 줄 일 수 있 습 니 다.이렇게 하면 좋 은 사용 체험 을 할 수 있다.
자동 리 턴 실현 의 사고:
저희 가 손가락 화면 을 움 직 이 고 들 면 MotionEvent.ACTION 이 울 려 요.UP 이벤트,이 때 우 리 는 matrix 대상 을 통 해 현재 이동 하 는 위 치 를 얻 을 수 있 습 니 다.현재 이동 하 는 값 이 우리 의 규칙 에 부합 되 지 않 으 면 좌석 도 를 규칙 에 따라 지정 한 위치 로 이동 합 니 다.
이동 규칙 은 다음 과 같다.
좌석 도 전체 크기 가 컨트롤 크기 를 초과 하지 않 을 때:
왼쪽으로 미 끄 러 지면 자동 으로 줄 번호 오른쪽으로 되 돌아 갑 니 다.
오른쪽으로 미 끄 러 지면 자동 으로 오른쪽으로 되 돌아 갑 니 다.
위로,아래로 미 끄 러 지면 자동 으로 상단 으로 튕 겨 집 니 다.
좌석 도 전체 크기 가 컨트롤 크기 를 초과 할 때:
왼쪽으로 미 끄 러 지고 맨 오른쪽 으로 튕 기 고 오른쪽 으로 미 끄 러 지 며 맨 왼쪽 으로 튕 깁 니 다.
위로 미 끄 러 지고 끝까지 튕 기 고 아래로 미 끄 러 지 며 꼭대기 까지 튕 깁 니 다.
이상 의 모 바 일 규칙 의 실현 은 구체 적 인 소스 코드 중의 autoScroll()방법의 실현 을 볼 수 있 습 니 다.여 기 는 붙 이지 않 습 니 다.
이동 과 크기 조정 은 탄력 적 인 이동 과 크기 조정 문제 와 관련 되 는데 탄력 적 인 이동 이란 애니메이션 효과 가 있 는 이동 입 니 다.만약 당신 이 현재 100,100 이 위치 에 있다 면,당신 은 800,100 이 위치 로 이동 해 야 합 니 다.만약 당신 이 통과 하 는 것 이 아니 라,110 으로 이동 하고,120 으로 이동 해 야 하기 때 문 입 니 다.800 까지 한 단락 한 단락 이동 하 다.그러면 이동 효 과 는 매우 경직 되 고 스 쳐 지나 가 는 느낌 으로 효과 가 매우 좋 지 않다.
탄성 이동 의 실현 방향 은 바로:
예 를 들 어 100,100 에서 800,100 으로 이동 하려 면 x 축 이 700 개의 픽 셀 을 이동 해 야 한 다 는 것 이 분명 하 다.그러면 이 700 개의 픽 셀 의 이동 을 우 리 는 10 번 으로 나 누 어 실현 합 니 다.매번 700/10=70 개의 픽 셀 을 이동 할 때마다 두 번 의 이동 사이 에 50 밀리초 간격 을 두 면 프레임 애니메이션 처럼 탄력 적 인 애니메이션 효 과 를 얻 을 수 있 습 니 다.
handler 를 통 해 코드 를 다음 과 같이 실현 합 니 다.
int FRAME_COUNT = 10;
int time = 15;
int count;
Handler handler = new Handler(new Handler.Callback() {
@Override
public boolean handleMessage(Message msg) {
if (count < FRAME_COUNT) {
count++;
MoveInfo moveInfo = (MoveInfo) msg.obj;
float moveXLength = moveInfo.moveXLength;
float moveYLength = moveInfo.moveYLength;
float xValue = moveXLength / FRAME_COUNT;
float yValue = moveYLength / FRAME_COUNT;
matrix.postTranslate(xValue, yValue);
invalidate();
Message message = Message.obtain();
message.obj = msg.obj;
//
handler.sendMessageDelayed(message, time);
} else {
count = 0;
}
return true;
}4.미리 보기 그림 부분의 그리 기 실현
미리 보기 그림 은 좌석 그림 의 축소판 으로 미리 보기 그림 의 너비 와 좌석 그림 의 너비 와 높이 는 일정한 비례 가 있다.예 를 들 어 5 분 의 1 이다.물론 효과 에 따라 조정 할 수 있다.좌석 그림 의 일정한 비율 이 어야 하 는 이 유 는 미리 보기 그림 에 현재 보 이 는 좌석 구역 을 나타 내 는 동적 인 빨간색 사각형 이 있 기 때 문 입 니 다.이 빨간색 사각형 은 좌석 그림 의 이동 에 따라 이동 해 야 합 니 다.비례 가 확정 되면 좌석 도 이동 에 따라 빨간색 사각형 을 이동 할 수 있다.예 를 들 어 현재 좌석 도가 100 개의 픽 셀 을 위로 이동 하면 미리 보기 그림 에 대응 하 는 빨간색 사각형 부분 을 100/4=250 개의 픽 셀 로 아래로 이동 하면 됩 니 다.
개관 도 코드 그리 기:
Bitmap drawOverview() {
// 、
// ： /
float rectSize = seatBitmap.getHeight() / overviewScale;
//
rectW = column * rectWidth + (column - 1) * overviewSpacing + overviewSpacing * 2;
rectH = row * rectSize + (row - 1) * overviewVerSpacing + overviewVerSpacing * 2;
Canvas canvas = new Canvas(overviewBitmap);
//
canvas.drawRect(0, 0, rectW, rectH, paint);
paint.setColor(Color.WHITE);
//
for (int i = 0; i < row; i++) {
float top = i * rectSize + i * overviewVerSpacing + overviewVerSpacing;
for (int j = 0; j < column; j++) {
// 、 、
int seatType = getSeatType(i, j);
switch (seatType) {
case SEAT_TYPE_AVAILABLE:
paint.setColor(Color.WHITE);
break;
case SEAT_TYPE_NOT_AVAILABLE:
continue;
case SEAT_TYPE_SELECTED:
paint.setColor(overview_checked);
break;
case SEAT_TYPE_SOLD:
paint.setColor(overview_sold);
break;
}
float left;
left = j * rectWidth + j * overviewSpacing + overviewSpacing;
canvas.drawRect(left, top, left + rectWidth, top + rectSize, paint);
}
}
return overviewBitmap;
}
/**
*
*/
void drawOverviewBorder(Canvas canvas) {
//
int left = (int) -getTranslateX();// x
if (left < 0) {
left = 0;
}
left /= overviewScale; //overviewScale
left /= getMatrixScaleX();//getMatrixScaleX()
// ， ， 。 。
int currentWidth = (int) (getTranslateX() + (column * seatBitmap.getWidth() + spacing * (column - 1)) * getMatrixScaleX());
if (currentWidth > getWidth()) {
currentWidth = currentWidth - getWidth();
} else {
currentWidth = 0;
}
int right = (int) (rectW - currentWidth / overviewScale / getMatrixScaleX());
float top = -getTranslateY()+headHeight;
if (top < 0) {
top = 0;
}
top /= overviewScale;
top /= getMatrixScaleY();
if (top > 0) {
top += overviewVerSpacing;
}
// ， ， 。 。
int currentHeight = (int) (getTranslateY() + (row * seatBitmap.getHeight() + verSpacing * (row - 1)) * getMatrixScaleY());
if (currentHeight > getHeight()) {
currentHeight = currentHeight - getHeight();
} else {
currentHeight = 0;
}
int bottom = (int) (rectH - currentHeight / overviewScale / getMatrixScaleY());
canvas.drawRect(left, top, right, bottom, redBorderPaint);
}천신만고 끝 에 컨트롤 을 만 들 었 더 니 카드 가 꺼 지지 않 았 다.특히 행 수열 이 많아 서 카드 가 멍 해 졌 다.이때 우 리 는 성능 을 최적화 시 켜 야 한다.정리 해 보면 주로 다음 과 같은 몇 가지 측면 에서
1.onDraw 에서 대상 을 만 들 지 않 고 메모 리 를 분배 하 며 paint 대상 의 생 성 을 초기 화 함수 에 넣 습 니 다.이 단 계 는 사실 매우 중요 합 니 다.왜냐하면 우 리 는 canvas 를 사용 하여 그림 을 그 릴 때 paint 대상 이 필요 하기 때 문 입 니 다.서로 다른 곳 에 서로 다른 paint 가 필요 하기 때 문 입 니 다.그러면 만 든 paint 대상 이 비교적 많 습 니 다.게다가 onDraw 방법 은 여러 번 실 행 될 수 있 습 니 다.잦 은 생 성 대상 은 gc 로 인해 렉 이 발생 합 니 다.물론 paint 대상 뿐만 아니 라 다른 대상 도 적 게 만 들 수 있어 야 합 니 다.
2.불필요 한 논리 그리 기 를 피하 고 필요 할 때 만 그립 니 다.이것 은 우리 가 컨트롤 의 그리 기 논리 에 따라 조정 해 야 하 는 것 도 매우 중요 하 다.
3.전체적인 원칙 은 모든 방법 을 다 강구 하여 onDraw 방법의 집행 을 16ms 이내 로 통제 하면 끊 기지 않 는 다 는 것 이다.
마지막 으로 저희 가 이 룬 효 과 를 보 겠 습 니 다.
원본 주소:
github 주소
위 에서 말 한 것 은 편집장 이 소개 한 안 드 로 이 드 가 멋 진 영화 표 온라인 좌석 선택 app 온라인 좌석 선택 기능 을 만 드 는 것 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.편집장 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Kotlin의 기초 - 2부지난 글에서는 Kotlin이 무엇인지, Kotlin의 특징, Kotlin에서 변수 및 데이터 유형을 선언하는 방법과 같은 Kotlin의 기본 개념에 대해 배웠습니다. 유형 변환은 데이터 변수의 한 유형을 다른 데이터...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
