GestureConfig 參數說明

實現過程

這一個功能比較簡單，參考了官方的gestures demo，將縮放的Scale和Offset轉換了為了圖片最后顯示的區域，具體代碼在最后繪制圖片的時候，將gestureDetails轉換為對應的圖片顯示區域。

bool gestureClip = false;
if (gestureDetails != null) {
destinationRect =
gestureDetails.calculateFinalDestinationRect(rect, destinationRect);

///outside and need clip
gestureClip = outRect(rect, destinationRect);

if (gestureClip) {
canvas.save();
canvas.clipRect(rect);
}
}

rect 是整個圖片在屏幕上的區域，destinationRect圖片顯示區域(會根據BoxFit的不同而所不同)，通過gestureDetails的calculateFinalDestinationRect方式，計算出最終顯示區域。

讓縮放的過程看起來流暢

1.根據縮放點相對圖片的位置對縮放點作為中心點進行縮放

2.如果Scale小于等于1.0的時候，按照圖片的中心點進行縮放的，而當大于1.0并且圖片已經鋪滿區域的時候按照1來執行

3.當圖片是那種長寬相差很大的時候，進行縮放的時候，將首先沿著比較長的那邊進行中心點縮放，直到圖片鋪滿區域之后，按照1來執行

4.當進行縮放操作的時候，不進行移動操作

1，2，3對應代碼

Offset _getCenter(Rect destinationRect) {
if (!userOffset && _center != null) {
return _center;
}

if (totalScale > 1.0) {
if (_computeHorizontalBoundary && _computeVerticalBoundary) {
return destinationRect.center totalScale + offset;
} else if (_computeHorizontalBoundary) {
//only scale Horizontal
return Offset(destinationRect.center.dx totalScale,
destinationRect.center.dy) +
Offset(offset.dx, 0.0);
} else if (_computeVerticalBoundary) {
//only scale Vertical
return Offset(destinationRect.center.dx,
destinationRect.center.dy * totalScale) +
Offset(0.0, offset.dy);
} else {
return destinationRect.center;
}
} else {
return destinationRect.center;
}
}

4對應代碼,當details.scale==1.0，說明是一個移動操作，否則為了一個縮放操作

void _handleScaleUpdate(ScaleUpdateDetails details) {
...
var offset =
((details.scale == 1.0 ? details.focalPoint : _startingOffset) -
_normalizedOffset * scale);
...
}

獲取到了圖片的中心點之后，我們再根據Scale等到圖片的整個區域

Rect _getDestinationRect(Rect destinationRect, Offset center) {
final double width = destinationRect.width totalScale;
final double height = destinationRect.height totalScale;

return Rect.fromLTWH(
center.dx - width / 2.0, center.dy - height / 2.0, width, height);
}

拖拽邊界的計算

1.計算是否需要計算限制邊界
2.如果需要將區域限制在邊界內部

if (_computeHorizontalBoundary) {
//move right
if (result.left >= layoutRect.left) {
result = Rect.fromLTWH(0.0, result.top, result.width, result.height);
_boundary.left = true;
}

///move left
if (result.right <= layoutRect.right) {
result = Rect.fromLTWH(layoutRect.right - result.width, result.top,
result.width, result.height);
_boundary.right = true;
}
}

if (_computeVerticalBoundary) {
//move down
if (result.bottom <= layoutRect.bottom) {
result = Rect.fromLTWH(result.left, layoutRect.bottom - result.height,
result.width, result.height);
_boundary.bottom = true;
}

//move up
if (result.top >= layoutRect.top) {
result = Rect.fromLTWH(
result.left, layoutRect.top, result.width, result.height);
_boundary.top = true;
}
}

_computeHorizontalBoundary =
result.left <= layoutRect.left && result.right >= layoutRect.right;

_computeVerticalBoundary =
result.top <= layoutRect.top && result.bottom >= layoutRect.bottom;

縮放回彈效果以及拖拽慣性效果

void _handleScaleEnd(ScaleEndDetails details) {
//animate back to maxScale if gesture exceeded the maxScale specified
if (_gestureDetails.totalScale > _gestureConfig.maxScale) {
final double velocity =
(_gestureDetails.totalScale - _gestureConfig.maxScale) /
_gestureConfig.maxScale;

_gestureAnimation.animationScale(
_gestureDetails.totalScale, _gestureConfig.maxScale, velocity);
return;
}

//animate back to minScale if gesture fell smaller than the minScale specified
if (_gestureDetails.totalScale < _gestureConfig.minScale) {
final double velocity =
(_gestureConfig.minScale - _gestureDetails.totalScale) /
_gestureConfig.minScale;

_gestureAnimation.animationScale(
_gestureDetails.totalScale, _gestureConfig.minScale, velocity);
return;
}

if (_gestureDetails.gestureState == GestureState.pan) {
// get magnitude from gesture velocity
final double magnitude = details.velocity.pixelsPerSecond.distance;

// do a significant magnitude
if (magnitude >= minMagnitude) {
final Offset direction = details.velocity.pixelsPerSecond /
magnitude *
_gestureConfig.inertialSpeed;

_gestureAnimation.animationOffset(
_gestureDetails.offset, _gestureDetails.offset + direction);
}
}
}

