Making iOS 11 Even Easier with Xamarin.Forms

DavidOrtinauDavidOrtinau USForum Administrator, Xamarin Team, Insider, University Xamurai

We're making it easier to implement safe area and large titles for iOS 11 in a new service release candidate of Xamarin.Forms.

https://blog.xamarin.com/making-ios-11-even-easier-with-xamarin-forms

Give it a read. Try out the package and let us know your feedback. If testing goes well the next few days, we'll promote this to NuGet shortly.

Posts

  • LauriTaimilaLauriTaimila FIBeta ✭✭
    edited November 2017

    Happy to see Large titles getting treatment on Xamarin.Forms. Seems to work otherwise great, but NavigationPage within TabbedPage has issue. Not sure is it something app developer should take care of or should it be part of default behaviour.

    When scrolling up the page in NavigationPage, the title gets smaller as it should. However, bottom of the page gets moved up and navigation page background becomes visible.

    Here is how it looks:

    It's easy to replicate with this simple Forms app:

    `using System;
    using Xamarin.Forms;
    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;

    namespace LargeTitlesWithTabs
    {
    public class App : Application
    {
    public App()
    {
    var navigationPage = new Xamarin.Forms.NavigationPage(new HighPage())
    {
    BackgroundColor = Color.Red
    };
    navigationPage.On<Xamarin.Forms.PlatformConfiguration.iOS>().SetPrefersLargeTitles(true);

            var tabs = new TabbedPage();
            tabs.Children.Add(navigationPage);
            MainPage = tabs;
        }
    }
    
    public class HighPage : ContentPage
    {
        public HighPage()
        {
            Title = "Hello World";
            Content = new Xamarin.Forms.ScrollView 
            { 
                Content = new BoxView 
                { 
                    HeightRequest = 2000, 
                    WidthRequest = 500, 
                    BackgroundColor = Color.Lime 
                } 
            };
        }
    }
    

    }`

    Sorry about the code. Can't get the formatting work correctly here. :(

  • @DavidOrtinau said:
    If testing goes well the next few days, we'll promote this to NuGet shortly.

    Hi. When do think the new version will be on nuget?

    Cheers
    Philipp

  • Is it launched or not yet?
    Recently just keep so many version update and making me have to update others third party to suit it.

  • DavidOrtinauDavidOrtinau USForum Administrator, Xamarin Team, Insider, University Xamurai

    We've fixed a ListView issue with HasUnevenRows that was reported on SR4, and we'll investigate the issue raised above. Hope to have this on NuGet asap.

  • @DavidOrtinau Awesome! Keep us posted.

  • BjornBBjornB USMember ✭✭✭
    edited November 2017

    Semms like viewcell has a hardcoded left padding on iOS 11. This is a dealbreaker for all my apps if i cant get around it.
    Posted a comment about it here https://github.com/xamarin/Xamarin.Forms/pull/1238/files#r150046252

    This is the result of code below (nested in a navigationpage with largetitle)

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="Devent.Apps.Views.TestView" BackgroundColor="Yellow" Title="Please fix">
        <ContentPage.Content>
            <ListView x:Name="List" BackgroundColor="Transparent" HasUnevenRows="True">
                <ListView.Header>
                    <StackLayout Padding="10">
                        <Label Text="This is a listview.header"></Label>
                        <Label Text="My stacklayouts padding is 10"></Label>
                        <Label Text="My aligment to the list is awful"></Label>
                        <Label Text="And listitems get a yellow gap to the left"></Label>
                        <Label Text="But only on ios 11"></Label>
                    </StackLayout>
                </ListView.Header>
                <ListView.ItemTemplate>            
                <DataTemplate>                    
                        <ViewCell>
                            <StackLayout Padding="10" BackgroundColor="Red">
                                <Label Text="My Stacklayouts backgroundcolor is red" ></Label>
                                <Label Text="My stacklayouts padding is also 10"></Label>
                            </StackLayout>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
                <ListView.Footer>
                    <StackLayout Padding="10">
                        <Label Text="This is a listview.footer"></Label>
                        <Label Text="Page has yellow bgcolor"/>
                        <Label Text="Listview bgcolor is transparent"/>
                        <Label Text="If your scroll up, the bottom gets a white bar"></Label>
                    </StackLayout>
    
                </ListView.Footer>
            </ListView>
        </ContentPage.Content>
    </ContentPage>
    
  • LauriTaimilaLauriTaimila FIBeta ✭✭

    @BjornB said:
    Semms like viewcell has a hardcoded left padding on iOS 11. This is a dealbreaker for all my apps if i cant get around it.

    This is pretty bad indeed. Did you create a bug for this?

  • BjornBBjornB USMember ✭✭✭

    @LauriTaimila said:

    @BjornB said:
    Semms like viewcell has a hardcoded left padding on iOS 11. This is a dealbreaker for all my apps if i cant get around it.

    This is pretty bad indeed. Did you create a bug for this?

    not yet :)

  • DH80DH80 USMember ✭✭

    @BjornB I can confirm this same behavior. Unfortunately the class is internal so we cannot modify it.

  • SebastianKruseSebastianKruse USMember ✭✭✭
    edited November 2017

    Is there any way to apply the safe area only to a child element? I would like to use the safe area for my list view but it is not the root element on that page...

  • varyamereonvaryamereon USMember ✭✭
    edited December 2017

    Have had no joy with safe areas. If I simplify my app to load into a ContentPage and set SetUseSafeAreas to false, the app still shows 'boxed' with black areas to the top and bottom of the screen on iPhone X. The splash screen is also displaying in the same manner.

    EDIT: Found the issue, wasn't using a LaunchScreen.storyboard which causes the app to run in Compatability Mode. Adding this solves the problem.

  • kalyanReddykalyanReddy USMember ✭✭

    `
    protected override void OnAppearing()
    {
    base.OnAppearing();

    var safeInsets  = On<Xamarin.Forms.PlatformConfiguration.iOS>().SafeAreaInsets();
    safeInsets.Left = 24;
    this.Padding = safeInsets;
    

    }
    `

    Setting custom inset values in the on appearing method is weird,,, as it first displays the default safe area insets provided by the system and then it changes. How to avoid the transition, so that users can see the custom safe insets in the first place.. Can't use ViewWillAppear,, as there is no setter to set safe area insets in the page renderer.

  • rizkyariorizkyario USMember ✭✭

    Hi everyone,

    Can we use this to detect whether the app is running on iPhone X or other devices?
    It seems that the value of SafeAreaInsets are always 0.

Sign In or Register to comment.