2

在 iOS 上的 Xamarin.Forms 中，我如何扩展TabbedPage以便除了使用底部的选项卡更改页面外，用户还可以向左或向右滑动以更改页面？理想情况下，滑动时页面过渡应该是动画的。

没有一个页面在页面本身内使用向左或向右手势，因此向左或向右滑动可明确表示希望更改当前页面。

4

1 回答 1

6

以下代码响应用户滑动手势，并使用交叉溶解动画选项卡更改。它创建一个自定义渲染器，为每个方向TabbedPage添加一个 iOS UISwipeGestureRecognizer。

手势识别器与页面上的其他手势同时工作（否则，滚动等页面手势将阻止滑动手势工作，除非手势完全水平），但不能与它本身一起工作（否则，一次滑动将跨多个页面移动）。

[assembly: ExportRenderer(typeof(TabbedPage), typeof(SwipeTabbedRenderer))]

class SwipeTabbedRenderer : TabbedRenderer
{
    public override void ViewWillAppear(bool animated)
    {
        base.ViewWillAppear(animated);

        NativeView.AddGestureRecognizer(new UISwipeGestureRecognizer(() => SelectNextTab(1)) { Direction = UISwipeGestureRecognizerDirection.Left, ShouldRecognizeSimultaneously = ShouldRecognizeSimultaneously });
        NativeView.AddGestureRecognizer(new UISwipeGestureRecognizer(() => SelectNextTab(-1)) { Direction = UISwipeGestureRecognizerDirection.Right, ShouldRecognizeSimultaneously = ShouldRecognizeSimultaneously });
    }

    void SelectNextTab(int direction)
    {
        int nextIndex = TabbedPage.GetIndex(Tabbed.CurrentPage) + direction;
        if (nextIndex < 0 || nextIndex >= Tabbed.Children.Count) return;
        var nextPage = Tabbed.Children[nextIndex];
        UIView.Transition(Platform.GetRenderer(Tabbed.CurrentPage).NativeView, Platform.GetRenderer(nextPage).NativeView, 0.15, UIViewAnimationOptions.TransitionCrossDissolve, null);
        Tabbed.CurrentPage = nextPage;
    }

    static bool ShouldRecognizeSimultaneously(UIGestureRecognizer gestureRecognizer, UIGestureRecognizer otherGestureRecognizer) => gestureRecognizer != otherGestureRecognizer;
}

改进的机会：滑动手势会比交叉溶解更好，但是当我尝试使用CATransition创建一个时，动画的初始状态是空白页面，而不是开始选项卡的页面。这导致动画感觉有点刺耳。

于 2017-12-01T04:59:52.077 回答