为什么点击手势识别器在绝对布局中不起作用? [英] Why tap gesture recognizer wont work in absolute layout?

查看：26
本文介绍了为什么点击手势识别器在绝对布局中不起作用?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

他们在一个网格中.我删除了网格来尝试，但没有任何改变.

<AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=历史"AbsoluteLayout.LayoutBounds="15,.1" AbsoluteLayout.LayoutFlags="YProportional"><Image.GestureRecognizers><TapGestureRecognizerTapped="TapGestureRecognizer_Tapped"/></Image.GestureRecognizers></图片></AbsoluteLayout><AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=酒店"AbsoluteLayout.LayoutBounds="15,.5" AbsoluteLayout.LayoutFlags="YProportional" ><Image.GestureRecognizers><TapGestureRecognizerTapped="TapGestureRecognizer_Tapped_1"/></Image.GestureRecognizers></图片></AbsoluteLayout><AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=营地"AbsoluteLayout.LayoutBounds="15,.9" AbsoluteLayout.LayoutFlags="YProportional" ><Image.GestureRecognizers><TapGestureRecognizerTapped="Camp_Clicked"/></Image.GestureRecognizers></图片></AbsoluteLayout><AbsoluteLayout AbsoluteLayout.LayoutBounds="190,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=食物"AbsoluteLayout.LayoutBounds="12,.1" AbsoluteLayout.LayoutFlags="YProportional" ><Image.GestureRecognizers><TapGestureRecognizerTapped="TapGestureRecognizer_Tapped_2"/></Image.GestureRecognizers></图片></AbsoluteLayout><AbsoluteLayout AbsoluteLayout.LayoutBounds="190,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=机场"AbsoluteLayout.LayoutBounds="12,.5" AbsoluteLayout.LayoutFlags="YProportional" ><Image.GestureRecognizers><TapGestureRecognizerTapped="TapGestureRecognizer_Tapped_3"/></Image.GestureRecognizers></图片></AbsoluteLayout><AbsoluteLayout AbsoluteLayout.LayoutBounds="190,0,.4,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=冒险"AbsoluteLayout.LayoutBounds="12,.9" AbsoluteLayout.LayoutFlags="YProportional" ><Image.GestureRecognizers><TapGestureRecognizerTapped="Adventure_Clicked"/></Image.GestureRecognizers></图片></AbsoluteLayout></AbsoluteLayout>

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

<网格 Grid.Column="0" ><AbsoluteLayout BackgroundColor="黑色"AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional"><AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=历史"AbsoluteLayout.LayoutBounds="15,.1" AbsoluteLayout.LayoutFlags="YProportional"><Image.GestureRecognizers><TapGestureRecognizerTapped="TapGestureRecognizer_Tapped"/></Image.GestureRecognizers></图片></AbsoluteLayout><AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=酒店"AbsoluteLayout.LayoutBounds="15,.5" AbsoluteLayout.LayoutFlags="YProportional" ><Image.GestureRecognizers><TapGestureRecognizerTapped="TapGestureRecognizer_Tapped_1"/></Image.GestureRecognizers></图片></AbsoluteLayout><AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=营地"AbsoluteLayout.LayoutBounds="15,.9" AbsoluteLayout.LayoutFlags="YProportional" ><Image.GestureRecognizers><TapGestureRecognizerTapped="Camp_Clicked"/></Image.GestureRecognizers></图片></AbsoluteLayout></AbsoluteLayout></网格><网格 Grid.Column="1"><AbsoluteLayout BackgroundColor="黑色"AbsoluteLayout.LayoutBounds="0, 220, 1, 50" AbsoluteLayout.LayoutFlags="XProportional,WidthProportional"><AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=食物"AbsoluteLayout.LayoutBounds="12,.1" AbsoluteLayout.LayoutFlags="YProportional" ><Image.GestureRecognizers><TapGestureRecognizerTapped="TapGestureRecognizer_Tapped_2"/></Image.GestureRecognizers></图片></AbsoluteLayout><AbsoluteLayout AbsoluteLayout.LayoutBounds="0,0,.9,.9" AbsoluteLayout.LayoutFlags="WidthProportional,HeightProportional"><图片来源=机场"AbsoluteLayout.LayoutBounds="5,.5" AbsoluteLayout.LayoutFlags="YProportional" ><Image.GestureRecognizers><TapGestureRecognizerTapped="TapGestureRecognizer_Tapped_3"/></Image.GestureRecognizers></图片></AbsoluteLayout></AbsoluteLayout></网格></网格>

解决方案

为什么点击手势识别器在绝对布局中不起作用?

如果为每个AbsoluteLayout添加背景颜色很容易找出原因，我添加了它，让我们看看结果:

只有屏幕底部的图像和其他图像被这两个 AbsoluteLayout重叠，所以点击手势识别器将不起作用.

解决方案:

要正确使用 absolute-layout，您应该阅读

此外，我建议您使用 网格 来布置您的图像，更简单、更快捷.

Developing a project on Android with Xamarin.Forms.I am trying to create a page with six image buttons to navigate the user through the app. Vertically half page, 3 on right side 3 on the left side. No scroll no other things. When I use absolute layout, only images in the bottom of the screen is working. Other imagebuttons didn't work. If I put only 2 images they work.

They were in a grid. I deleted grid to try and nothing is changed.

<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>

This is grid version. Also this has same problem.

<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>

解决方案

Why tap gesture recognizer wont work in absolute layout?

It's easy to find out the cause if you add a background color to each AbsoluteLayout, i added it and let's see the result:

Only images in the bottom of the screen show and others are overlapping by these two AbsoluteLayout, so the tap gesture recognizer wont work.

Solution:

To use absolute-layout correctly, you should read the document and understand how it works.

In your code, you set the left 3 AbsoluteLayout AbsoluteLayout.LayoutBounds="9,0,.4,.9", the second parameter means the y (vertical) position of the view's anchor, you all set the 0, so it all start from the top of screen, this caused the overlapping.

I changed you xaml code and I think this is what you want to achieve:

<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>

Here is the result:

in addition, I would recommend you to use Grid to layout your images, it's easier and faster.

这篇关于为什么点击手势识别器在绝对布局中不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