【问题标题】:Auto Layout proportionally Scaling Views自动布局按比例缩放视图
【发布时间】:2015-06-16 04:58:04
【问题描述】:

我已经找到了几个关于这个主题的问题和答案,但我根本无法让它为我工作。

蓝色矩形是一个 UIView,其中包含测试标签和齿轮图像按钮。红色的是第二个 UIView。

我想要做的是让蓝色条(这是一个 UIView)的尺寸增加以适应更大尺寸的屏幕,这将导致标签和设置按钮的缩放,而红色 UIView 的高度缩小所以蓝色的 UIView 可以变大。所以基本上问题是,如何为不同的屏幕尺寸按比例缩放 UIView。

我尝试过使用纵横比约束、高度约束(大于/小于),但我无法获得想要的效果。

谢谢。

【问题讨论】:

    标签: ios xamarin xamarin.ios interface-builder autolayout


    【解决方案1】:

    你有两种方法可以做到这一点:

    1。比例约束:

    但是,如果您为一个视图设置比例高度,则意味着视图会随着屏幕尺寸的每一个微小变化而变化。例如,您的视图可以从 4" 切换到 4,7" 稍微大一点,但这并不意味着这是一个坏主意。

    使用该功能只需check the answer by Asadullah Ali :)

    2。使用尺寸等级:

    如果您使用 Xcode 6,您可以使用尺寸类并仅为屏幕尺寸添加约束;使用不难,查看Apple Documentation

    对于此功能,您需要为 Storyboard 设置大小类:

    之后,您可以根据需要设置视图控制器并仅为其中一个类添加规则:

    你可以告诉 Xcode“好的,如果屏幕尺寸是 5,5,至少使用这个规则”。

    Remember that for add a constraint for a specific size classes you need first select the size class then add normally your constraint: when a size class is selected (you can check in the size classes control) Xcode add the constraints just for that类。

    编辑 1:如果您在 缩放字体 等方面遇到问题,您也可以使用 size-classes 功能来缩放标签中的字体大小 例如;您可以在激活尺寸等级功能后单击此选项:


    我更愿意告诉你我所知道的关于你的问题的一切,但就你个人而言,我会使用第一个解决方案:你的视图可以动态改变屏幕大小。

    您只需要找到最佳比例百分比:您可以设置大约 10%,因此 0.1 乘数,第一项为蓝色视图,第二项为红色视图

    【讨论】:

    • 问题是关于缩放视图。调整字体大小应该在不同的帖子中。
    • 您是否阅读了完整的答案?调整字体大小只是最后一点
    【解决方案2】:

    尝试成比例的高度和宽度。您需要为 Equal Heights 和/或 equal Widths 设置约束,然后双击约束并更改乘数,例如 0.2 如果您希望第一项为第二项宽度的 20%,而 2.0 为 200%(表示双倍)宽度。根据您的要求使其按比例增加或减少

    【讨论】:

    • 谢谢。这工作得很好。现在我被标签缩放和字体困住了。这是一场噩梦……
    • 对于缩放标签和字体检查我的答案,你应该使用大小类:使用这个功能,你还可以为一个大小类设置字体大小,例如,我正在为此更新我的答案。
    • 您通常对标签使用固定字体大小并且不给它们高度和宽度,而是设置它们的尾随、前导、顶部、底部约束。但是如果您希望在压缩视图时缩小字体大小,那么您可以将 autoshrink 值设置为“最小字体比例”或“最小字体大小”。是的,您可以按照 Massimo 的建议使用尺寸类别 :) 但 IOS 7 可能不完全支持尺寸类别。但是您可以为不同的尺寸类别设置字体,即所有类型的 iphone 纵向、iphone 横向、ipad 纵向和 ipad 横向的决议。
    • @AsadullahAli 我正在使用 Visual Studio 作为情节提要,并且不能将乘数设置为小于零。还有其他方法吗?
    • @BasitZIa 很抱歉不确定 Visual Studio 上的情节提要,尽管您可以在 textEditor 中打开情节提要文件并通过 id 查找约束并更改其值
    猜你喜欢
    • 2023-03-30
    • 2015-12-19
    • 1970-01-01
    • 2014-10-29
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-02
    • 1970-01-01
    相关资源
    最近更新 更多