Фоновое изображение с эффектом карусели

Question

Я хотел бы создать макет с полноэкранным фоновым изображением и некоторыми элементами интерфейса поверх него. Твист таков:

Мне хотелось бы, чтобы фоновое изображение было прокручивается подобно карусели, но я бы хотел, чтобы элементы пользовательского интерфейса оставались на месте. То есть, если я прокручу экран, фоновое изображение должно скользить в сторону, и новое изображение должно заменить его. Я знаю о CarouselPage, но мне кажется, что он не будет делать трюк, поскольку Page может иметь только один ребенок, который он заменяет на салфетки, что означает, что элементы пользовательского интерфейса будут потомками CarouselPage и поэтому также будут анимированы ,

Я предполагаю, что мне нужен какой-то пользовательский рендерер, но как мне его спроектировать? Должен ли быть один полноэкранный Image control заменен другим полноэкранным управлением изображениями с элементами интерфейса поверх него? И как я могу это сделать? Или есть лучший подход?

Я разрабатываю для 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" }; 
    } 
} 

Отображатель для прошивки может выглядеть следующим образом:

[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, переопределения немного разные.