今天利用GestureDetector這個手勢類和Scroller滑動類寫一篇圖片的滑動瀏覽的ViewGroup。效果圖如下:獻上我最愛的小龍女。
onTouchEvent 可以實現View的滑動,通過觸摸事件的類型,改變view的坐標
Scroller Scroller有兩個方法可以實現View的滑動,scrollTo與scrollBy這兩個方法,scrollTo:是從一個坐標移動到另一個坐標,scrollBy:是移動的滑動的距離。
GestureDetector 手勢滑動的這個類也可以實現View的移動,在GestureDetector.OnGestureListener()中可以攔截down事件,onShowPRess事件,onscroll事件等
還有其他的實現方式就不多說了,直接進入今天要實現的滑動。 首先要實現的是自定義的ViewGroup,首先重寫構造類,和onLayout及onMeasure方法。
@Overrideprotected void onLayout(boolean b, int i, int i1, int i2, int i3) { for (int j = 0; j < getChildCount(); j++) { View view = getChildAt(j); view.layout(getWidth() * j, 0, getWidth() * j + getWidth(), getHeight()); }}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthMode = MeasureSpec.getMode(widthMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); if (widthMode == MeasureSpec.EXACTLY) { width = widthSize; } else { throw new IllegalArgumentException("請固定寬和高"); } if (heightMode == MeasureSpec.EXACTLY) { height = heightSize; } else { throw new IllegalArgumentException("請固定寬和高"); } setMeasuredDimension(width, height);}在onLayout方法中,后面的四個參數分別是左邊坐標,頂部坐標,右邊坐標和下部坐標。在layout方法中為通過addView方法加進的View分別指定位置。 接著初始化我們需要的Scroller類和手勢滑動類:
private void init() { scroller = new Scroller(getContext()); addGestureDetector();} /** * 添加一個手勢滑動的監聽 */private void addGestureDetector() { gestureDetector = new GestureDetector(new GestureDetector.OnGestureListener() { @Override public boolean onDown(MotionEvent motionEvent) { return false; } @Override public void onShowPress(MotionEvent motionEvent) { } @Override public boolean onSingleTapUp(MotionEvent motionEvent) { return false; } /** * 攔截掉onscroll事件,并做判斷,當在第一頁時若繼續向右滑動,則不攔截,當在最后一頁時若繼續向左滑動則不攔截 * @param motionEvent * @param motionEvent1 * @param v * @param v1 * @return */ @Override public boolean onScroll(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) { if (currentPage == 0 && v < 0) { return false; } if (currentPage == getChildCount() - 1 && v > 0) return false; scrollBy((int) v, 0); return true; } @Override public void onLongPress(MotionEvent motionEvent) { } @Override public boolean onFling(MotionEvent motionEvent, MotionEvent motionEvent1, float v, float v1) { return false; } });}然后添加手勢滑動之后需要綁定MotionEvent 就需要重寫onTouchEvent的方法對MotionEvent 進行綁定
@Overridepublic boolean onTouchEvent(MotionEvent event) { gestureDetector.onTouchEvent(event); switch (event.getAction()) { case MotionEvent.ACTION_DOWN: downx = (int) event.getX(); downy = (int) event.getY(); break; case MotionEvent.ACTION_MOVE: break; case MotionEvent.ACTION_UP: int upx = (int) event.getX(); int upy = (int) event.getY(); if (upx - downx > getWidth() / 3) { currentPage--; } else if (upx - downx < -getWidth() / 3) { currentPage++; } uodate(currentPage); break; } return true;}首先綁定MotionEvent 計算down事件的坐標與up事件的坐標然后通過滑動的距離設置是否滑動到下一頁 ,然后再update方法里面通過Scroller進行滑動。
/** * 更新滑動的距離 * 通過滑動頁數控制顯示的圖片 * * @param index */private void uodate(int index) { if (index <= 0) { currentPage = 0; } else if (index >= getChildCount() - 1) { currentPage = getChildCount() - 1; } dx = getWidth() * currentPage - getScrollX(); scroller.startScroll(getScrollX(), 0, dx, 0); invalidate();}/** * scroller調用startScroll時必須配合computeScroll一起使用 */@Overridepublic void computeScroll() { if (scroller.computeScrollOffset()) { scrollTo(scroller.getCurrX(), 0); invalidate(); }}首先判斷了下滑動顯示的位置的下標是否超過當前第一張圖片的下標和滑動顯示的位置的下標是否超過最后一張圖片的下標的位置。然后計算出滑動的距離。調用 scroller.startScroll(getScrollX(), 0, dx, 0);第一個參數標示滑動的x坐標,第三個參數標示滑動的x軸上的距離。然后調用 invalidate();繪制。scroller調用startScroll時必須配合computeScroll一起使用。mScroller.computeScrollOffset() ;返回值為boolean,true說明滾動尚未完成,false說明滾動已經完成。 scrollTo(scroller.getCurrX(), 0);scroller.getCurrX();獲取mScroller當前水平滾動的位置。然后再調用 invalidate();一直繪制。 最后在MainActivity中使用。
private void setImage() { for (int i = 0; i < images.length; i++) { ImageView imageView = new ImageView(this); imageView.setScaleType(ImageView.ScaleType.FIT_XY); imageView.setImageResource(images[i]); defineViewGroup.addView(imageView); }}
|
新聞熱點
疑難解答