UITableView上方的自定义UIView(用户拉动刷新时)
Posted
技术标签:
【中文标题】UITableView上方的自定义UIView(用户拉动刷新时)【英文标题】:Custom UIView above UITableView (when user pulls to refresh) 【发布时间】:2016-05-28 09:06:10 【问题描述】:对于我的 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
【问题讨论】:
【参考方案1】:答案是:使用 AutoLayout。
故事板
您可以从情节提要中添加您需要的所有约束
XIB
如果以编程方式加载UIView
,您还可以以编程方式添加NSLayoutConstraint
。它们保证可以在横向模式下工作。
...但我无法让它们工作...
查看https://***.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
以获得长期兼容性。
【讨论】:
谢谢!我真的不知道为什么约束昨天对我不起作用。我收到了一些关于视图层次结构的奇怪错误消息,这些消息尚不可用,因此无法使用约束。无论如何,今天尝试添加约束时,一切都运行良好。顺便说一句,我当然在使用 UIRefreshControl 的功能。我只是想自定义刷新控件的视觉外观 - 我无法在 UIRefreshControl 类中以我想要的方式自定义它。 太棒了。您是否有任何机会以编程方式添加NSLayoutConstraint
,在这种情况下顺序很重要?见***.com/a/31578984/218152
你是我今天的英雄!这正是发生的事情。我已经使用addConstraint
添加了约束-显然我已经将它们添加到了错误的视图中。今天重新编写代码时,我使用了.active = true
,它会自动将它们添加到正确的视图中。我应该更详细地阅读 UIView 文档。谢谢一百万!【参考方案2】:
我会在带有其余界面元素的 Xib 中设置 refreshBackgroundView。
就我个人而言,我发现 Xibs 是设置布局约束的最佳/最直接的方式。如果您采用这种方法,则意味着您的约束在横向或纵向都可以正常工作,而无需附加任何附加条件。
【讨论】:
谢谢!很遗憾,由于声誉分数太低,我无法对您的答案进行投票。以上是关于UITableView上方的自定义UIView(用户拉动刷新时)的主要内容,如果未能解决你的问题,请参考以下文章
UITableViewCell 中的自定义 UIView 中的 CAGradientLayer 问题