회전식 효과가 적용된 배경 이미지

Question

전체 화면 배경 이미지와 그 위에 몇 가지 UI 요소가 포함 된 레이아웃을 만들고 싶습니다. 이 비틀기는 다음과 같습니다.

배경 이미지를 회전식 슬라이드처럼 스 와이프 할 수 있지만 UI 요소를 그대로 유지하고 싶습니다. 즉, 화면을 스 와이프하면 배경 이미지가 옆으로 밀려 야하고 새 이미지로 대체해야합니다. 나는 CarouselPage에 대해 알고 있지만, Page은 UI 요소가 CarouselPage의 하위 항목이 될 것이므로 애니메이션으로 처리된다는 의미로 스 와이프에서 바뀌는 하나의 하위 항목 만 가질 수 있기 때문에 트릭을 수행하지 않는다고 생각됩니다. .

저는 여기에 맞춤 렌더러가 필요하다고 생각합니다.하지만 어떻게 설계해야합니까? 그것은 하나의 전체 화면이어야합니까? 이미지 컨트롤은 UI 요소가 위에있는 다른 전체 화면 이미지 컨트롤로 대체됩니까? 어떻게해야합니까? 아니면 모두 함께 더 나은 접근법이 있습니까?

저는 Xamarin.Forms를 사용하여 iOS 및 Android 용으로 개발 중입니다.

미리 감사드립니다.

Answer 1

나는 repeating myself을별로 좋아하지 않지만 실용적인 항목이 여러 층 있으면 혼란을 겪을 수 있지만 문제는 내게 매력적이며 이런 종류의 UI에 대한 틈새를 볼 수 있으므로 여기에 문제.

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); 
    } 
} 

이 테스트되고

는 이제이 사용자 정의 회전 목마 배경으로 렌더링 할 ( Xamarin.Forms.) Page 가정하자 공장. UIPageControl (점)을 추가하는 것이 쉽습니다. 백그라운드의 자동 스크롤 역시 사소합니다.

프로세스가 Android에서 비슷하지만 무시가 약간 다릅니다.