唯一注意的是Scale的回彈動畫將以最后的縮放中心點為中心進行縮放，這樣縮放動畫才看起來舒服一些

//true: user zoom/pan
//false: animation
final bool userOffset;
Offset _getCenter(Rect destinationRect) {
if (!userOffset && _center != null) {
return _center;
}

在PageView里面縮放拖拽

用法

1.使用
ExtendedImageGesturePageView展示圖片

2.設置GestureConfig的inPageView 為Ture

GestureConfig 參數說明

實現過程

手勢沖突

這個場景需要關注的是手勢的沖突問題，PageView里面是有水平或者垂直的手勢的，會跟onScaleStart/onScaleUpdate/onScaleEnd有沖突。

最開始想的是手勢應該有冒泡，是不是可以我監聽到了之后，不像上冒泡，這樣可以阻止PageView里面的滑動行為，最后結論是沒有方法能阻止冒泡。

關于手勢，大家可以看看拉面小姐姐關于手勢的文章，神奇的競技場概念。。

既然不能阻止手勢冒泡，那么我就直接不讓你能滾動了，然后全部的手勢都交給我，我來處理。

首先我看了下PageView關于滾動的源碼，直接指向最終ScrollableState里面的代碼，在setCanDrag方法里面根據是否可以Drag，準備了水平/垂直的手勢。

把ScrollableState里面關于水平垂直滾動處理的代碼拿出來，我創建了一個屬于extended_image專門

《Android學習筆記總結+最新移動架構視頻+大廠安卓面試真題+項目實戰源碼講義》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整內容開源分享

的extended_image_gesture_page_view,屬性跟PageView一樣只是沒法設置physics，
因為強制設置為了NeverScrollableScrollPhysics

Widget result = PageView.custom(
scrollDirection: widget.scrollDirection,
reverse: widget.reverse,
controller: widget.controller,
childrenDelegate: widget.childrenDelegate,
pageSnapping: widget.pageSnapping,
physics: widget.physics,
onPageChanged: widget.onPageChanged,
key: widget.key,
);

result = RawGestureDetector(
gestures: _gestureRecognizers,
behavior: HitTestBehavior.opaque,
child: result,
);

然后我們通過RawGestureDetector來注冊_gestureRecognizers（水平/垂直的手勢）。

關于_gestureRecognizers，我之前一直好奇PageView里面有個手hold的操作是怎么做到了，直到看到源碼才知道這么個東西，源碼真是個好東西。

void _handleDragDown(DragDownDetails details) {
//print(details);
_gestureAnimation.stop();
assert(_drag == null);
assert(_hold == null);
_hold = position.hold(_disposeHold);
}

到達邊界滾動上下一個圖片

有了之前縮放拖拽的基礎，這部分就比較簡單了。如果到達邊界就是用默認代碼去操作PageView，否則就控制Image進行拖拽操作

void _handleDragUpdate(DragUpdateDetails details) {

面試復習筆記：

這份資料我從春招開始，就會將各博客、論壇。網站上等優質的Android開發中高級面試題收集起來，然后全網尋找最優的解答方案。每一道面試題都是百分百的大廠面經真題+最優解答。包知識脈絡 + 諸多細節。
節省大家在網上搜索資料的時間來學習，也可以分享給身邊好友一起學習。

《960頁Android開發筆記》

《1307頁Android開發面試寶典》

包含了騰訊、百度、小米、阿里、樂視、美團、58、獵豹、360、新浪、搜狐等一線互聯網公司面試被問到的題目。熟悉本文中列出的知識點會大大增加通過前兩輪技術面試的幾率。

《507頁Android開發相關源碼解析》

只要是程序員，不管是Java還是Android，如果不去閱讀源碼，只看API文檔，那就只是停留于皮毛，這對我們知識體系的建立和完備以及實戰技術的提升都是不利的。

真正最能鍛煉能力的便是直接去閱讀源碼，不僅限于閱讀各大系統源碼，還包括各種優秀的開源庫。

本文已被[CODING開源項目：《Android學習筆記總結+移動架構視頻+大廠面試真題+項目實戰源碼》]( )收錄