问题
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>
回答1:
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.
回答2:
I would suggest changing up your xaml to using a Grid with Row and Column Definitions rather than using an 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>
This will give you 3 rows and 2 columns to place your images in. It is able to be resized depending on the device the application is installed and should also allow your TapGestureRecognizers to be executed.
Only use the Grid and row/column definitions and all of the absolute layout code that is currently there. The overlapping of views is making the views towards the top of the page unclickable.
回答3:
I'm not sure why it is happening because your XAML is kind of confuse, but I understood what you want to do. It's basically what TaylorD said. Change it to Grid, not AbsoluteLayout.
It will do all the resizing and positioning for you, and probably solve your problem. What is happening is probably that one of your controls is above the others and it is getting the whole screen, so you when you tap, you tap this control, not the one you wanted too.
Just change it to Grid and it will solve your issue.
来源：https://stackoverflow.com/questions/56132510/why-tap-gesture-recognizer-wont-work-in-absolute-layout