如何在 Xamarin Forms iOS 中淡出滚动视图的内容？答案

【问题标题】：How do I fade out the contents of a scrollview in Xamarin Forms iOS?如何在 Xamarin Forms iOS 中淡出滚动视图的内容？
【发布时间】：2021-08-20 15:30:27
【问题描述】：

我在 android 上构建了一个自定义滚动视图渲染器，它会在底部淡出我的文本。

我如何为 iOS 做同样的事情？我想不通。我知道如何实现渲染器，但不知道如何让它褪色

我在我的 xamarin 主项目中添加了一个空的 FadeScrollView 类。

public class FadeScrollView : ScrollView
{

}

然后我将这个滚动视图渲染器加载到我的 xaml 页面中。

<ContentPage ...
             xmlns:customRenders="clr-namespace:MyNameSpace;assembly=MyNameSpace"
             >
    ...
    <customRenderers:FadeScrollView>
        ....
    </FadeScrollView>

</ContentPage>

然后我为 android 设置了以下自定义渲染器

[assembly: ExportRenderer(typeof(FadeScrollView), typeof(FadeScrollViewRendererAndroid))]
namespace MyNameSpace
{
    public class FadeScrollViewRendererAndroid : ScrollViewRenderer
    {
        public FadeScrollViewRendererAndroid(Context context) : base(context)
        {
            this.SetFadingEdgeLength(300);
            this.VerticalFadingEdgeEnabled = true;
        }
    }
}

这会产生预期的结果：

现在我以类似的方式设置了我的 iOS 渲染器，但我不确定如何实现淡入淡出效果，当我四处搜索时，我只发现有人向您展示如何快速完成此操作

[assembly: ExportRenderer(typeof(FadeScrollView), typeof(FadeScrollViewRendererIOS))]
namespace MyNameSpace
{
    class FadeScrollViewRendererIOS : UIScrollView
    {
        public FadeScrollViewRendererIOS()
        {
            //fade out 
        }
    }
}

【问题讨论】：

只需在 ScrollView 上添加一个渐变视图？
这会起作用，但最好我只想在列表实际可滚动时显示截止效果。如果我添加固定透明度，适合滚动视图的文本也会被截断。

标签： ios forms xamarin xamarin.forms uiscrollview

【解决方案1】：

iOS 好像没有提供类似VerticalFadingEdgeEnabled in Android 的 api。

我们可以在带有渐变层的自定义渲染器中实现这一点。

试试下面的代码。

[assembly: ExportRenderer(typeof(ScrollView), typeof(MyRenderer))]
namespace FormsApp.iOS
{

    class MyRenderer : ScrollViewRenderer
    {

        public override void LayoutSubviews()
        {
            base.LayoutSubviews();

            gradient.Frame = this.Bounds;
        }

        CAGradientLayer gradient = new CAGradientLayer();
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);


            if(e.NewElement != null)
            {
                gradient.Frame = this.Bounds;
                gradient.Colors = new CGColor[] {UIColor.Clear.CGColor, UIColor.Black.CGColor,
                    UIColor.Black.CGColor, UIColor.Clear.CGColor };
                gradient.Locations = new NSNumber[] {0.0,0.0,0.7,1 };
                Layer.Mask = gradient;

                this.Scrolled += (sender,ee)=> {

                    gradient.Frame = new CGRect(0, ContentOffset.Y, Bounds.Width, Bounds.Height);

                    if (ContentOffset.Y >= ContentSize.Height - Bounds.Height)
                    {
                        Layer.Mask = null;
                    }
                    else
                    {
                        Layer.Mask = gradient;
                    }
                };
            }
      
        }
    }
}

【讨论】：