UITableView上方的自定义UIView(当用户拉动刷新时)

时间:2016-02-16 21:39:16

标签: ios swift uitableview uiview refresh

对于我的iOS应用程序(swift)我正在尝试在tableView上面添加自定义UIView。当用户下拉tableView时,应用程序应该如此截图所示。

Screenshot of current status

顶部蓝色区域中的文本(“Zorneding ...”)仍然是tableView标题的一部分。文本上方的蓝色区域是UIView,我已经在TableViewController的ViewDidAppear函数中添加了它。

我用于在ViewDidAppear中添加UIView的代码如下。

    // Blue background view behind refresh control
    var frame = tableView.bounds
    frame.origin.y = -frame.size.height
    frame.size.width -= 10
    frame.origin.x += 5
    let refreshBackgroundView = UIView(frame: frame)
    refreshBackgroundView.backgroundColor = GlobalConstants.Color.ZeroBlue
    tableView.insertSubview(refreshBackgroundView, atIndex: 0)

此代码在纵向方向上运行良好。但是当将设备旋转到横向时,refreshBackgroundView当然不会改变它的大小,因此只覆盖屏幕的一部分。

我已经尝试向refreshBackgroundView添加约束,但我无法让它们正常工作。

我尝试过的另一件事是继承UIRefreshControl并在那里配置它的背景,但是当拉下tableView时,tableView头和刷新控件视图之间的小差距是可见的(tableView背景闪耀着。)

在设备旋转时如何使我的代码工作?

谢谢!

解决方案:

解决方案很简单。使用布局约束。我不知道为什么那些昨天对我不起作用。

这是新代码:

    // Add background view behind UIRefreshControl
    let refreshBackgroundView = UIView()
    refreshBackgroundView.backgroundColor = GlobalConstants.Color.ZeroBlue
    tableView.insertSubview(refreshBackgroundView, atIndex: 0)

    refreshBackgroundView.translatesAutoresizingMaskIntoConstraints = false

    NSLayoutConstraint(item: refreshBackgroundView, attribute: .Height, relatedBy: .Equal, toItem: tableView, attribute: .Height, multiplier: 1.0, constant: 0.0).active = true
    NSLayoutConstraint(item: refreshBackgroundView, attribute: .Width, relatedBy: .Equal, toItem: tableView, attribute: .Width, multiplier: 1.0, constant: -10.0).active = true
    NSLayoutConstraint(item: refreshBackgroundView, attribute: .Bottom, relatedBy: .Equal, toItem: tableView, attribute: .Top, multiplier: 1.0, constant: 0.0).active = true
    NSLayoutConstraint(item: refreshBackgroundView, attribute: .CenterX , relatedBy: .Equal, toItem: tableView, attribute: .CenterX, multiplier: 1.0, constant: 0.0).active = true

2 个答案:

答案 0 :(得分:2)

我会在Xib中使用其余的界面元素设置refreshBackgroundView。

就个人而言,我发现Xibs是设置布局约束的最佳/最直接的方法。如果你遵循这种方法,这意味着你的约束应该在横向或纵向中正常工作,没有任何附加条件。

答案 1 :(得分:1)

答案是:使用AutoLayout。

<强>故事板

您可以从故事板中添加所需的所有约束

<强> XIB

如果以编程方式加载UIView,您还可以通过编程方式添加NSLayoutConstraint。他们保证以横向模式工作。

  

......但我无法让他们工作......

查看https://stackoverflow.com/a/18759148/218152并为refreshBackgroundView身高添加约束。固定它:

// Add constraints to fit to superview, below the nav bar
UIView * hintView = self.refreshBackgroundView;
[hintView setTranslatesAutoresizingMaskIntoConstraints:NO];
[self.tableView addConstraints:[NSLayoutConstraint
                               constraintsWithVisualFormat:@"H:|-0-[hintView]-0-|"
                               options:NSLayoutFormatDirectionLeadingToTrailing
                               metrics:nil
                               views:NSDictionaryOfVariableBindings(hintView)]];

id<UILayoutSupport> guide = self.topLayoutGuide;
[self.tableView addConstraints:[NSLayoutConstraint
                               constraintsWithVisualFormat:@"V:|[guide]-0-[hintView]-0-|"
                               options:NSLayoutFormatDirectionLeadingToTrailing
                               metrics:nil
                               views:NSDictionaryOfVariableBindings(hintView, guide)]];

<强> UIRefreshControl

您应该使用UIRefreshControl来实现长期兼容性。