如何在 Xamarin 表单中创建边缘褪色的滚动视图？ (Xamarin.ios)答案

【问题标题】：How to create scrollview with fading edges in Xamarin forms? (Xamarin.ios)如何在 Xamarin 表单中创建边缘褪色的滚动视图？ (Xamarin.ios)
【发布时间】：2019-09-19 21:32:29
【问题描述】：

我已经有一个用于滚动视图的自定义渲染器，它将在 Xamarin.android 上创建褪色边缘。所以我现在的问题是我在 iOS 上的渲染器无法正常工作。这是我所拥有的：

    using System;
using CoreAnimation;
using CoreGraphics;
using Foundation;
using Omregistrering.CustomControls;
using Omregistrering.iOS.Renderers;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(FadeScrollView), typeof(FadeScrollViewRenderer))]
namespace Omregistrering.iOS.Renderers
{
   public class FadeScrollViewRenderer : ScrollViewRenderer
   {
       private CAGradientLayer gradientLayer;
       private Double FadePercentage = 0.2;
       private CGColor OpaqueColor = UIColor.Black.CGColor;
       protected override void OnElementChanged(VisualElementChangedEventArgs e)
       {
           base.OnElementChanged(e);
           //UpdateScrollView();
       }
       public override void ScrollRectToVisible(CGRect rect, bool animated)
       {
           base.ScrollRectToVisible(rect, animated);
       }
       private void UpdateScrollView()
       {
           // test with Bounces
           ContentInset = new UIKit.UIEdgeInsets(0, 0, 0, 0);
           if (UIDevice.CurrentDevice.CheckSystemVersion(11, 0))
               ContentInsetAdjustmentBehavior = UIKit.UIScrollViewContentInsetAdjustmentBehavior.Never;
           Bounces = false;
           ScrollIndicatorInsets = new UIKit.UIEdgeInsets(0, 0, 0, 0);
       }
       private CGColor topOpacity()
       {
           var scrollViewHeight = Frame.Size.Height;
           var scrollContentSizeHeight = ContentSize.Height;
           var scrollOffset = ContentOffset.Y;
           nfloat alpha = (scrollViewHeight >= scrollContentSizeHeight || scrollOffset <= 0) ? 1 : 0;
           var color = new UIColor(white: 0, alpha: alpha);
           return color.CGColor;
       }
       private CGColor bottomOpacity()
       {
           var scrollViewHeight = Frame.Size.Height;
           var scrollContentSizeHeight = ContentSize.Height;
           var scrollOffset = ContentOffset.Y;
           nfloat alpha = (scrollViewHeight >= scrollContentSizeHeight || scrollOffset + scrollViewHeight >= scrollContentSizeHeight) ? 1 : 0;
           var color = new UIColor(white: 0, alpha: alpha);
           return color.CGColor;
       }
       public override void Draw(CGRect rect)
       {
           base.Draw(rect);
           gradientLayer = new CAGradientLayer();
           gradientLayer.Frame = rect;
           var maskLayer = new CALayer();
           gradientLayer.Colors = new CGColor[] { topOpacity(), OpaqueColor, OpaqueColor, bottomOpacity() };
           gradientLayer.Locations = new NSNumber[] { 0, (NSNumber)FadePercentage, (NSNumber)(1 - FadePercentage), 1 };
           maskLayer.AddSublayer(gradientLayer);
           this.Layer.Mask = maskLayer;
       }
   }
}

结果是这样的：

渲染器在底部边缘褪色，但没有以任何方式更新。当然，ideer 在上下滚动时也会有褪色的边缘。

这是来自 android 的屏幕截图，我们处于滚动的中间，并且两个边缘都在褪色，给人一种内容更多的错觉。任何有解决方案或在 Xamarin.ios 上完成此操作的人谢谢

【问题讨论】：

你好，能不能给个安卓的截图，这样我就清楚想要的效果了。
好点。我已经用 android 部分的屏幕截图更新了我的问题。褪色边缘给人以更多内容的错觉。
感谢您更新问题。是否要在顶部和底部保持模糊？
只有在滚动位置不在结束位置时才会发生模糊。这意味着如果滚动视图不适合屏幕（内容在屏幕下方继续），则顶部位置的滚动应该在顶部没有模糊但在底部模糊。底部相反。添加的屏幕截图（android）显示了中间位置，我们在屏幕上方和下方都有内容。
好吧，明白了。如果有解决方案会在这里分享。

标签： xamarin.forms xamarin.ios custom-renderer

【解决方案1】：

我认为您在这里不需要渲染器。对于每个边缘，您可以使用两个渐变为透明的 png。然后通过ScrollView.Scrolled 事件，您可以知道您是否到达了滚动视图的顶部或底部。这样做，您可以根据与边缘的距离来设置 2 张图像的不透明度。

在下面的例子中，我们只考虑底部：

private void OnScrolled(object sender, ScrolledEventArgs e)
{
    MyScrollView scrollView = sender as MyScrollView;
    double scrollingSpace = scrollView.ContentSize.Height - scrollView.Height;

    MyBottomImage.Opacity = 1 - e.ScrollY/scrollingSpace;
}

我希望你明白:)

【讨论】：