Animating Xamarin.Forms ViewCell causes scaling issues and slow performance on iOS
#4,012 opened on 2018/10/05
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
