时间戳

首页 > 解决方案 > 如何在 Xamarin 表单中创建边缘褪色的滚动视图？(Xamarin.ios)

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

问题描述

我已经有一个用于滚动视图的自定义渲染器，它将在 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 上执行此操作的人谢谢

标签： xamarin.formsxamarin.ioscustom-renderer

解决方案

我认为您在这里不需要渲染器。对于每个边缘，您可以使用两个渐变为透明的 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;
}

我希望你能明白：）

推荐阅读