Question

使用Xamarin.Forms在Android上开发项目。我正在尝试创建一个带有六个图像按钮的页面，以在应用程序中导航用户。垂直半页，右侧为3，左侧为3。没有滚动没有其他东西。当我使用绝对布局时，只有屏幕底部的图像有效。其他图像按钮不起作用。如果我只放置2张图片，它们将起作用。

它们在网格中。我删除了网格以进行尝试，但没有任何改变。

<AbsoluteLayout BackgroundColor="Black"
                        AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional">
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="historical"
                            AbsoluteLayout.LayoutBounds="15,.1" AbsoluteLayout.LayoutFlags="YProportional">
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="hotel"
                            AbsoluteLayout.LayoutBounds="15,.5" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_1"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="camp"
                            AbsoluteLayout.LayoutBounds="15,.9" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="Camp_Clicked"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="190,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="food"
                            AbsoluteLayout.LayoutBounds="12,.1" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_2"/>
                </Image.GestureRecognizers>
            </Image>


        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="190,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="airport"
                            AbsoluteLayout.LayoutBounds="12,.5" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_3"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
        <AbsoluteLayout AbsoluteLayout.LayoutBounds="190,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
            <Image Source="adventure"
                            AbsoluteLayout.LayoutBounds="12,.9" AbsoluteLayout.LayoutFlags="YProportional" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer
                            Tapped="Adventure_Clicked"/>
                </Image.GestureRecognizers>
            </Image>

        </AbsoluteLayout>
    </AbsoluteLayout>

这是网格版本。这也有同样的问题。

<Grid>
            <Grid Grid.Column="0" >
                <AbsoluteLayout BackgroundColor="Black"
                        AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional">
                    <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                        <Image Source="historical"
                            AbsoluteLayout.LayoutBounds="15,.1" AbsoluteLayout.LayoutFlags="YProportional">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped"/>
                            </Image.GestureRecognizers>
                        </Image>

                    </AbsoluteLayout>
                    <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                        <Image Source="hotel"
                            AbsoluteLayout.LayoutBounds="15,.5" AbsoluteLayout.LayoutFlags="YProportional" >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_1"/>
                            </Image.GestureRecognizers>
                        </Image>

                    </AbsoluteLayout>
                    <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                        <Image Source="camp"
                            AbsoluteLayout.LayoutBounds="15,.9" AbsoluteLayout.LayoutFlags="YProportional" >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                            Tapped="Camp_Clicked"/>
                            </Image.GestureRecognizers>
                        </Image>

                    </AbsoluteLayout>
                </AbsoluteLayout>




            </Grid>
            <Grid Grid.Column="1">



                <AbsoluteLayout BackgroundColor="Black"
                        AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional">
                    <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                        <Image Source="food"
                            AbsoluteLayout.LayoutBounds="12,.1" AbsoluteLayout.LayoutFlags="YProportional" >
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_2"/>
                            </Image.GestureRecognizers>
                        </Image>

                    </AbsoluteLayout>

                        <AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional">
                            <Image Source="airport"
                            AbsoluteLayout.LayoutBounds="5,.5" AbsoluteLayout.LayoutFlags="YProportional" >
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer
                            Tapped="TapGestureRecognizer_Tapped_3"/>
                                </Image.GestureRecognizers>
                            </Image>

                        </AbsoluteLayout>



                </AbsoluteLayout>



            </Grid>
        </Grid>

Answer 1

我建议将您的xaml更改为使用带有行和列定义的Grid，而不是使用 AbsoluteLayout 。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <Image Source="historical"
           Grid.Row="0"
           Grid.Column="0">
        <Image.GestureRecognizers>
            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
        </Image.GestureRecognizers>
    </Image>

    <!-- Place the rest of your Images with TapGestureRecognizers below -->
    <!-- with the appropriate row/column value for each -->
</Grid>

这将为您提供3行2列来放置图像。它可以根据安装了应用程序的设备进行调整大小，并且还应允许执行TapGestureRecognizers。

仅使用网格和行/列定义以及当前存在的所有绝对布局代码。视图的重叠使页面顶部的视图不可点击。

Answer 2

我不确定为什么会发生这种情况，因为您的XAML有点混乱，但是我知道您想做什么。这基本上就是TaylorD所说的。将其更改为网格，而不是 AbsoluteLayout 。

它将为您完成所有调整大小和定位，并可能解决您的问题。发生的情况可能是您的一个控件位于其他控件之上，并且正在获得整个屏幕，因此，当您点击时，您将点击此控件，而不是您想要的那个控件。

只需将其更改为Grid即可解决您的问题。

Answer 3

为什么点击手势识别器不能在绝对布局中工作？

如果您为每个AbsoluteLayout添加背景色，就很容易找出原因，我添加了它，然后看一下结果：

这两个AbsoluteLayout仅使屏幕底部的图像和其他图像重叠，因此，点击手势识别器将不起作用。

解决方案：

要正确使用absolute-layout，您应该阅读document并了解其工作原理。

在您的代码中，您设置了左侧的3 AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9"，第二个参数表示the y (vertical) position of the view's anchor，您都设置了0，所以所有操作都从屏幕顶部开始，造成重叠。

我更改了您的xaml代码，我认为这是您想要实现的目标：

<AbsoluteLayout BackgroundColor="Yellow"
                    AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional">
    <AbsoluteLayout BackgroundColor="Red" AbsoluteLayout.LayoutBounds="9,0,.4,.3" AbsoluteLayout.LayoutFlags="YProportional,WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="15,.1" AbsoluteLayout.LayoutFlags="YProportional">
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>
    <AbsoluteLayout BackgroundColor="Pink" AbsoluteLayout.LayoutBounds="9,.5,.4,.3" AbsoluteLayout.LayoutFlags="YProportional, WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="15,.5" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>

    <AbsoluteLayout BackgroundColor="Green" AbsoluteLayout.LayoutBounds="9,1,.4,.3" AbsoluteLayout.LayoutFlags="YProportional,WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="15,.9" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>

    <AbsoluteLayout BackgroundColor="Gray" AbsoluteLayout.LayoutBounds="190,0,.4,.3" AbsoluteLayout.LayoutFlags="YProportional,WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="12,.1" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>


    </AbsoluteLayout>

    <AbsoluteLayout BackgroundColor="Blue" AbsoluteLayout.LayoutBounds="190,0.5,.4,.3" AbsoluteLayout.LayoutFlags="YProportional, WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="12,.5" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>

    <AbsoluteLayout BackgroundColor="Orange" AbsoluteLayout.LayoutBounds="190,1,.4,.3" AbsoluteLayout.LayoutFlags="YProportional, WidthProportional,HeightProportional">
        <Image Source="Images"
                        AbsoluteLayout.LayoutBounds="12,.9" AbsoluteLayout.LayoutFlags="YProportional" >
            <Image.GestureRecognizers>
                <TapGestureRecognizer
                        Tapped="TapGestureRecognizer_Tapped"/>
            </Image.GestureRecognizers>
        </Image>

    </AbsoluteLayout>
</AbsoluteLayout>

这是结果：

此外，我建议您使用Grid来布局图像，它更容易，更快捷。

为什么点击手势识别器无法在绝对布局中工作？

3 个答案: