search

xamarin / Xamarin.Forms

Xamarin.Forms is no longer supported. Migrate your apps to .NET MAUI.
https://aka.ms/xamarin-upgrade
Other
5.63k stars 1.88k forks source link

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

Open bnoffer opened 5 years ago

bnoffer commented 5 years ago

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

Screenshots

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

kingces95 commented 5 years ago

@bnoffer We'd be willing to investigate but we'll need you to submit the reproduction for us to optimize.

bnoffer commented 5 years ago

@kingces95 Thank you for your quick response.

A project for reproduction can be found here: https://github.com/bnoffer/viewcelltest

This is the project you see the screenshots of in my original post.

In addition we also saw the same issue on a colleagues machine in a different project. Development environment is identical to mine and the issue also applies to the same Xamarin.Forms versions.

knightmeister commented 5 years ago

Hi, just adding +1 to this as well.

I am seeing enormous delays on iOS after about 6 or 8 calls to ForceUpdateSize. By way of background, we're animating the cell height to display additional controls. We call ForceUpdateSize once for each expand/contract operation.

We really need a work around for this, so we would appreciate any advice from anyone who may have solved this one?

bnoffer commented 4 years ago

I just retested this issue (see push notice above) and the issue persists even with Xamarin.Forms 4.2, here is the Visual Studio Environment information:

Visual Studio Community 2019 for Mac
Version 8.2.6 (build 26)
Installation UUID: cd0b5882-ed6d-40be-a9a8-80d9a517ba05
    GTK+ 2.24.23 (Raleigh theme)
    Xamarin.Mac 5.14.0.85 (d16-2-fix-mac-updates / 86973979)

    Package version: 600000334

Mono Framework MDK
Runtime:
    Mono 6.0.0.334 (2019-02/6256b82d62f) (64-bit)
    Package version: 600000334

NuGet
Version: 5.1.0.6013

.NET Core
Runtime: /usr/local/share/dotnet/dotnet
Runtime Versions:
    3.0.0-preview8-28405-07
    2.2.4
    2.1.9
    2.1.8
    2.1.7
    2.1.2
    2.0.5
SDK: /usr/local/share/dotnet/sdk/3.0.100-preview8-013656/Sdks
SDK Versions:
    3.0.100-preview8-013656
    2.2.203
    2.1.505
    2.1.504
    2.1.503
    2.1.302
    2.1.4
MSBuild SDKs: /Library/Frameworks/Mono.framework/Versions/6.0.0/lib/mono/msbuild/Current/bin/Sdks

Xamarin.Profiler
Version: 1.6.10
Location: /Applications/Xamarin Profiler.app/Contents/MacOS/Xamarin Profiler

Updater
Version: 11

Apple Developer Tools
Xcode 10.3 (14492.2)
Build 10G8

Xamarin.Mac
Version: 5.14.0.114 (Visual Studio Community)
Hash: c6691164
Branch: d16-2
Build date: 2019-07-29 15:54:06-0400

Xamarin.iOS
Version: 12.14.0.114 (Visual Studio Community)
Hash: c6691164
Branch: d16-2
Build date: 2019-07-29 15:54:05-0400

Xamarin Designer
Version: 16.2.0.379
Hash: 3f0652957
Branch: remotes/origin/d16-2
Build date: 2019-08-01 17:32:50 UTC

Xamarin.Android
Version: 9.4.1.0 (Visual Studio Community)
Commit: xamarin-android/d16-2/ebd65c9
Android SDK: /Users/ban/Library/Developer/Xamarin/android-sdk-macosx
    Supported Android versions:
        6.0 (API level 23)
        7.0 (API level 24)
        8.0 (API level 26)
        8.1 (API level 27)

SDK Tools Version: 26.1.1
SDK Platform Tools Version: 29.0.1
SDK Build Tools Version: 29.0.1

Build Information: 
Mono: mono/mono/2019-02@e6f5369c2d2
Java.Interop: xamarin/java.interop/d16-2@d64ada5
LibZipSharp: grendello/LibZipSharp/d16-2@caa0c74
LibZip: nih-at/libzip/rel-1-5-1@b95cf3f
ProGuard: xamarin/proguard/master@905836d
SQLite: xamarin/sqlite/3.27.1@8212a2d
Xamarin.Android Tools: xamarin/xamarin-android-tools/d16-2@6f6c969

Microsoft Mobile OpenJDK
Java SDK: /Users/ban/Library/Developer/Xamarin/jdk/microsoft_dist_openjdk_8.0.25
1.8.0-25
Android Designer EPL code available here:
https://github.com/xamarin/AndroidDesigner.EPL

Android Device Manager
Version: 1.2.0.60
Hash: 686c817
Branch: remotes/origin/d16-2
Build date: 2019-08-07 15:49:58 UTC

Xamarin Inspector
Version: 1.4.3
Hash: db27525
Branch: 1.4-release
Build date: Mon, 09 Jul 2018 21:20:18 GMT
Client compatibility: 1

Build Information
Release ID: 802060026
Git revision: a4ea4d00345f4d98a95bd2322b1d04935eb553e1
Build date: 2019-09-05 18:24:25+00
Build branch: release-8.2
Xamarin extensions: 366997b587d63360705507e281ae75025762cadf

Operating System
Mac OS X 10.14.6
Darwin 18.7.0 Darwin Kernel Version 18.7.0
    Tue Aug 20 16:57:14 PDT 2019
    root:xnu-4903.271.2~2/RELEASE_X86_64 x86_64