Страхотни архитектурни компоненти, използващи Kotlin - икони на приложения, които са адаптивни

Прозорец за конфигурация на икони в Android Studio

Сигурно вече сте чували за Kotlin, Dagger 2, Android Architecture Components, Retrofit 2, адаптивни икони и много други страхотни функции и подобрения в Android. Наскоро Google стартира и визуализация на Android P Developer. Чел съм много по тези горещи теми от доста време и се опитах да ги използвам и в моите приложения. И така, тук е първият ми опит да науча нещо ново и да споделя своите знания обратно на самата общност.
Ще напиша поредица, в която основно се съсредоточавам и демонстрирам предимствата на гореспоменатите технологични стекове, като разработвам просто андроид приложение, базирано на Kotlin, в което можем да търсим потребители на GitHub, използвайки API за търсене на GitHub.

Чувствам се развълнуван? Просто скачайте. Ще бъде забавно каране

съдържание

  1. Икони на приложения, които са адаптивни
  2. Инжектиране на зависимости с помощта на Dagger 2
  3. Да направим малко стая
  4. Ще продължи да добавя още точки в бъдещите блогове от тази серия

Икони на приложения, които са адаптивни

През миналата година в Google I / O’17, Google въведе адаптивни икони за стартиране в операционната система Android Oreo (API ниво 26). Нов, стилен и елегантен начин за дизайн на логото на всяко приложение. Използвайки този нов формат, иконата на стартовия панел на нашето приложение може да се показва в различни форми на различни OEM производители, означава, че адаптивна икона може да показва икона с кръгла форма на едно устройство и икона с форма на катерица на друго устройство.

Така че формата на стартовата икона на приложението ни може да варира от:

Приспособителна икона в окръжностАдаптивна икона с квадратна формаЗакръглена адаптивна икона с квадратна формаАдаптивна икона във формата на квадратна форма

в зависимост от маската по подразбиране, осигурена от поддържаната OEM на смартфона, която се използва от системата за предоставяне на всички адаптивни икони в същата форма, налични на вашето устройство.

Основи

Най-важните компоненти в адаптивната икона са техните предни и фонови слоеве. За да създадем адаптивна икона, трябва да разделим иконата на стартовия панел от две части, споменати по-горе (преден слой и фонов слой).

Размерите на иконите за изстрелване бяха с размер 48 x 48 dp във версия Android 7.1 и по-ранна. Но според официалната документация за иконата Adaptive от Google, приложенията трябва да следват конкретен набор от насоки за създаване на двата слоя на адаптивната икона, т.е.:

  • Както предните, така и фоновите слоеве трябва да са с размер 108 x 108 dp (при което фоновият слой трябва да е непрозрачен, а предният преден слой може да има прозрачност).
Размер на иконата за стартиране (Източник)
  • Иконата на стартовия панел трябва да бъде вътре в маскирането, т.е. 72 x 72 dp.
OEM маскираща анимация (Източник)
  • Има допълнително пространство от 18 dp от всяка страна, запазено за OEM производители за извършване на различни видове визуални ефекти като паралакс, пулсиращи или много други ефекти.
Визуални ефекти (източник)

О! Има още едно нещо, което трябва да кажа, предните и фоновите слоеве могат да бъдат във формат .svg или .png. Ще споделя връзка в секцията с референции в този блог, откъдето научих как да създавам преден слой от иконата на стартовия панел.

Приближаване

Има два подхода за създаване на иконата Адаптив, т.е.

  1. Използване на функцията Image Asset в самото Android Studio (лесно и доста ясно).
  2. Създаване на XML файл тип от тип.

Ще разгледаме първия подход в този блог. Но преди да започнете, има предпоставка, за която трябва да се внимава, да се създаде адаптивната икона.

Приложението ви трябва да има targetdkversion като 26 и по-високи.

Първи подход

Това е по-лесен подход, само като следвате стъпки:

  1. Щракнете с десния бутон върху папката res и изберете New> Image Asset option. Ще изглежда така:

2. Сега след стъпка 1 ще можем да видим прозорец за конфигуриране на изображение на изображението по следния начин:

Налични са няколко опции, както всички можем да видим в този прозорец за конфигурация. В следващите стъпки ще разгледаме необходимите опции за създаване на икона за адаптация.

