与转盘作用的背景图象-Java 学习之路

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

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

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

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

提前致谢 .

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上类似，覆盖有点不同 .

回复于 2024-05-14T21:10:20+08:00

与转盘作用的背景图象

1 回答

相关问题