为什么点击手势识别器在绝对布局中不起作用? [英] Why tap gesture recognizer wont work in absolute layout?
问题描述
使用 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屋!