Що таке "змінювати риси" у Xcode 8?


86

Я використовую класи AutoLayout та Size, але з випуском iOS 10 та новим Xcode 8.0 є одна нова опція Vary for Traits. Це заміна Size Classe для різної ширини та висоти пристроїв.

введіть тут опис зображення

Вибравши widthпрапорець, він відображається varying 14 compact width devices.

введіть тут опис зображення

Вибравши heightпрапорець, він відображається varying 18 compact height devices.

введіть тут опис зображення

Вибравши обидва прапорці, він відображається varying 11 compact width regular height devices.

введіть тут опис зображення

Як використовувати ці параметри? Чи можемо ми використовувати AutoLayout із класами розмірів як Xcode7.0? Якщо хтось має глибокі знання, будь ласка, поясніть це.


Погляньте на відео сесії WWDC 2016. Я впевнений, що це десь висвітлювалось як "нові можливості Xcode".
Martin R

Відповіді:


133

Це лише розширення щодо того, як швидко використовувати "Змінні риси" у своєму проекті для додавання різних макетів для iPad та iPhone.

Будь ласка, прочитайте це, щоб зрозуміти більше про класи розміру.

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

введіть тут опис зображення

Якщо ви пропускаєте приклад, наведений нижче, прочитайте Зміст наприкінці.


  • ЦІЛЬ:

Вам потрібна кнопка з різною шириною в iPhone та iPad. Перший має ширину 80, а другий має ширину 300.

  • МЕТОД 1:

Змінюйте риси з кількома обмеженнями, як встановлено.

  • КРОКИ:

    1. Спочатку додайте загальні обмеження, наприклад, відцентруйте кнопку по горизонталі та вертикалі.

введіть тут опис зображення

  1. Виберіть VaryForTraits та для екранів iPhone відповідно до вказівок щодо класу розміру, клас розміру C * R відповідає моделі, і ми перевіряємо галочки Width & Height у спливаючих вікнах. Відхиліть спливаюче вікно, клацнувши в будь-якому місці екрана.

введіть тут опис зображення введіть тут опис зображення

  1. Додайте константу ширини та перевірте, чи додано обмеження для класу розміру C * R. Після додавання обмежень натисніть кнопку Готово із зміною.

введіть тут опис зображення введіть тут опис зображення

  1. Для екранів iPad знову виберіть будь-який пристрій iPad і виберіть VaryForTraits, і цього разу, натиснувши висоту-ширину, він повинен показати варіацію R * R.

введіть тут опис зображення введіть тут опис зображення

  1. Знову додайте обмеження ширини, останнє додане обмеження ширини iPhone повинно бути не виділеним, як на знімку екрана. Цього разу додана вартість буде для класу розміру R * R.

введіть тут опис зображення введіть тут опис зображення

  1. Поверніться до розкладки iPhone, і це займе 80, оскільки ширина, а iPad займе 300.

введіть тут опис зображення

ВИСНОВОК:

Зверніть увагу, що додано загалом два обмеження, і в обох обмеженнях значення різняться залежно від вибраного класу розміру.


  • МЕТОД 2:

Змінюйте риси з єдиним обмеженням, встановлено кілька класів розміру

  • КРОКИ:
    1. Додайте нормальне обмеження ширини. Потім виберіть це обмеження та натисніть кнопку +, крім значення Постійне.

введіть тут опис зображення

  1. Додайте варіацію ознаки, і для iPhone ми виберемо C * R і встановимо постійне значення як 100.

введіть тут опис зображення введіть тут опис зображення

  1. Знову ж таки, для iPad, який має варіацію ознаки як R * R, ми додаємо ще одну варіацію, натиснувши ще раз кнопку + і встановлюємо значення як 300.

введіть тут опис зображення введіть тут опис зображення

  1. Виберіть iPad, і ширина буде автоматично прийнята як 300, а повернення до iPhone - 100.

введіть тут опис зображення

ВИСНОВОК:

