UIScrollView中的Autolayouts使用Cirrious.FluentLayouts.Touch

时间:2015-05-21 14:57:02

标签: ios uiscrollview xamarin xamarin.ios

我在scrollView中使用自动布局执行ViewController,但这里有一些问题:

public SomeVC() : UIViewController
    {
        _mainScrollView = new UIScrollView {
            ShowsHorizontalScrollIndicator = false,
            ShowsVerticalScrollIndicator = true,
            BackgroundColor = UIColor.Clear,
            ScrollEnabled = true,
            AutoresizingMask = UIViewAutoresizing.FlexibleHeight,
            TranslatesAutoresizingMaskIntoConstraints = true
        };

        _userDataTableView = new UITableView(CGRect.Empty, UITableViewStyle.Grouped);
        _userDataTableView.LayoutIfNeeded();

        _saveButton = new UIButton();

        _menuTableView = new UITableView(CGRect.Empty, UITableViewStyle.Grouped);
        _menuTableView.LayoutIfNeeded();

        _logoutButton = new UIButton();
    }

    public override void LoadView()
    {
        base.LoadView();
        View = _mainScrollView;
    }

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();

        Add(_userDataTableView);
        Add(_saveButton);
        Add(_menuTableView);
        Add(_logoutButton);

        _mainScrollView.AddConstraints(
            _userDataTableView.AtTopOf(View),
            _userDataTableView.AtLeftOf(View),
            _userDataTableView.AtRightOf(View),
            _userDataTableView.Height().EqualTo(_userDataTableView.ContentSize.Height),

            _saveButton.Below(_userDataTableView, 20),
            _saveButton.AtLeftOf(_mainScrollView, 10),
            _saveButton.AtRightOf(_mainScrollView, 10),
            _saveButton.Height().EqualTo(44),

            _menuTableView.Below(_saveButton, 20),
            _menuTableView.AtLeftOf(_mainScrollView),
            _menuTableView.AtRightOf(_mainScrollView),
            _menuTableView.Height().EqualTo(_menuTableView.ContentSize.Height),

            _logoutButton.Below(_menuTableView, 20),
            _logoutButton.AtLeftOf(_mainScrollView, 10),
            _logoutButton.AtRightOf(_mainScrollView, 10),
            _logoutButton.Height().EqualTo(44)
        );
        _mainScrollView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
    }

实际上,它有效,但内容宽度约为屏幕宽度的一半,滚动不起作用。如何使它有效?

据我了解,问题是--_mainScrollView.ContentSize,但是在使用自动布局时我应该如何设置它?

2 个答案:

答案 0 :(得分:1)

如果您的观看次数没有超出屏幕,您将无法滚动。如果你只有这样的东西:

// Create containers
            contentView = new UIView();
            scrollView = new UIScrollView { contentView };
            Add(scrollView);


            contentView.AddSubviews(logo, user, password, loginButton);


            // Auto layout
            View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
            View.AddConstraints(scrollView.FullWidthOf(View));
            View.AddConstraints(scrollView.FullHeightOf(View));
            View.AddConstraints(
                contentView.WithSameWidth(View),
                contentView.WithSameHeight(View).SetPriority(UILayoutPriority.DefaultLow)
            );

            scrollView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
            scrollView.AddConstraints(contentView.FullWidthOf(scrollView));
            scrollView.AddConstraints(contentView.FullHeightOf(scrollView));

            // very important to make scrolling work
            var bottomViewConstraint = contentView.Subviews.Last()
                .AtBottomOf(contentView).Minus(20);

            contentView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();

            contentView.AddConstraints(
                  logo.AtTopOf(contentView),
                   logo.WithRelativeWidth(contentView, 0.8f),

                   logo.WithSameCenterX(contentView),
                   logo.WithRelativeHeight(contentView, 0.3f),

                   user.Below(logo, 50),
                   user.WithRelativeWidth(logo, 0.8f),
                   user.WithSameCenterX(logo),

                   password.Below(user),
                   password.WithSameWidth(user),
                   password.WithSameCenterX(user),

                   loginButton.Below(password, 50),
                   loginButton.WithRelativeWidth(password, 0.9f),
                   loginButton.Height().EqualTo(50),
                   loginButton.WithSameCenterX(password)
               );

            contentView.AddConstraints(bottomViewConstraint);

        }

我正在使用这个包,它的效果非常好,就像我在xamarin.forms中的scrollview中使用stackLayout一样。我认为这是完美的行为。

Xamarin.IQKeyboardManager from Nuget

此外,如果您想将内容视图置于滚动视图中心,则需要添加以下内容:

public override void ViewWillLayoutSubviews()
        {
            base.ViewWillLayoutSubviews();

            var scrollViewBounds = scrollView.Bounds;
            var containerViewBounds = contentView.Bounds;

            var scrollViewInsets = UIEdgeInsets.Zero;
            scrollViewInsets.Top = scrollViewBounds.Size.Height / 2.0f;
            scrollViewInsets.Top -= contentView.Bounds.Size.Height / 2.0f;

            scrollViewInsets.Bottom = scrollViewBounds.Size.Height / 2.0f;
            scrollViewInsets.Bottom -= contentView.Bounds.Size.Height / 2.0f;
            scrollViewInsets.Bottom += 1;

            scrollView.ContentInset = scrollViewInsets;
        }

这就是全部,与您的contentView无关。您将在滚动视图和管理器中拥有一个居中的contetnview,以捕获键盘事件并使您的视图适应此事件。

答案 1 :(得分:0)

发现解决方案: 首先:

        _userDataTableView.AtLeftOf(View),
        _userDataTableView.AtRightOf(View),

无效,我们应该使用:

而不是这个
        _userDataTableView.AtLeftOf(View),
        _userDataTableView.WithSameWidth(View),

如果我们想要保证金,我们只需添加

        _userDataTableView.WithSameWidth(View).Minus(MARGIN)

我们要做的最后一件事:

        _logoutButton.Height().EqualTo(44), 
        _logoutButton.Bottom().EqualTo().BottomOf(_mainScrollView).Plus(10)

最后一行非常重要。它说滚动查看正确的内容大小。