Xcode 8 中的“特征变化"是什么? [英] What is 'Vary for Traits' in Xcode 8?

查看:28
本文介绍了Xcode 8 中的“特征变化"是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 AutoLayout 和 Size 类,但是随着 iOS 10 和新 Xcode 8.0 的发布,有一个新选项 Vary for Traits.这是针对不同宽度和高度的设备替换 Size Classe 吗.

通过选择width复选框,显示14种紧凑宽度设备.

通过选择height复选框,显示18个紧凑型高度设备.

通过选择这两个复选框,它会显示不同的11个紧凑宽度常规高度设备.

如何使用这个选项?我们可以像 Xcode7.0 一样使用 AutoLayout 和 size classes 吗?如果有人有深入的知识,请解释一下.

解决方案

这只是关于如何在项目中快速使用Vary Traits"为 iPad 和 iPhone 添加不同布局的扩展.

请阅读本文以了解有关 Size 类的更多信息.

如果您要跳过下面的示例,请在最后阅读摘要.

<小时>
  • 目标:

您需要一个在 iPhone 和 iPad 中具有不同宽度的按钮.前者宽度为 80,后者宽度为 300.

  • 方法一:

因安装的多个约束而异.

  • 步骤:

    1. 首先添加通用约束,例如水平和垂直居中按钮.

  1. 选择 VaryForTraits,对于 iPhone 屏幕,根据尺寸等级指南,C*R 尺寸等级适合模型,我们检查 Width & 的刻度线.弹出窗口中的高度.单击屏幕上的任意位置即可关闭弹出窗口.

  1. 添加宽度常量并检查是否为 C*R size-class 添加了约束.添加约束后,选择完成变化"按钮.

  1. 对于 iPad 屏幕,再次选择任何 iPad 设备并选择 VaryForTraits,这次点击高度-宽度,它应该显示 R*R 变化.

  1. 再次添加宽度约束,最后添加的 iPhone 宽度约束必须像屏幕截图中那样不突出显示.这次增加的价值将用于大小等级 R*R.

  1. 切换回 iPhone 布局,宽度为 80,iPad 为 300.

结论:

请注意,总共添加了两个约束,并且在这两个约束中,值根据所选的尺寸类别而有所不同.

<小时>
  • 方法 2:

因具有单一约束、安装了多个 Size-Class 的特征而异

  • 步骤:

    1. 添加正常宽度约束.然后选择该约束并选择常量值旁边的 + 按钮.

  1. 添加特征变异,对于 iPhone,我们选择 C*R 并将常量值设置为 100.

  1. 对于遵循 R*R 特性变异的 iPad,我们再次单击 + 按钮添加另一个变异并将值设置为 300.

  1. 选择 iPad,宽度将自动设为 300,而在 iPhone 上,宽度将自动设为 100.

结论:

当只需要一个约束并且常量值不同时,这似乎是一个更好的选择,而不是添加两个约束.

何时使用,使用什么:

这两种方法基本上都在做同样的事情,将值设置为 Size-classes.

但是,#Method1 用于当您想要专门为设备添加约束或说尺寸等级时.例如,在 iPhone 中,按钮应该来自前 50 分,而在 iPad 中,它应该水平和垂直居中.在这种情况下,您需要使用 VaryForTraits,因为它可以为特定尺寸类添加约束.

#Method2 用于相同约束类型的不同常量值.

P.S:致所有无法让示例工作的人

请确保您仅将所需的约束添加为已安装.安装的复选框应该只出现在你需要的尺寸类的约束中.这是关键!

只需添加一个顶部约束 &指向视图中的 uiButton.选择顶部约束并取消选中带加号的基本安装选项.现在,通过单击加号,将变化添加到 CR 并选中该选项.现在,使用各种方向组合将设备从 iPhone 更改为 iPad.此约束将仅适用于 CR 尺寸类,即纵向方向的 iPhone.如果选中基本 Installed(带有加号的那个)复选框,则意味着该约束应应用于所有尺寸类别.

总结:

Trait Variation 是对基于设备配置的用户界面呈现的更改. 用户界面的 Trait Variation 不仅限于约束,还可以应用于更多方面.例如在设备设置为深色样式时更改背景和其他元素的颜色.变体可以应用于用户界面的元素,例如移除约束,或应用于视图类或约束的属性,例如标签的字体.你可以改变:

  • 视图的大小或位置

  • 安装视图

  • 安装约束

  • 约束常量

  • 字体

  • 字体、色调或背景的颜色

  • 布局边距

  • 图像文件

