На сайті Work.ua ми давно змінюємо оформлення до свят та інших значущих подій. Але на жаль, наш застосунок тривалий час залишався осторонь. Настав час це виправляти! 😉
Але як зробити так, щоб оформлення в застосунку коректно відображалось на всіх екранах телефонів? Різна діагональ, роздільна здатність, розміри екранів — усі ці параметри мають бути враховані, щоб оформлення виглядало так, як задумано.
Спочатку ми провели дослідження: зібрали найпопулярніші роздільні здатності екранів, подивилися, які рішення використовують інші, вивчили статті на цю тему. За підсумками ми розробили свій підхід, який чудово вирішує поставлене завдання. Нижче опишемо, у чому він полягає 👇
Щоб мати гарну якість растрових зображень на пристроях із різною щільністю пікселів, ми маємо надати кілька версій кожного зображення. Для цього ми визначили 4 сегменти зображень — з низькою, середньою, високою та надвисокою щільністю пікселів на дюйм.
На прикладі сплеш-скрин розкажу, як це працює. Визначаємо найменший фактичний розмір екрана, додаємо його висоту, щоб зображення коректно виглядало на телефонах з великою діагоналлю, і слідуємо таким коефіцієнтам масштабування: ×1, ×2, ×3, ×4. Так ми покриваємо практично всі екрани. Повторюємо для кожного екрану, де потрібно змінити оформлення.
План реалізації був наступний:
1. Розробити шаблон.
2. Описати прив’язки, неймінг та експорт.
3. Допомогти з дизайном адмінки, щоб потім можна було легко змінити оформлення програми самостійно, не відволікаючи від роботи програмістів.
І вуаля! Нове оформлення застосунку вже можна переглянути на вашому телефоні.