android - Xamarin:Scrollview 中的 PanGestureRecognizer (Android)

Question

我很难让以下内容起作用:我有一个水平 ScrollView ，其中放置了一个网格。我想让网格接收平移手势。

我的 XAML:

<ScrollView Orientation="Horizontal" VerticalOptions="Center">
        <Grid RowSpacing="3" VerticalOptions="Center" BackgroundColor="Red" Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="30" />
                        <RowDefinition Height="Auto" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="100" />
                    </Grid.ColumnDefinitions>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="party.png" Grid.Row="0" Grid.Column="0" WidthRequest="30" HeightRequest="30"></Image>
                    <Label Grid.Row="1" Grid.Column="0" HorizontalTextAlignment="Center" FontAttributes="Bold" Text="AUSGEHEN" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="1" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="contacts.png" Grid.Row="0" Grid.Column="2"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="2" Text="KONTAKTE" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="3" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sports.png" Grid.Row="0" Grid.Column="4"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="4" Text="SPORT" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="5" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="dating.png" Grid.Row="0" Grid.Column="6"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="6" Text="DATING" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="7" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="culture.png" Grid.Row="0" Grid.Column="8"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="8" Text="KULTUR" TextColor="#646464" />

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="sep.png" Grid.RowSpan="2" Grid.Column="9" WidthRequest="1" HeightRequest="10"></Image>

                    <Image Aspect="AspectFit" HorizontalOptions="Center" VerticalOptions="Center" Source="food.png" Grid.Row="0" Grid.Column="10"  WidthRequest="30" HeightRequest="30"></Image>
                    <Label VerticalTextAlignment="Start" HorizontalTextAlignment="Center" FontAttributes="Bold" Grid.Row="1" Grid.Column="10" Text="ESSEN" TextColor="#646464" />
                    <Grid.GestureRecognizers>
                        <PanGestureRecognizer PanUpdated="OnPanUpdated" />
                    </Grid.GestureRecognizers>
                </Grid>
            </ScrollView>

问题是 ScrollView “吞没”了垂直滑动手势。这意味着水平滚动 ScrollView 时不会调用“OnPanUpdated”。如果我在不水平移动 ScrollView 的情况下小心地向上/向下滑动，则会调用“OnPanUpdated”。

我基本上想要实现的是，如果我在 ScrollView 内的网格上向上或向下滑动，则应该调用“OnPunUpdated”。如果我水平滑动，我希望 ScrollView 正常水平滚动。只要我一扫过它就调用“OnPunUpdated”，我就不会在意两者是否都被调用。

我尝试了几种适用于 Android 的自定义渲染器，但没有成功。

如果有人能抽出时间帮我解决问题，我将不胜感激。

注意:仅在 Android 上测试过。

Answer 1

there's a horizontal scrollview and I want to swipe it up with a pan gesture. when a user swipes left or right the scrollview should be triggered and when up or down the slide

你可以 create a Pan Container并将您的 ScrollView 放入此 Container 中:

public class PanContainer : ContentView
{
    double x, y;

    public PanContainer()
    {
        // Set PanGestureRecognizer.TouchPoints to control the 
        // number of touch points needed to pan
        var panGesture = new PanGestureRecognizer();
        panGesture.PanUpdated += OnPanUpdated;
        GestureRecognizers.Add(panGesture);
    }

    void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {

            case GestureStatus.Running:
                // Translate and ensure we don't pan beyond the wrapped user interface element bounds.
                Content.TranslationX = Math.Max(Math.Min(0, x + e.TotalX), -Math.Abs(Content.Width - App.ScreenWidth));
                Content.TranslationY = Math.Max(Math.Min(0, y + e.TotalY), -Math.Abs(Content.Height - App.ScreenHeight));
                break;

            case GestureStatus.Completed:
                // Store the translation applied during the pan
                x = Content.TranslationX;
                y = Content.TranslationY;
                break;
        }
    }
}

在您的 .xaml 中:

<ContentPage.Content>
    <local:PanContainer>
        <ScrollView Orientation="Horizontal" VerticalOptions="Center">
            ...

        </ScrollView>
    </local:PanContainer>
</ContentPage.Content>

Effect .