您可以改变的特定属性集取决于元素的类.在示例中,我们已经演示了使用 - 安装约束 &- 约束常数.其他的,很简单,可以很容易地推断出来.

I am using AutoLayout and Size classes, but with release of iOS 10 and new Xcode 8.0, there is one new option Vary for Traits. Is this replacement of Size Classe for different width and height of devices.

By selection of width checkbox, it displays varying 14 compact width devices.

By selection of height checkbox, it displays varying 18 compact height devices.

By selection of both checkbox, it displays varying 11 compact width regular height devices.

How to make use of this options ? Can we use AutoLayout with size classes as like Xcode7.0 ? If any one has in depth knowledge then please explain it.

解决方案

This is just an extension as to how to use "Vary Traits" quickly in your project for adding different layouts for iPad and iPhones.

Please read this for understanding more on the Size classes.

https://developer.apple.com/reference/uikit/uitraitcollection

If you are skipping the example which follows below, do read the Summary in the end.


  • OBJECTIVE :

You need a button having different widths in iPhone and iPad. The former having width of 80 and latter having a width of 300.

  • METHOD 1 :

Vary for Traits with Multiple Constraints as installed.

  • STEPS :

    1. Add the common constraints first like Center the button horizontally and vertically.

  1. Choose VaryForTraits and for iPhone screens as per the size class guidelines , a C*R size class fits the model and this we check the tickmarks of Width & Height in PopUp. Dismiss the pop-up by clicking anywhere on screen.

  1. Add the width constant and check whether the constraint is added for C*R size-class. After adding constraints, choose Done Varying button.

  1. For iPad screens, again select any iPad device and choose VaryForTraits and this time on clicking height-width, it should show R*R variation.

  1. Again add a width constraint, the last added iPhone width constraint must be unhighlighted as in the screenshot. The value added will be for the size-class R*R this time.

  1. Switch back to iPhone layout and it takes 80 as width and iPad will take 300.

CONCLUSION :

Please notice that there are total of two constraints added and in both the constraints, the values differ according to the size-class chosen.


  • METHOD 2 :

Vary for Traits with Single Constraint , Multiple Size-Class installed

  • STEPS :

    1. Add the normal width constraint. Then select that constraint and choose the + button besides the Constant value.

  1. Add trait variation, and for iPhone we choose C*R and set the constant value as 100.

  1. Again for iPad which follows a trait variation as R*R, we add another variation by clicking again on + button and set the value as 300.

  1. Select an iPad and the width will be automatically taken as 300 and coming back to iPhone it takes 100 as value.

CONCLUSION :

This seems to be a better option rather than adding two constraints when a single constraint is only required and the constant value differs.

WHEN TO USE, WHAT TO USE :

Both the approaches are basically doing the same thing, setting values to Size-classes.

But, #Method1 is used when you want to add a constraint specifically for a device or say size-class. For example, in iPhone the button should be from Top 50 pts and in iPad it should be centered horizontally and vertically. In such situations, you need to use VaryForTraits as it opens doors to add constraints for a specific size class.

#Method2 is used when you want different constant values for a same constraint type.

P.S : TO ALL THOSE WHO ARE NOT ABLE TO GET THE EXAMPLE WORKING

Please make sure, you are adding only the required constraints as Installed. The checkbox against Installed should only appear for the constraint that you need for a size class. That is the key!

Just add a top constraint & a leading to an uiButton in a view. Select the top constraint and uncheck the basic Installed option with Plus sign. Now, by clicking on the Plus sign, add variation to CR and check that option. Now, change the device from iPhone to iPad with various orientation combinations. This constraint will be applied only for CR size class which is iPhone in portrait orientation. If the checkbox against the basic Installed (the one with Plus symbol) was checked that means the constraint should be applied to all size classes.

SUMMARY :

Trait Variation is a change to the presentation of your user interface that is based on a device configuration. Trait Variations of the user interface is not just limited to constraints but can be applied to much more. Such as changing the color of the background and other elements when the device is set to a dark style. A variation can apply to an element of the user interface, such removing a constraint, or to a property of a view class or constraint, such as the font for a label. You can vary:

  • Size or position of a view

  • Installation of a view

  • Installation of a constraint

  • Constraint constant

  • Font

  • Color for the font, tint, or background

  • Layout margins

  • Image file

The specific set of properties you can vary depends on the class of the element. In the example, we have demonstrated the use of- Installation of a constraint & - Constraint constant . Others, are quite simple and can be easily inferred.

这篇关于Xcode 8 中的“特征变化"是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