Question

我想创建一个带有全屏背景图像的布局，并在其上面创建一些UI元素。扭曲是这样的：

我希望背景图像像旋转木马一样可以滑动，但我希望UI元素保持原位。也就是说，如果我滑动屏幕，背景图像应该滑到一边，新图像应该替换它。我知道CarouselPage，但在我看来它不会起作用，因为Page只能有一个孩子在刷卡时替换它，这意味着UI元素将成为后代CarouselPage，因此也会动画。

我猜这里需要某种自定义渲染器，但我应该如何设计呢？应该是一个全屏图像控件被替换为另一个全屏图像控件，其上面的UI元素？我怎么能这样做？或者有更好的方法吗？

我正在使用Xamarin.Forms为iOS和Android开发。

提前致谢。

Answer 1

我不太喜欢repeating myself，我认为多层可操作的项目可能导致混淆，但这些问题对我很有吸引力，我可以看到这种UI的利基，所以这是我对你问题的看法。

我们假设这是您想要使用自定义轮播背景渲染的（Xamarin.Forms.）Page：

public class FunkyPage : ContentPage
{
    public IList<string> ImagePaths { get; set; }

    public FunkyPage ()
    {
        Content = new StackLayout {
            VerticalOptions = LayoutOptions.Center,
            HorizontalOptions = LayoutOptions.Center,
            Spacing = 12,
            Children = {
                new Label { Text = "Foo" },
                new Label { Text = "Bar" },
                new Label { Text = "Baz" },
                new Label { Text = "Qux" },
            }
        };

        ImagePaths = new List<string> { "red.png", "green.png", "blue.png", "orange.png" };
    }
}

iOS的渲染器可能如下所示：

[assembly: ExportRenderer (typeof (FunkyPage), typeof (FunkyPageRenderer))]

public class FunkyPageRenderer : PageRenderer
{
    UIScrollView bgCarousel = new UIScrollView (RectangleF.Empty) {
        PagingEnabled = true,
        ScrollEnabled=true
    };
    List<UIImageView> uiimages = new List<UIImageView> ();

    protected override void OnElementChanged (VisualElementChangedEventArgs e)
    {
        foreach (var sub in uiimages)
            sub.RemoveFromSuperview ();

        uiimages.Clear ();

        if (e.NewElement != null) {
            var page = e.NewElement as FunkyPage;
            foreach (var image in page.ImagePaths) {
                var uiimage = new UIImageView (new UIImage (image));
                bgCarousel.Add (uiimage);
                uiimages.Add (uiimage);
            }
        }
        base.OnElementChanged (e);
    }

    public override void ViewDidLoad ()
    {
        Add (bgCarousel);
        base.ViewDidLoad ();
    }

    public override void ViewWillLayoutSubviews ()
    {
        base.ViewWillLayoutSubviews ();
        bgCarousel.Frame = View.Frame;
        var origin = 0f;
        foreach (var image in uiimages) {
            image.Frame = new RectangleF (origin, 0, View.Frame.Width, View.Frame.Height);
            origin += View.Frame.Width;
        }
        bgCarousel.ContentSize = new SizeF (origin, View.Frame.Height);
    }
}

这是经过测试和运作的。添加UIPageControl（点）很容易。自动滚动背景也很简单。

这个过程在Android上类似，覆盖有点不同。

与转盘作用的背景图象

1 个答案: