SkiaSharp layout control for improved Android performance

In my everlasting search for smoother Android ListView performance (although base XF is MUCH improved over the past year) I've been seeing if rendering some complex text/image layouts with SkiaSharp in code would be quicker than using all the explained tricks, it does seem to be I've found.

However it is a bit of pain to turn all that nicely formatted XAML code into canvas.DrawString(x,y) canvas.DrawImage(x,y) statements so I've wrote a little SkiaSharp container with some limited bindable controls that can be inserted into your normal XAML layout code but will be rendered using SkiaSharp rather the JNI'ing into the native controls, e.g.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MycoDemo.MycoDemoPage"
             xmlns:ml="clr-namespace:Myco;assembly=Myco">
  <ListView ItemsSource="{Binding Items}" HasUnevenRows="true">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <ml:MycoContainer>
            <ml:MycoGrid Padding="5,5,5,5">              
              <ml:MycoGrid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
              </ml:MycoGrid.RowDefinitions>

              <ml:MycoGrid.ColumnDefinitions>
                <ColumnDefinition Width="50" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
              </ml:MycoGrid.ColumnDefinitions>

              <ml:MycoLabel ml:MycoGrid.Row="0" ml:MycoGrid.Column="0" ml:MycoGrid.ColumnSpan="3" TextColor="#333333" Text="{Binding Text}" FontSize="20" FontAttributes="Bold" VerticalTextAlignment="Center" />   
              <ml:MycoLabel ml:MycoGrid.Row="1" ml:MycoGrid.Column="1" TextColor="#333333" FontSize="12" Text="{Binding Labels[0].Header}" IsVisible="{Binding Labels[0].Enabled}"/>
              <ml:MycoLabel ml:MycoGrid.Row="1" ml:MycoGrid.Column="2" TextColor="#333333" FontSize="12" Text="{Binding Labels[0].Value}" HorizontalTextAlignment="End" IsVisible="{Binding Labels[0].Enabled}"/>

            </ml:MycoGrid>
          </ml:MycoContainer>          
        </ViewCell>        
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

If you have a layout comprised of images and text you may find it a bit of performance boost.

It is still a work in progress, but you can find it here:

https://github.com/roceh/MycoLayout

Sign In or Register to comment.