xamarin/Xamarin.Forms

Animating Xamarin.Forms ViewCell causes scaling issues and slow performance on iOS

オープン

#4,012 opened on 2018/10/05

 (4 件のコメント) (0 件のリアクション) (0 人の担当者)C# (1,926 件のフォーク)batch import
a/listviewa/performancee/5 :clock5:excellent-reporthelp wantedinactivep/iOS 🍎t/bug :bug:up-for-grabs

Repository metrics

Stars
 (5,644 個のスター)
PR merge metrics
 (30d に merged PR はありません)

説明

Description

I am currently trying to animate a ViewCell inside a ListView so it expands and collapses once it gets Tapped. The logic behind this works fine, but there seem to be issues with the iOS ListView that I am unable to figure out. The implementation is currently done in the shared code and not platform specific.

Steps to Reproduce

The ViewCell itself contains two subviews:

<?xml version="1.0" encoding="UTF-8"?>
<ViewCell xmlns="http://xamarin.com/schemas/2014/forms"
          xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
          x:Class="com.example.CollapsableCell"
          Appearing="OnAppearing">
    <Frame x:Name="CollapsableFrame" CornerRadius="5" HasShadow="true" Margin="5" BorderColor="Gray" OutlineColor="Gray">
        <Grid>
            <Grid x:Name="CollapsableContent" />
        </Grid>
        <Frame.GestureRecognizers>                
            <TapGestureRecognizer Tapped="OnTapped" />
        </Frame.GestureRecognizers>
    </Frame>
</ViewCell>

The method for switching between the collapsed and expanded views looks like this:

protected void OnTapped(object sender, EventArgs args)
    {
        Debug.WriteLine("OnTapped");
        if (_isExpanded) // collapse the ViewCell
        {
            CollapsableFrame.LayoutTo(_collapsedBounds, 500, Easing.CubicIn);
            ForceUpdateSize();
            CollapsableFrame.BackgroundColor = _collapsedView.BackgroundColor;
            _collapsedView.RotationY = -270.0;
            _expandedView.RotateYTo(-90.0, 250, Easing.SinIn);
            _expandedView.IsVisible = false;
            _collapsedView.IsVisible = true;
            _collapsedView.RotateYTo(-360.0, 250, Easing.SinOut);
            _collapsedView.RotationY = 0.0;
            _isExpanded = false;
        }
        else // Expand the ViewCell
        {
            CollapsableFrame.LayoutTo(_expandedBounds, 500, Easing.CubicOut);
            ForceUpdateSize();
            CollapsableFrame.BackgroundColor = _expandedView.BackgroundColor;
            _expandedView.RotationY = -270.0;
            _collapsedView.RotateYTo(-90.0, 250, Easing.SinIn);
            _collapsedView.IsVisible = false;
            _expandedView.IsVisible = true;
            _expandedView.RotateYTo(-360.0, 250, Easing.SinOut);
            _expandedView.RotationY = 0.0;
            _isExpanded = true;
        }
    }

The _collapsedView and _expandedView are private members that are set via properties and are child objects to CollapsableContent.

Expected Behavior

The animations perform the same on iOS and Android.

Actual Behavior

On Android this works perfect, on iOS the scaling of the CollapsableFrame never works properly (the content extends over the Frames bounds) and in addition after executing the animation a few times the animation gets stuck and freezes the whole application. I already tried to strip the animation down to only the scaling of the CollapsableFrame, but the issue stays the same.

Basic Information

  • Version with issue: Xamarin.Forms 3.1.0.697729 - 3.2.0.871581
  • Last known good version:
  • IDE: Visual Studio for Mac 7.6 (build 2190) - 7.6.8 (build 38)
  • Platform Target Frameworks:
    • iOS: 11.4 - 12.0
    • Android: 8.1
  • Android Support Library Version: 27.0.2.1
  • Nuget Packages:
  • Affected Devices: iPhone 6, iPhone X, iOS Simulator

Screenshots

ios-initial-list ios-item-expanded ios-transition-aftersomeclicks

コントリビューターガイド