水平的UITableView
我想实现一个布局,在我的iPad应用程序有一个可用的视图左右滚动,而不是上下滚动:
所以,而不是
第1行第2行第3行(垂直滚动)第1行第2行第3行(水平滚动)
我已经看到,UItableView被devise为只做垂直滚动,所以做一个转换不会产生预期的效果。 有没有一种标准的方式来利用像uitableview提供的数据源提供程序的优势呢?
我基本上想要做一些类似于Ipad上的BBC新闻阅读器应用程序与可供select的故事列表类似的东西。
谢谢
我已经发布了示例代码,演示了使用变换实现水平滚动表视图的一种方法。 它被称为EasyTableView,并为垂直和水平滚动表视图提供相同的界面。
这是我使用的方法:
1)实现你自己的UITableView的子类,并覆盖它的initWithCoder:
方法,如下所示:
- (id)initWithCoder:(NSCoder *)aDecoder { assert([aDecoder isKindOfClass:[NSCoder class]]); self = [super initWithCoder:aDecoder]; if (self) { const CGFloat k90DegreesCounterClockwiseAngle = (CGFloat) -(90 * M_PI / 180.0); CGRect frame = self.frame; self.transform = CGAffineTransformRotate(CGAffineTransformIdentity, k90DegreesCounterClockwiseAngle); self.frame = frame; } assert(self); return self; }
2)创build你自己的UITableViewCell类并重写initWithCoder:
再次:
- (id)initWithCoder:(NSCoder *)aDecoder { assert([aDecoder isKindOfClass:[NSCoder class]]); self = [super initWithCoder:aDecoder]; if (self) { const CGFloat k90DegreesClockwiseAngle = (CGFloat) (90 * M_PI / 180.0); self.transform = CGAffineTransformRotate(CGAffineTransformIdentity, k90DegreesClockwiseAngle); } assert(self); return self; }
3)现在,您可以在IB中创build一个UITableView元素,并将其类设置为身份检查器中的“MyHorizontalTableView”。
4)在IB中创build你的UITableViewCell元素,并在身份检查器中将其类设置为“MyHorizontalTableViewCell”。
就是这样。
如果你不想使用IB实例化你的表视图或单元格,这也可以通过重载其他初始化器来工作。
在这个概念的基础上构build的示例项目可以在GitHub中find。
如果你可以限制你的应用只有iOS 6以上,最好的方法是使用UICollectionView 。
如果你需要支持iOS 4/5,那么尝试一下UICollectionView的开源重新实现,例如。 PSTCollectionView
这个问题已经被苹果回答了 。 通过苹果滚动示例
演示如何实现两种不同风格的UIScrollViews。 第一个滚动包含多个图像,显示如何用多个数据块(在我们的例子中是5个单独的UIImageView)来布局大型内容。
这也适用于iPad。
现在你必须使用UIScrollView并将滚动设置为水平方向。 至于你需要处理的数据你自己的出库和优化。 如果你不期望超过十几个对象,那么你可以跳过它,但是如果它们是数据密集型的,试着实现一个与UITableView类似的数据采集和加载。 请注意,英国广播公司新闻阅读器应用程序还使用分页启用每个'页面(4左右新闻图标)滚动“。
我写了一个简单的UIScrollView子类,就像UITableView实现了单元的可重用性, proHMMHorizontalListView在gitHub上,还有一个testing项目,所以你可以看到如何使用它的例子,它也适用于旧的iOS版本,如4.x (可能更老…)
让UITableView能够完美地进行垂直和水平滚动是一个简单的绝妙的技巧。
你可以做和无自动布局 – 我会用自动布局解释它。
在你UITableView有一个宽度约束,没有尾随alignment约束。 将此宽度约束与IBOutlet绑定,并在您的控制器中将下列属性设置为表视图上的属性。
let contentWidth = 1000 // you calculate that tableViewWidthConstraint.constant = contentWidth tableView.contentSize.width = (contentWidth * 2) - UIScreen.main.bounds.size.width
tableview需要全宽来呈现水平方向上的所有内容,而我们使用内容大小与屏幕大小进行比较。
他们下面的工作地点如下,但您可以尝试在生命周期的不同步骤:
override func viewWillAppear(_ animated: Bool) { super.viewWillAppear(animated) tableViewWidthConstraint.constant = contentWidth } override func viewDidAppear(_ animated: Bool) { super.viewDidAppear(animated) tableView.contentSize.width = (contentWidth * 2) - UIScreen.main.bounds.size.width } // and this is needed to support rotation: override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { coordinator.animate(alongsideTransition: { (UIViewControllerTransitionCoordinatorContext) -> Void in self.tableView.contentSize.width = (contentWidth * 2) - UIScreen.main.bounds.size.width }, completion: nil) } super.viewWillTransition(to: size, with: coordinator) }