将 UIView 添加到 ScrollView 以进行分页

Posted

技术标签:

【中文标题】将 UIView 添加到 ScrollView 以进行分页【英文标题】:Add a UIView to a ScrollView for paging 【发布时间】:2015-09-03 02:09:32 【问题描述】:

我怎样才能让UIScollView 内容成为来自UIView 的内容?我想在UIView 中设计应用程序布局,然后将该视图放入连接到UIPageControlUIScrollView 中以进行分页。因此,当用户向一侧滑动时,会显示下一个视图。我对如何实现这一点有一些想法,但我想在不浪费大量时间的情况下把它做好。

这是我的 DetailViewController:

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;

using UIKit;
using Foundation;
using CoreGraphics;
using CloudKit;

namespace RecordStorePro

    public partial class DetailViewController : UIViewController
    
        public Record DetailRecord  get; set; 

        public DetailViewController (IntPtr handle) : base (handle)
        
        

        public void SetDetailRecord (Record record)
        
            if (DetailRecord != record) 
                DetailRecord = record;

                // Update the view
                ConfigureView ();
            
        

        void ConfigureView ()
        
            // Update the user interface for the detail item
            if (IsViewLoaded && DetailRecord != null) 
                //label.Text = DetailRecord.Album;
            
        

        public override void ViewDidLoad ()
        
            base.ViewDidLoad ();
            // Perform any additional setup after loading the view, typically from a nib.

            NavigationItem.SetLeftBarButtonItem (new UIBarButtonItem(UIBarButtonSystemItem.Stop, (sender, args) => 
                NavigationController.PopViewController(true);
            ), true);

            ConfigureView ();

            //this.scrollview.BackgroundColor = UIColor.Gray;

            // set pages and content size
            scrollview.ContentSize = new SizeF ((float)(scrollview.Frame.Width * 2), (float)(scrollview.Frame.Height));
            //this.scrollview.AddSubview ();

            this.scrollview.Scrolled += ScrollEvent;
        

        private void ScrollEvent(object sender, EventArgs e)
        
            this.pagecontrol.CurrentPage = (int)System.Math.Floor(scrollview.ContentOffset.X / this.scrollview.Frame.Size.Width);
        

        public override void DidReceiveMemoryWarning ()
        
            base.DidReceiveMemoryWarning ();
            // Release any cached data, images, etc that aren't in use.
        
    

所以当我滑动屏幕时,我想要一个包含一些标签和文本字段的子视图进来并替换原始标签和文本字段。到目前为止它工作正常,只是我不知道如何添加子视图,并使其大小适合不同的屏幕尺寸。

编辑

这是我现在面临的问题,放置在 ScrollView 中的视图看起来很有趣,而且大约 44f 太高了,所以它们让我上下拖动。我尝试设置各种约束,并在没有帮助的情况下手动将它们设置为 -44 小。这是现在问题的图片:

这是我的约束集的屏幕截图。

视图 A:

视图 B:

滚动视图:

笔尖视图:

【问题讨论】:

你能告诉我们你尝试了什么以及真正想要做什么吗?? @SubhashSharma 我更新了我的问题,希望它现在更有意义。 【参考方案1】:

为此,您可能需要尝试以下步骤:

    显示第一页的视图将被称为 View A。显示第二页的视图将被称为 View B。 将两个视图都添加到滚动视图中。 Control - 从视图 A 拖动到侧边栏中的滚动视图。 按住 Shift 并选择 Top Space to SuperviewBottom Space to SuperviewLeading Space to Superview。接下来,按 Return 添加这些约束。 确保将这些约束的常量设置为 0Control - 从视图 B 拖动到侧边栏中的滚动视图。 按住 Shift 并选择 Top Space to SuperviewBottom Space to SuperviewTrailing Space to Superview。接下来,按 Return 添加这些约束。 Control - 从侧边栏中的视图 A 拖动到视图 B。 选择Horizontal Spacing。确保其常量为0,其Second ItemView A.Trailing,其First ItemView B.LeadingControl - 从侧边栏中的视图 A 拖动到视图 B。选择Equal Widths。确保常量为0Control - 从视图 A 拖动到侧边栏中的滚动视图。选择Equal Widths。确保常量设置为0。 在检查器中,选中“启用分页”。

【讨论】:

那么我该如何添加我所有的标签和内容呢?添加视图后我会这样做吗?还是之前? 可能之后。但是,如果您已经在包含视图或视图控制器中拥有内容视图,则可以将其放入。 约束还能正常工作吗? 如果约束不引用包含视图之外的视图,它们仍然可以工作。否则它们会消失。 好的,所以我遵循了所有步骤,现在当我在模拟器中运行它时,我没有得到任何显示。我将 View A BG 颜色更改为蓝色,将 B 更改为红色,这样我就可以分辨出区别,但都没有显示出来。【参考方案2】:

向每个页面添加不带 pagingEnabled 的 subScrollView 并将控件添加到 subScrollView 中有效!如果您在启用分页的情况下直接将控件添加到滚动视图,则手势识别器的第一响应者似乎始终是滚动​​视图,因此您的控件永远不会收到事件并且表现得像禁用了!

UIScrollView 有一个名为“pagingEnabled”的属性

在 Interface Builder 中,调整滚动视图的大小以在其下方留出一些空间用于页面控件。接下来,从库中拖入一个 UIPageControl,在滚动视图下方居中。调整 UIPageControl 的大小以占据视图的整个宽度。

【讨论】:

我已经有了那个设置,现在我需要添加我所有的内容,比如标签、图像和设计,但我不想在代码中添加它们,但如果需要的话只添加一点。我更喜欢在界面生成器中进行布局。

以上是关于将 UIView 添加到 ScrollView 以进行分页的主要内容,如果未能解决你的问题,请参考以下文章

将滚动视图添加到 UIView

除非我添加另一个 UIView,否则 ScrollView 中的 TableView 为空?

添加到 ScrollView 的 UIView 不适合全屏,顶部有导航栏

添加为子视图后,ScrollView 不会滚动

使用 2 个自定义视图将 ScrollView 添加到 ViewController

Swift 将 UIView 粘贴到 ScrollView 的顶部并使其固定