Здається, це кращий варіант, а не додавання двох обмежень, коли потрібне лише одне обмеження, а значення константи відрізняється.

КОЛИ ВИКОРИСТОВУВАТИ, ЩО ВИКОРИСТОВУВАТИ:

Обидва підходи в основному роблять одне і те ж, встановлюючи значення для класів Size.

Але # Метод1 використовується, коли ви хочете додати обмеження спеціально для пристрою або сказати клас розміру. Наприклад, у iPhone кнопка повинна бути з 50 найкращих балів, а в iPad вона повинна бути відцентрована по горизонталі та вертикалі. У таких ситуаціях вам потрібно використовувати VaryForTraits, оскільки він відкриває двері для додавання обмежень для певного класу розміру.

# Метод2 використовується, коли вам потрібні різні значення констант для одного типу обмеження.

PS: ВСІМ ТИМ, ЩО НЕ МОЖУТЬ ОТРИМАТИ ПРИКЛАД РОБОТИ

Переконайтесь, що ви додаєте лише необхідні обмеження як встановлені. Прапорець проти Встановлено має з'являтися лише для обмеження, яке потрібно для класу розміру. Це ключ!

введіть тут опис зображення

Просто додайте верхнє обмеження та лідер до uiButton у поданні. Виберіть верхнє обмеження та зніміть прапорець біля базової опції Встановлений зі знаком Плюс. Тепер, натиснувши на знак Плюс, додайте варіацію до C R і поставте прапорець біля цієї опції. Тепер змініть пристрій з iPhone на iPad з різними комбінаціями орієнтації. Це обмеження застосовуватиметься лише до класу розміру C R, який є iPhone у книжковій орієнтації. Якщо встановлено прапорець проти базового встановленого (того, що має символ Плюс), це означає, що обмеження має застосовуватися до всіх класів розміру.

РЕЗЮМЕ:

Варіація ознак - це зміна презентації вашого інтерфейсу користувача, яка базується на конфігурації пристрою. Варіації ознак користувальницького інтерфейсу не просто обмежуються обмеженнями, а можуть застосовуватися до набагато більше. Такі як зміна кольору фону та інших елементів, коли пристрій налаштовано на темний стиль. Варіація може застосовуватися до елемента користувальницького інтерфейсу, такого як видалення обмеження, або до властивості класу подання або обмеження, наприклад, шрифту для мітки. Ви можете варіювати:

  • Розмір або положення подання

  • Встановлення виду

  • Встановлення обмеження

  • Константа обмеження

  • Шрифт

  • Колір шрифту, відтінку або фону

  • Поля макета

  • Файл зображення

Конкретний набір властивостей, який ви можете змінювати, залежить від класу елемента. У цьому прикладі ми продемонстрували використання- Встановлення обмеження & - Константа обмеження. Інші - досить прості і можна легко зробити висновок.


51
Це не працює для мене .. Він оновлює обмеження для всіх розмірів екрану і практично нічого не відбувається ...
Ден,

5
Якщо це не спрацює, спробуйте прочитати це: help.apple.com/xcode/mac/8.0/#/devba3dd0b51 . Якщо ви хочете налаштувати шрифт або іншу властивість, натисніть "+", яка знаходиться зліва від властивості на панелі атрибутів. І ви не можете змінювати особливості для iPhone 4s та iPhone 7 Plus, наприклад, залежно від ширини, оскільки вони мають компактну ширину. Ви можете змінювати їх для iPhone та iPad.
Денис Кутлубаєв

2
Працював для мене thnx :)
Санман

1
Це спрацювало для мене після того, як я видалив старе обмеження та додав нове, замість того, щоб замінити його значення.
Теодор Сіурару

2
Для людей, які кажуть, що це не працює. Я думаю, що ви намагаєтеся змінити всі обмеження, ви можете лише константу значення в обмеженні, ви насправді не можете змінити кілька чи інші властивості обмеження. Я також був розгублений у цій частині.
3366784

21

Змінювати риси - це варіант еволюції класів розміру, який був присутній у минулій версії Xcode. Це дозволяє набагато більш витончені та точні варіації на основі рис. Звичайно, це не обмежується лише варіаціями iPad / iPhone, але ви також можете вказати варіації на основі орієнтації та іншого пристрою.

Інші відповіді в цій темі мають деякі недоліки та неточності, можливо, найефективніший спосіб дати відповідь - навести приклад. Для наочності ми обмежимо наш приклад лише кнопкою та двома розкладками. Однак, як пояснено нижче, ви можете продовжити наступний приклад як завгодно. Наша мета - налаштувати положення кнопки між двома різними розкладками: альбомною та книжковою на всіх пристроях.

Примітка: Якщо не ввімкнено опцію «змінювати за рисами», усі налаштування інтерфейсу макета та інтерфейсу призначені для всіх ознак (тобто для всіх класів розміру).

рис1

Почнемо з того, що кладемо кнопку на нашу розкадрування. Оскільки функція "змінювати риси" не ввімкнена, кнопка буде присутня у всіх різних макетах. Якби замість цього ми дозволили змінювати ознаки, кнопка буде посилатися лише на певну вибрану ознаку.

рис2

Тепер давайте увімкнемо “варіюватися за ознакою” та виберемо варіацію на основі зросту. Ви побачите, що нижній екран стане синім, і відповідно до вибору ви побачите весь пристрій, на який впливає. Все йде нормально.

рис3

Знову натисніть кнопку та додайте обмеження до звичайного. У нашому прикладі ми додамо верхній та лівий пробіли, а також ширину та висоту. Після цього натисніть на "Готово змінюється". Ви побачите, що нижня частина екрану знову стане сірою. Що відбувається, так це те, що ми сказали Interface Builder додати вищезазначені обмеження лише для класів (w: C h: R).

мал4

Тепер виберіть альбомний режим внизу екрана. Ви побачите, що кнопка червоного кольору, оскільки в ній відсутні обмеження, які ви додали лише для деяких рис. Виберіть знову варіювати для ознак і знову вибрати варіацію висоти. Додайте такі обмеження:

мал5

і натиснути зроблено по-різному. Тепер кнопка добре розпізнана на екрані як для альбомної, так і для книжкової зйомки.

мал6

Побудуйте і запустіть. Ви побачите, що кнопка буде змінюватися відповідно до орієнтації екрана.

Ви можете створювати більш досконалі макети, дотримуючись цього шаблону. Наприклад, ви можете на початку вибрати варіацію для ознак і скинути об’єкти UIKit лише для певної ознаки. Цей об'єкт буде присутній лише у зазначеному варіанті, а інший - сірим, що дозволить вам створювати абсолютно різні користувальницькі інтерфейси на основі ознак.


3
Я додав обмеження для класу (wC, hR), після чого клацнув зроблено по-різному. Коли я відкриваю (wR, hR), тоді я також бачу старі обмеження. Як створити нові обмеження для (wR, hR) цього класу. Скажіть мені, будь ласка, @valvolin
Ramcharan Reddy 02

9

Це не що інше, як size classesвоно само, але з різним уявленням. поки xcode 7ми не використовували класи розмірів, і ми розглядаємо їх height-widthу regular,compact and anyманері, vary for traitsконцепція однакова, але xcode спеціально пояснює exact device. У старшій версії ми знаємо for every iphone in portraintтаку інформацію тощо, де в цьому ми можемо знати точний пристрій!

Перевірте наведені нижче знімки екрана,

введіть тут опис зображення

введіть тут опис зображення

Вам слід звернутися до wwdc2016 - відео для отримання додаткової інформації!

Довідка: This So Post


Гаразд, дозвольте мені перевірити WWDC Video.
technerd

Ви маєте рацію, це не що інше, як еволюція класів розмірів
Дурай Амутан. H
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.