3. В тази стъпка има някои опции, които ще оставим такива, каквито са, а именно:

  • Ще оставим опцията Тип на иконата, тъй като е избрана по подразбиране икони за стартиране (адаптивни и наследени).
  • Името на иконата на стартовия панел е написано като ic_launcher, можете да промените името според вашите изисквания.
  • В този прозорец за конфигуриране има два бутона за превключване, които са Show Safe Zone (За да превключите видимостта на безопасна зона в прозореца за преглед на иконата на стартовия панел) и Show Grid (За да превключите на видимостта на формите на ключовите линии, което помага при определяне на пропорционалната пропорция на иконата) ,
  • В прозореца за конфигурация има три раздела, наречени слой на преден план, фонов слой и наследство. Ще ги разгледаме в следващите стъпки.

4. Следвайки стъпка 3, ще преминем напред, за да добавим нашия background.svg или background.png файл. Направих моя background.png файл с размер 432 x 432 px, използвайки GIMP v2.8, изглежда така:

background.png (432 x 432 px)

Просто давам кратка информация за секцията за фонов слой: Има полета като:

  • Име: Задайте името на фоновия си слой според вашите изисквания.
  • Тип на актива: Изберете типа изображение, докато използваме .svg или .png файл за фоновия слой.
  • Път: Изберете подходящия път на вашия фонов файл.

След добавяне на фонов файл към фоновия слой в прозореца за конфигуриране на изображението, ще видим промените като тази:

Икона за стартиране, след като изберете фоново изображение

5. След стъпка 4 ще изберем раздела слой за преден план и ще добавим нашия файл foreground.svg или foreground.png, който отново е със същите размери като на фоновия ни файл. Направих си файла на преден план, използвайки самия GIMP v2.8, като следвам указанията, споменати по-горе в тази статия. Също така ще споделям връзка в раздела за ресурсите по-долу за това как да създадете обикновено лого от тип текст с дълга сянка, междувременно логото изглежда така:

foreground.png (432 x 432 px)

Точно както сме избрали име и тип актив във фоновия слой, така ще направим същото и за предния слой. Така че след като изберете пътя на файла на преден план до предния слой в прозореца за конфигуриране на изображения, ще видим промените като тази:

Икона за стартиране, след като изберете изображението на преден план

6. Тази стъпка ще бъде втората ни последна стъпка, ще изберем наследствения раздел и там имаме три възможности:

Наследена икона и други опции на иконата

Този раздел ще генерира три типа допълнителни икони, т.е. Legacy Icon, Round Icon и Google Play Store Icon. Имаме опции да или не за всеки вид икона. Така ще генерираме всяка икона за нашето приложение и натискаме Next.

7. След като изпълните всички стъпки, Android Studio ще генерира всички изходни файлове в папката mipmap и ще раздели всички файлове, dpi smart. Нека да разгледаме този изходен прозорец:

Прозорец за преглед на изходния файл

Както можем да видим, има два XML файла на иконата на стартовия панел, един за нормална икона и други за кръгла икона, които имат тагове и посочват отделно предния план и фоновите чертежи отделно в mipmap- папка anydpi-v26. Така че след проверка на всички папки и файлове, най-накрая щракнете върху Finish и Voila! Нашата адаптивна икона е готова.

Нека просто видим магията на нашата адаптивна икона:

Икона за адаптация на приложение за търсене GSearch

Всичко е за адаптивната икона. Можете да намерите изходния код тук:

Във втората част на тази поредица ще обясня как работи инжектирането на зависимости с помощта на кинжал и как да го интегрирам в това приложение. Останете на линия ...

ресурси

Това са ресурсите, които следвах, за да внедря иконата за адаптиране. Всички вие също можете да разгледате тези ресурси.

  1. Проектиране на адаптивна икона от Ник Бъчър
  2. Адаптивни икони и още - от StylingAndroid
  3. За тестване на адаптивна икона
  4. Как да направите плоска дълга сянка в GIMP

Надяваме се, че този блог ще ви помогне да създадете страхотни и готини адаптивни икони за вашето приложение. Ако имате някои предложения за прилагане на адаптивни икони, моля, уведомете ме в секцията за коментари.

Благодаря за четенето. Освен това можете да Ако искате и обичате да четете тази статия, тогава просто .

Последвай ме в Туйтър: