I have cross-platform Xamarin project. Now i made a TopBar ContentView to put a red topbar on my pages which have a back button on the left, page title on middle etc. It's something like this.
<ContentView.Content> <StackLayout> <AbsoluteLayout BackgroundColor="{StaticResource PrimaryColor}" HorizontalOptions="FillAndExpand" HeightRequest="50"> <ImageButton x:Name="BackButton" x:FieldModifier="public" BackgroundColor="Transparent" Clicked="BackButton_OnClicked" Source="whitebackbutton.png" Margin="10, 0,0,0 " AbsoluteLayout.LayoutBounds="0, 0.5, 30, 30" AbsoluteLayout.LayoutFlags="PositionProportional" /> <Label TextColor="White" FontSize="Large" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" x:Name="TopBarLabel" HorizontalOptions="CenterAndExpand" AbsoluteLayout.LayoutBounds="0.5, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional"></Label> <StackLayout x:Name="RightButtonsLayout" Orientation="Horizontal" IsVisible="False" Padding="0" AbsoluteLayout.LayoutBounds="1, 0.5, -1, -1" AbsoluteLayout.LayoutFlags="PositionProportional"> //// </StackLayout> </AbsoluteLayout> </StackLayout> </ContentView.Content> </ContentView>
For IOS i used a 30 unit padding from the top because i wanted to prevent the clashing of my topbar and ios topbar(time etc.).
if (Device.RuntimePlatform == Device.iOS) { Padding = new Thickness(0, 30, 0, 0); }
Back button work fine in UWP, Android and IPad. But it's little hard to tap on Iphone. Almost every time i have to tap twice to make it work. What am i doing wrong?
Try to make it a little away from the safe area by setting the padding:
Padding = new Thickness(20, 60, 0, 0);
We just set this to exclude the safe area factor. If it works under this padding we could adjust its value to fit your design requirement.
Answers
I test this on the iOS emulator. It seems the mouse could easily touch the icon on it.
However, maybe 30 is too small for fingers to touch.
Have you tried to set a larger size to this button?
And what sort of iPhone did you test on? If you tested on notch series iPhones, this could happen because of the safe area.
I tried on Iphone X and 5. I changed the size of imagebutton to 40 but same thing happened. And 50 is too large.
Try to make it a little away from the safe area by setting the padding:
We just set this to exclude the safe area factor. If it works under this padding we could adjust its value to fit your design requirement.