Съдържание:

Приложение за Android, част 1: Екран за пръскане с помощта на фрагменти/Kotlin: 5 стъпки
Приложение за Android, част 1: Екран за пръскане с помощта на фрагменти/Kotlin: 5 стъпки

Видео: Приложение за Android, част 1: Екран за пръскане с помощта на фрагменти/Kotlin: 5 стъпки

Видео: Приложение за Android, част 1: Екран за пръскане с помощта на фрагменти/Kotlin: 5 стъпки
Видео: Hacked Jacuzzi, JDK 18, Kotlin 1.7.0, ECMAScript 2022 and new Amazon products [MJC News #10] 2024, Юни
Anonim
Image
Image
Fragment Manager и 3 екрана
Fragment Manager и 3 екрана

Здравей отново, най -вероятно имате малко „свободно“време у дома поради COVID19 и можете да се върнете, за да проверите теми, които сте искали да научите в миналото.

Разработката на Android App определено е една от тях за мен и реших преди няколко седмици да опитам втори път.

Програмирането в Kotlin определено намалява усилията за кодиране и помага да се постигнат резултати за доста кратко време. Наистина е страхотно!

В тази поредица уроци ще обясня как да се разработи Tracker Score Tracker. Това приложение може да се използва, когато играете с приятели и/или семейство (можете да дадете таблета на детето си и да го държите зает:)). Това приложение се основава на следния пример на Kotlin Counter.

Урокът има следните части:

Част 1: Екран за пръскане, използващ фрагменти (ние сме тук сега)

Част 2: Конфигурация на мача - Свойства

Част 3: Проследяващ резултат на мача

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

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

Консумативи

Функции на Android, използвани в тази част:

  • Фрагменти
  • Анимация
  • Вибрация
  • Media Player
  • Слушатели

Необходими инструменти:

  • Android Studio
  • Котлин 1.3.61
  • API ниво 28

Необходими активи

Звуков файл със звуков сигнал

Стъпка 1: Дизайн на потребителското изживяване

Нека обясним характеристиките на нашия екран за въвеждане.

  1. искаме да имаме цял екран в бял цвят
  2. искаме екранът да е винаги в пейзажен режим
  3. искаме цвета на нашето лого-текст в сиво
  4. искаме цвета на топката в зелени тонове
  5. искаме нашето лого-текст да избледнее
  6. искаме топка за тенис да се движи по екрана (подскачаща топка)
  7. искаме да възпроизвеждаме звук всеки път, когато топката докосне повърхност
  8. искаме да задействаме вибрация на телефона при възпроизвеждане на звук
  9. искаме продължителността на въвеждането да бъде по -малка от 4 секунди.

Стъпка 2: Fragment Manager и 3 екрана

Fragment Manager и 3 екрана
Fragment Manager и 3 екрана

Нека си припомним основната идея на нашето приложение, искаме да имаме 3 екрана (Intro, Properties и Match Score). За това ще използваме фрагменти. Така че имаме нужда от 3 от тях по един за всеки екран. Вижте първия фрагмент от код.

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

Стъпка 3: Оформление на екрана за приложение и въведение

Оформление на екрана за приложения и въведение
Оформление на екрана за приложения и въведение
Оформление на екрана за приложения и въведение
Оформление на екрана за приложения и въведение
Оформление на екрана за приложения и въведение
Оформление на екрана за приложения и въведение
  • За да фиксираме позицията на екрана и да пренебрегнем всяко завъртане на телефона, трябва да добавим следния код Снимка 1 в AndroidManifest.xml.
  • За да премахнем Action Bar от всички екрани, трябва да добавим следния код Снимка 2 в styles.xml
  • За да натиснем цял екран на всички екрани, трябва да зададем някои флагове, както на снимка 3, при 2 различни метода. Oncreate () и onWindowFocusChanged.

Стъпка 4: Определяне на лого и топки

Определяне на лого и топки
Определяне на лого и топки
Определяне на лого и топки
Определяне на лого и топки
  • дефинирахме преди нашия текст като сив, това се прави под файла styles.xml. Вижте снимка 1.
  • дефинирахме също така, че топката трябва да е в зелени тонове. За това създаваме ball.xml в папка за чертане. Проверете снимка 2

Стъпка 5: Описание на анимацията

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

Идеята на анимацията е следната:

  • След създаването на фрагмента се създава и стартира текстовото лого
  • След като анимацията с лого на текста приключи, се извиква първият параболичен ход на тенис топката
  • След като първото параболично движение приключи, се възпроизвежда звук и телефонът вибрира … и се извиква следващото параболично движение
  • След като последното параболично движение е завършено и звукът/вибрацията се изпълняват, достигаме точката, за да извикаме втория ни екран.

Забележка: Не създадох абстрактен клас за анимации, защото исках да запазя кода плосък … по -лесно да го следя поне за мен:)

Ще публикувам втората част от поредицата през следващите дни, следвайте ме, ако ви харесва тази част и ако не, ще се радвам да получа отзивите ви.

Препоръчано: