Ласкаво просимо до другої частини керівництва по Sketch Bridge для Qt Design Studio. Наприкінці першої частини ви створили першу кнопку і змусили її працювати в різних станах Qt Design Studio (в решті керівництва буде скорочено qds). У цій частині повернемося назад і створимо компонент меню з екземплярів цієї кнопки і розглянемо перевизначення мконок та тексту для кожного екземпляра.
Частина 2.1 - Створення компонента меню з використанням екземплярів кнопок
Отже, давайте відкриємо файл Sketch і почнемо зі створення меню фону, потрібно зробити його досить великим, щоб помістилися всі чотири кнопки. І поки що залишимо його досить простим - прямокутним.
Знову потрібно створити прямокутник, перетворити його на символ, потім видалити цей екземпляр і попрацювати над головним символом на вашій сторінці символів.
Можна регулювати розмір і кольори прямокутника, поки ви не будете задоволені, і в цьому випадку можна залишити одиничні налаштування для злиття, тому що потрібно, щоб простий одиничний асет з цього починався.
Також дамо тлі ідентифікатор qml, у цьому випадку myMenu_Symbol_background .
Як тільки у вас буде меню фону, можна починати використовувати символи для створення екземплярів кнопок із компонента головної кнопки, яку створили у sketch та додали функціональність взаємодії у Design Studio.
Для цього перейдіть в Sketch Menu для додавання ассетів, кнопку з плюсом вгорі та перейти до символів/документу (symbols/document) - тут відображаються поточні символи, доступні в документі. На даний момент тут є лише один символ – ваша кнопка, так що давайте продовжимо і додамо це до нового компонента меню.
Тепер у вас є перший екземпляр і можна просто повторити цей процес, скопіювати, вставити або використовувати alt+drag, щоб додати ще три кнопки в меню.
Після того, як це буде зроблено, потрібно перевірити qml-ідентифікатори, призначені новим екземплярам символів, і, поки ви робите це, також можете переконатися, що меню має хороший qml-ідентифікатор.
Отже, давайте почнемо з меню, оскільки це також символ використовуємо схему іменування аналогічну останньої і назвемо її - * myMenu_Symbol *.
Тепер можна подивитися на кнопки, тому в цьому випадку будемо використовувати наступну схему іменування для цих випадків. Це буде виглядати приблизно так:
myButton_myMenu_1
myButton_myMenu_2
myButton_myMenu_3
myButton_MyMenu_4
Але що було б краще, так це конкретне ім'я для кожної ролі кнопок, тому давайте подумаємо про те, що ви хочете, щоб ці кнопки робили. Грунтуючись на тому, яким може бути цей інтерфейс користувача можна придумати ще більш чітку схему іменування цих кнопок.
Одна річ, яку не слід робити - це змінювати ці ідентифікатори в середині проекту, хоча теоретично це можливо, завдяки механізму злиття, що відстежує ці зміни ідентифікаторів, тому рекомендується дотримуватися схеми імен протягом усього процесу.
Отже, натомість давайте використовувати ці ідентифікатори:
myButton_myMenu_home
myButton_myMenu_dashboard
myButton_myMenu_profile
myButton_myMenu_settings
Так зрозуміліше для чого призначений кожен екземпляр, а також це гарантує, що у вас є унікальні ідентифікатори кожного екземпляра вашого символу.
До цього моменту можна було б реекспортувати його в qds, але поки ви тут, давайте підготуємо пару додаткових речей для кнопок, додавши мітку та іконку.
Частина 2.2 - Підготовка символу для перевизначення властивостей
Для початку додамо їх до головного символу кнопки, тому повернімося до цього зараз і почнемо працювати. Почати можна з мітки і бажано переконатися, що вона помітна, але все ще під точкою доступу миші, яку додали першою.
Тепер знову перейдіть в Sketch Menu з + символом, виберіть текстовий елемент і додайте його до вашого дизайну, переконавшись, що це другий шар, прямо під областю миші.
Тепер переконаємося, що текстове поле має фіксований розмір, який охоплює всю ширину кнопки, а також, що текстовий об'єкт вирівняний по центру, таким чином, коли ви перевизначаєте цей текст у ваші екземпляри, нова мітка буде центрована і, коли експортуєте в qds ці властивості також будуть перенесені.
Оскільки потрібно перевизначити цей текст, давайте просто використовуємо “default text” («за замовчуванням текст») тут як placeholder.
І знову переконаємося, що текстовий об'єкт має хороший ідентифікатор qml, давайте назвемо його myButton_Symbol_label , а потім можна перетягнути його так, щоб він знаходився під областю миші, а також необхідно переконатися, що шар має те ж ім'я, що і ідентифікатор qml .
Тепер, щоб додати іконку або фактично три версії однієї іконки на цьому етапі потрібно використовувати іконку placeholder для основного символу, а потім повернуться та змінити окремі іконки, тому можна просто перетягнути іншу фігуру, щось просте, наприклад, трикутник, перейшовши в меню фігур (shapes menu) у sketch, вибравши трикутник і перетягнувши його.
Варто переконатися, що він також знаходиться під областю миші, але вище за фонові шари (background layers). Як тільки це встановлено, потрібно продублювати його двічі, щоб мати версію для кожного стану вашої кнопки (за умовчанням, при наведенні курсору, при натисканні) і внести невеликі зміни в кожну версію, щоб її можна було пізніше протестувати в qds.
В цьому випадку варто просто трохи підкоригувати кольори, тому що це графічні елементи, які потім замінимо. Не має значення, що ви тут робите, поки ви можете відрізнити їх один від одного.
Тепер, як і у всіх шарах, варто змінити ідентифікатори та перевірити параметри експорту, переконавшись, що у цьому випадку всі значки налаштовані на експорт як дочірні. Дамо назви ідентифікаторам:
myButton_icon_placeholder_default
myButton_icon_placeholder_hover
myButton_icon_placeholder_pressed
Також варто переконатися, що шари мають те саме ім'я, що і ідентифікатори і налаштовані на експорт як дочірні елементи, а потім перетягнемо їх під область миші в навігаторі шарів (layer navigator).
За допомогою цього набору можна повернутися до меню символу (menu symbol) і подивитися, як це вплинуло на ваші екземпляри, і, як видно тепер усі вони мають значки та текстові позначки. Пізніше повернемося і розберемося з іконками, оскільки є кілька різних підходів, які можна використовувати для цього, і варто докладно розглянути їх, поки можна використовувати мітки для створення першої з перевизначення властивостей.
Як коротке пояснення для перевизначення властивостей за допомогою символів в sketch, ви можете змінити деякі частини екземпляра символу на щось нове. Це не вплине на вихідний головний символ, а тільки внесе ці зміни до локального примірника, до якого ви зміни та вносите.
Хоча в sketch є багато різних типів перевизначення символів за допомогою qds, розробники підтримують лише кілька з них, основним з яких є текст. Іншим перевизначником є сам символ, але оскільки це досить просунута концепція, її стосуватися поки що не варто, а натомість зосередимося лише на текстовому варіанті.
Для цього потрібно перейти до першого екземпляра вашої кнопки, який назвали home, і на панелі властивостей sketch для вашої кнопки видно, що є нове поле для перевизначення тексту. Щоб використовувати його, можна просто надрукувати тут новий текст, тому для цього першого екземпляра можна просто додати "Home" до тексту перевизначення, і побачимо, що в цьому першому випадку тільки у вас є новий текст.
Коли повторно імпортуємо це пізніше у design studio отримаємо властивість псевдоніма (alias property) для компонента кнопки для цього текстового поля та автоматично додаємо текст "Home" до псевдоніму цього екземпляра. А поки давайте закінчимо додавання нової текстової мітки до всіх кнопок, а потім можна експортувати ваш дизайн і продовжити роботу з qds.
Отже, давайте додамо текст до другого примірника, в цьому випадку * "Dashboard" ("Панель інструментів"), третє - "Profile" ("Профіль"), четверте - "Settings" ("Налаштування") *.
Тепер можна зрозуміти, чому текстове поле фіксованої ширини кнопки і використовували опцію вирівнювання по центру, оскільки ваш текст тепер завжди добре центрований у вашому дизайні кнопки, незалежно від його довжини.
Отже, давайте експортуємо це знову, цього разу отримаємо попередження про перевизначення метаданих, що є нормальним, так що продовжимо і коли це закінчиться повернемося до qds.
Частина 2.3 - Злиття імпорту
У qds варто переконатися, що ви знаходитесь у правильному проекті, а потім повторити кроки для імпорту файлу метаданих, натиснувши кнопку імпорту ассетів у бібліотеці qml і викликавши імпортер ассетів (asset importer). Дуже важливо переконатися, що ви вибрали опцію злиття для імпорту, якщо ви забудете це зробити, то вся робота, яку ви проробили на попередньому уроці, перезапишеться. Тому, будь ласка, переконайтеся, що у вас вибрано опцію злиття (merge option), перш ніж продовжити. Цей параметр є постійним між сесіями, тому вам доведеться робити це лише один раз, але перевіряти його потрібно щоразу, коли імпортуєте з метою безпеки.
Поки злиття увімкнено, можна продовжувати та імпортувати ваші проекти і, за умови, що не допущені помилки (тут не повинно бути помилок або попереджень) можна продовжити та подивитися на ваш імпорт.
Перше, що можна перевірити, - це новий компонент меню, тому давайте подивимося в папці проекту myMenu_Symbol.ui.qml і відкриємо його в редакторі форм.
Ви повинні побачити меню з чотирма кнопками та текстом псевдоніма для кожної, оскільки стану та взаємодії для цих кнопок вже створені це меню має бути повністю функціональним, за винятком зміни іконок, які зробимо трохи пізніше.
Отже, перевіримо його, запустивши попередній перегляд в реальному часі, а потім навівши курсор миші, натисніть на кнопки. Видно, що завдяки роботі, яку виконали в попередньому уроці, у вас є стан наведення та натискання для кожної нової доданої кнопки без необхідності дублювати роботу. Це має показати вам силу хорошої компонентизації, яку напевно оцінять розробники, яким ви передасте цю роботу.
Тепер, коли потрібно внести зміни в загальну поведінку цих кнопок, вам потрібно лише перейти до основного компоненту, внести свої зміни там, і вони будуть автоматично застосовані до всіх екземплярів. Що й зробимо зараз, зробивши іконки у правильному стані.
Отже, тепер переключимося на компонент кнопки і попрацюємо з іконками.
З активним компонентом кнопки в навігаторі можна побачити три нові шари ассетів для кожної іконки. Потрібно повторити кроки, які зробили в частині 1 і зробити кожну іконку видимою в кожному стані, тому пройдемося по кожному стану і використовуємо «прапорець» видимості, щоб зробити це. Переконайтеся, що значення за промовчанням є єдиним за промовчанням, наведення в стані наведення і натискання в стані натискання.
Зробивши це можна перевірити вашу кнопку безпосередньо за допомогою кнопки попереднього перегляду і тепер ви повинні подивитися, що вона спрацьовує відразу. Також можна це швидко перевірити у вашому компоненті меню, щоб переконатися, що вона працює з усіма екземплярами.
На наступному кроці потрібно повернутись у sketch і створити окремі іконки. До цього потрібно підготувати кнопку для заміни іконок у кожному екземплярі, і ви зможете зробити це, зробивши ваші власні псевдоніми тут у qds. Так що давайте зробимо, переконавшись, що ваш компонент знаходиться в базовому стані, а потім вибравши ассет для першої з іконок за промовчанням.
Потім загляньте на вашу панель властивостей, вибравши її в навігаторі і властивість, що вас цікавить - вихідний файл вашої іконки, потім використовуйте іконку дії (action icon), щоб викликати меню і вибрати опцію додавання псевдоніма. Це означатиме, що з екземплярів іконки у вашому компоненті меню можна встановити новий ассет іконки для цієї кнопки.
Давайте повторимо цей крок для кожного з іконок, наведіть курсор миші та натисніть. Встановивши псевдонім вихідної іконки, можна подивитися на компонент меню.
Отже, завантажимо компонент myMenu_Symbol у редакторі форм і виберемо один з ваших екземплярів кнопок. Після того, як ви вибрали на панелі властивостей праворуч, видно всі доступні псевдоніми для цього екземпляра, що показує псевдонім тексту, який додали в sketch і три різні псевдоніми стану іконки, які щойно додали в qds.
Повернемося до них знов після того, як створимо деякі іконки у sketch та змінимо їх пізніше.
Частина 2.4. Розробка іконок
З відкритим sketch створюватимемо артборд тільки для іконок. Артборди зазвичай завжди є компонентами в qds після імпорту, використовуватимемо їх пізніше, коли підійдемо до розробки екранів, але для цього випадку імпортуємо ассети з цього артборду і не генеруватимемо qml, але про це пізніше.
На даний момент можна використовувати функцію Sketch для створення окремої сторінки для асет, щоб потім тримати їх окремо від вашого дизайну екрану, тому давайте додамо нову сторінку у верхньому лівому меню sketch, і можна викликати ці асети, а потім перетягнути артборд, щоб почати створювати іконки . Не мають особливого значення точні розміри цього артборду, тому що зараз це просто місце для зберігання ассетів, тому просто переконайтеся, що він досить великий, щоб вмістити цей витвір мистецтва, а потім можна зосередитись на створенні іконок.
Намалюємо їх безпосередньо в sketch і використовуємо кілька комбінованих фігур, щоб подивитися на хороший спосіб використання функції злиття Bridge плагіна.
Отже, почнемо з малювання іконки будинку. Прямокутник і трикутник повинні зробити свою справу, як тільки обидві фігури, можна використовувати комбіновану форму, щоб створити один елемент, який стане іконкою, а потім погляньте на структуру вашої композиції, яка працює тут за допомогою плагіна Bridge.
Таким чином, комбінована фігура виглядає як окремий міні-компонент: комбінована фігура виступає як батько для двох дочірніх шарів, які намальовані під нею, і, оскільки, потрібен лише один асет іконки, можна переконатися, що комбінована фігура сама по собі є дочірньою і два дочірні шари налаштовані на злиття. Для цього потрібно об'єднати ці два шари в одне зображення під час експорту, яке стане об'єднаною формою, тому матиме ідентифікатор цього елемента.
Це особливо корисний метод, коли розглядається нерозривний робочий процес як мінімізація ассетів у проекті, але при цьому завжди дозволяє повернутися і змінити окремі частини проекту в sketch.
Щоб зробити кілька варіантів для кожної іконки, просто скопіюйте двічі. Скопіювавши дві додаткові версії ваших іконок, можна внести деякі корективи в кольори, а також оскільки цей артборд не використовується як фактичний екран у дизайні, можна помістити всі ваші іконки поруч один з одним і не турбуватися про розташування їх один над одним. Поки робимо першу іконку, також створюємо унікальні ідентифікатори qml для кожного з варіантів ікон та підформ.
Зробивши першу іконку, можна швидко зробити три, використовуючи ту ж техніку, що і раніше, створивши комбіновані фігури з декількох частин, переконавшись, що дочірні шари комбінованих фігур налаштовані на злиття, а сама комбінована фігура є дочірньою, копіюючи іконку двічі і роблячи три варіант на значок.
Відео трохи прискорене, щоб заощадити час, але в міру розробки потрібно перевіряти, щоб щоразу перейменовувати свої ідентифікатори та шари qml, а також перевіряти, що тільки верхня комбінована фігура налаштована на експорт дочірнього елемента та всі вкладені форми налаштовані на злиття.
Отже, тепер є 4 іконки по три варіанти на іконку, давайте розглянемо всі ці qml ідентифікатори і переконаємося, що вони унікальні і значущі для вашого проекту.
Спочатку давайте подивимося сам артборд. Можна викликати щось просте, наприклад, iconAssets, навіть якщо ви не збираєтеся генерувати qml з цього артборду, гарною практикою є впевненість у тому, що ви завжди перевіряєте ваші ідентифікатори. Сподіваємося, колись це стане вашою другою натурою.
myButton_icon_home_default
myButton_icon_home_hover
myButton_icon_home_pressed
myButton_icon_dashboard_default
myButton_icon_dashboard_hover
myButton_icon_dashboard_pressed
myButton_icon_profile_default
myButton_icon_profile_hover
myButton_icon_profile_pressed
myButton_icon_settings_default
myButton_icon_settings_hover
myButton_icon_settings_pressed
Також варто переконатися, що всі ідентифікатори дочірніх верств також унікальні, навіть якщо вони не будуть частиною проекту і, отже, не такі важливі, потрібно намагатися, щоб у процесі імпорту не було помилок. Тому замість того, щоб працювати за схемою іменування просто перерахуємо їх тут простим способом.
Наприклад, значок будинку використовує цей шаблон для об'єднаних форм.
homeSquare1
homeTriangle1
homeSquare2
homeTriangle2
homeSquare3
homeTriangle3
Тепер, коли всі ваші іконки налаштовані та перевірені ідентифікатори qml, можна реекспортувати проект і повернутися до qds, щоб додати ці іконки до ваших кнопок. Отже, натиснемо кнопку експорту і знову перезапишемо метадані.
Тепер можна повернутися до qds та імпортера ассетів. Цього разу скористаємось іншою функцією імпортера та імпортуємо лише нові ассети іконок, знявши прапорець «згенерувати qml», і переконаємося, що злиття, як і раніше, перевіряється на майбутнє у будь-якому випадку. Продовжуйте та імпортуйте ваш проект знову.
Частина 2.5. Заміна джерела іконки
Тепер можна бачити, що у вас є всі асети ікон. Немає потреби генерувати новий qml, оскільки варто просто поміняти правильні версії ваших іконок, використовуючи властивості псевдонімів екземплярів. Отже, давайте виберемо перший екземпляр компонента та скористаємося властивостями псевдоніма, які були створені раніше для цієї мети, щоб зробити це. Ви можете натиснути вашу першу кнопку, іконку будинку і на панелі властивостей просто використовувати список, що розкривається, щоб вибрати нові асети для іконок, тому для кожного стану виберете відповідні асети, а потім зможете перевірити це в режимі попереднього перегляду.
Тепер у вас є нові робочі іконки для першої кнопки. Давайте повторимо цей процес для інших іконок, доки не з'являться правильні іконки в кожному екземплярі, а потім знову протестуємо їх у режимі попереднього перегляду, щоб переконатися, що всі стану працюють.
Нижче наведено код qml для обох компонентів:
MyButton_Symbol.ui.qml
import QtQuick 2.8
Item {
id: myButton_Symbol
width: 211
height: 211
property alias myButton_icon_placeholder_defaultSource: myButton_icon_placeholder_default.source
property alias myButton_icon_placeholder_pressedSource: myButton_icon_placeholder_pressed.source
property alias myButton_icon_placeholder_hoverSource: myButton_icon_placeholder_hover.source
state: "default"
property alias myButton_Symbol_labelText: myButton_Symbol_label.text
Image {
id: myButton_SymbolAsset
x: 0
y: 0
source: "assets/myButton_Symbol.png"
}
Image {
id: myButton_Symbol_default
x: 0
y: 0
source: "assets/myButton_Symbol_default.png"
}
Image {
id: myButton_Symbol_hover
x: 0
y: 0
source: "assets/myButton_Symbol_hover.png"
}
Image {
id: myButton_Symbol_pressed
x: 0
y: 0
source: "assets/myButton_Symbol_pressed.png"
}
Text {
id: myButton_Symbol_label
x: 6
y: 150
width: 200
height: 23
color: "#ff818181"
text: "default text"
font.styleName: "Light"
horizontalAlignment: Text.AlignHCenter
font.family: "Helvetica Neue"
font.pixelSize: 20
verticalAlignment: Text.AlignVCenter
}
Image {
id: myButton_icon_placeholder_pressed
x: 70
y: 55
source: "assets/myButton_icon_placeholder_pressed.png"
}
Image {
id: myButton_icon_placeholder_hover
x: 70
y: 55
source: "assets/myButton_icon_placeholder_hover.png"
}
Image {
id: myButton_icon_placeholder_default
x: 70
y: 55
source: "assets/myButton_icon_placeholder_default.png"
}
MouseArea {
id: myButton_Symbol_MouseArea
x: 0
y: 0
width: 211
height: 211
hoverEnabled: true
}
states: [
State {
name: "default"
when: !myButton_Symbol_MouseArea.containsMouse
&& !myButton_Symbol_MouseArea.pressed
PropertyChanges {
target: myButton_Symbol_hover
visible: false
}
PropertyChanges {
target: myButton_Symbol_pressed
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_pressed
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_hover
visible: false
}
},
State {
name: "hover"
when: myButton_Symbol_MouseArea.containsMouse
&& !myButton_Symbol_MouseArea.pressed
PropertyChanges {
target: myButton_Symbol_pressed
visible: false
}
PropertyChanges {
target: myButton_Symbol_default
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_pressed
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_default
visible: false
}
},
State {
name: "pressed"
when: myButton_Symbol_MouseArea.pressed
PropertyChanges {
target: myButton_Symbol_default
visible: false
}
PropertyChanges {
target: myButton_Symbol_hover
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_default
visible: false
}
PropertyChanges {
target: myButton_icon_placeholder_hover
visible: false
}
}
]
}
myMenu_Symbol.ui.qml
import QtQuick 2.8
Item {
id: myMenu_Symbol
width: 250
height: 850
Image {
id: myMenu_SymbolAsset
x: 0
y: 0
source: "assets/myMenu_Symbol.png"
}
MyButton_Symbol {
id: myButton_myMenu_settings
x: 20
y: 639
width: 211
height: 211
myButton_icon_placeholder_defaultSource: "assets/myButton_icon_settings_default.png"
myButton_icon_placeholder_hoverSource: "assets/myButton_icon_settings_hover.png"
myButton_icon_placeholder_pressedSource: "assets/myButton_icon_settings_pressed.png"
myButton_Symbol_labelText: "Settings"
}
MyButton_Symbol {
id: myButton_myMenu_profile
x: 20
y: 428
width: 211
height: 211
myButton_icon_placeholder_defaultSource: "assets/myButton_icon_profile_default.png"
myButton_icon_placeholder_hoverSource: "assets/myButton_icon_profile_hover.png"
myButton_icon_placeholder_pressedSource: "assets/myButton_icon_profile_pressed.png"
myButton_Symbol_labelText: "Profile"
}
MyButton_Symbol {
id: myButton_myMenu_dashboard
x: 20
y: 217
width: 211
height: 211
myButton_icon_placeholder_defaultSource: "assets/myButton_icon_dashboard_default.png"
myButton_icon_placeholder_hoverSource: "assets/myButton_icon_dashboard_hover.png"
myButton_icon_placeholder_pressedSource: "assets/myButton_icon_dashboard_pressed.png"
myButton_Symbol_labelText: "Dashboard"
}
MyButton_Symbol {
id: myButton_MyMenu_home
x: 20
y: 6
width: 211
height: 211
myButton_icon_placeholder_defaultSource: "assets/myButton_icon_home_default.png"
myButton_icon_placeholder_hoverSource: "assets/myButton_icon_home_hover.png"
myButton_icon_placeholder_pressedSource: "assets/myButton_icon_home_pressed.png"
myButton_Symbol_labelText: "Home"
}
}
