为啥这两种轮换方法会给我不同的用户体验?

Posted

技术标签:

【中文标题】为啥这两种轮换方法会给我不同的用户体验?【英文标题】:Why are these two approaches to rotation giving me different UX?为什么这两种轮换方法会给我不同的用户体验? 【发布时间】:2016-03-10 11:30:24 【问题描述】:

我实现了UIPageViewController 的自定义子类,它正在分页另一个自定义 UIViewController 子类的几个实例。很标准。我没有也不能使用自动布局。

我想在这两种情况下支持轮换

ALL 当应用程序中允许所有屏幕方向时 仅当应用中只允许纵向时才使用纵向。

当允许所有方向时,一切都会完美运行。由于旋转实际上是窗口上的变换,所以我在分页控制器中的所有自定义分页控制器都很好地“旋转”(它们只是有效地调整到新的边界),我正在利用 viewWillTransitionToSize 并且我正在做一些自定义布局通过动画旁边的子视图。很漂亮。

第二个 PORTRAIT ONLY 案例表现得不那么漂亮。由于在这种情况下不支持旋转,我正在收听UIDeviceOrientationDidChangeNotification 通知并手动旋转根视图。

我只是使用 UIView.animateWithDuration... 并将仿射变换应用于 PagingController 的根视图。

        UIView.animateWithDuration(0.3, delay: 0, options: UIViewAnimationOptions.CurveLinear, animations:  () -> Void in

        self.view.transform = self.rotationTransform()
        self.view.bounds = self.rotationAdjustedBounds()

        )
         finished  in
    

转换实际上是一个 CGAffineTransformMakeRotation 调用。没什么特别的。 self 是分页控制器。

它可以工作,但由于某种原因,旋转非常难看,看起来锚点是天知道在哪里,并且不尊重某些子视图的自动调整大小的蒙版。这没有任何意义,因为布局是以一致的方式完成的,证明是在 ALL 情况下的旋转,一切都完美地调整为旋转。

我不能使用一种方法,即允许全局旋转,然后在除此控制器之外的任何地方进行纵向显示。该应用程序很大,非技术原因是不可能的,利益相关者根本不允许我这样做。

我的问题是 - 考虑到这些限制,你能否推荐一种更好的方法 -> 使用手动轮换收听通知?

【问题讨论】:

> 我没有也不能使用自动布局。 :( 【参考方案1】:

我解决了这个问题,让其他人知道以供参考很有趣。 我必须改变两件事:

1) 在动画方法中触发布局传递

UIView.animateWithDuration(0.3, delay: 0, options: UIViewAnimationOptions.CurveLinear, animations:  () -> Void in

        self.view.transform = self.rotationTransform()
        self.view.bounds = self.rotationAdjustedBounds()

        self.view.setNeedsLayout()
        self.view.layoutIfNeeded()

    )

2) 修复实际布局方便方法。

请记住,我正在手动进行布局。这些布局方法都是从 viewDidLayoutSubviews 调用的,只是将代码结构化,使其更具可读性,这里没什么特别的。我犯了一个愚蠢的错误,即从其他值计算大小和框架等值......其中一些其他值是.frame 属性。但是当应用变换时 frame 是未定义的,所以我将所有这些出现改为 bounds 。

它现在的行为,即旋转方式与内置旋转完全相同。

PS:我认为它可以很好地用于内置旋转,因为没有直接应用于视图的变换。因此,在布局计算中没有(根)视图会对其自身应用变换。这就是为什么从根视图派生值仍然有效的原因。

【讨论】:

以上是关于为啥这两种轮换方法会给我不同的用户体验?的主要内容,如果未能解决你的问题,请参考以下文章

APP的用户体验检验方法

来教你如何做好用户体验

to B软件为啥用户体验不好

为啥有些用户在 AWS ElasticBeanstalk 中部署后没有体验到更新?

移动端针对图片过多时,为了提高用户体验性,常采用的两种方式

渐进式 JPEG (Progressive JPEG)来提升用户体验