带旋转木马效果的背景图像

Question

我想创建一个带有全屏幕背景图像和一些UI元素的布局。扭曲是这样的：

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

我猜我在这里需要某种自定义渲染器，但我应该如何去设计它？它应该是一个全屏图像控制取而代之的是另一个全屏图像控制的UI元素的顶部？我该怎么做？还是有一个更好的方法？

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

在此先感谢。

Answer 1

我不喜欢repeating myself很多，我认为多层可操作的项目可能会导致混淆，但这些问题吸引了我，并且我可以看到这种用户界面的利基，所以这里是我对你的看法题。

假设这是你要使用自定义转盘背景渲染（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上的过程类似，覆盖有点不同。