Оглавление:

Приложение для Android, часть 1: заставка с использованием фрагментов / Kotlin: 5 шагов
Приложение для Android, часть 1: заставка с использованием фрагментов / Kotlin: 5 шагов

Видео: Приложение для Android, часть 1: заставка с использованием фрагментов / Kotlin: 5 шагов

Видео: Приложение для Android, часть 1: заставка с использованием фрагментов / Kotlin: 5 шагов
Видео: 😱 Как сделать ANDROID приложение за 10 минут! Сможет каждый :3 2024, Июль
Anonim
Image
Image
Диспетчер фрагментов и 3 экрана
Диспетчер фрагментов и 3 экрана

И снова здравствуйте, скорее всего, у вас есть «свободное» время дома из-за COVID19, и вы можете вернуться, чтобы проверить темы, которые вы хотели изучить в прошлом.

Разработка приложений для Android - определенно одна из них для меня, и несколько недель назад я решил попробовать еще раз.

Программирование на Kotlin определенно снижает трудозатраты на кодирование и помогает достичь результатов за довольно короткое время. Это действительно здорово!

В этой серии руководств я объясню, как разработать счетчик результатов тенниса. Это приложение можно использовать, когда вы играете с друзьями и / или семьей (вы можете дать планшет своему ребенку и занять его / ее:)). Это приложение основано на следующем примере счетчика Kotlin.

Учебник состоит из следующих частей:

Часть 1: Заставка с использованием фрагментов (мы сейчас здесь)

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

Часть 3: счетчик матчей

Основная идея состоит в том, чтобы разделить приложение на 3 разных экрана, каждый из которых будет вызывать следующий, после завершения или когда пользователь нажимает соответствующую кнопку.

В этой первой части я объясню, как создать вводный экран -> посмотрите видео выше.

Запасы

Функции Android, используемые в этой части:

  • Фрагменты
  • Анимация
  • Вибрация
  • Медиа плеер
  • Слушатели

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

  • Android Studio
  • Котлин 1.3.61
  • Уровень API 28

Обязательные активы

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

Шаг 1. Дизайн пользовательского опыта

Давайте объясним особенности нашего вступительного экрана.

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

Шаг 2: диспетчер фрагментов и 3 экрана

Диспетчер фрагментов и 3 экрана
Диспетчер фрагментов и 3 экрана

Напомним основную идею нашего приложения, мы хотим иметь 3 экрана (Intro, Properties и Match Score). Для этого воспользуемся фрагментами. Итак, нам нужно 3 из них по одной на каждый экран. Обратитесь к первому фрагменту кода.

Во втором мы можем узнать, как мы называем наш первый фрагмент. Фрагмент Splash - это тот, который будет использоваться для нашего вступления.

Шаг 3. Схема приложения и вводного экрана

Расположение экрана приложения и вступительного экрана
Расположение экрана приложения и вступительного экрана
Схема приложения и вводного экрана
Схема приложения и вводного экрана
Схема приложения и вводного экрана
Схема приложения и вводного экрана
  • Чтобы зафиксировать положение экрана и игнорировать любое вращение телефона, нам нужно добавить следующий код Изображение 1 в AndroidManifest.xml.
  • Чтобы удалить панель действий со всех экранов, нам нужно добавить следующий код, рисунок 2, в styles.xml
  • Чтобы развернуть полноэкранный режим на всех экранах, нам нужно установить некоторые флаги, как на рисунке 3, двумя разными способами. Oncreate () и onWindowFocusChanged.

Шаг 4: Определение логотипа и стиля мяча

Определение логотипа и стиля мяча
Определение логотипа и стиля мяча
Определение логотипа и стиля мяча
Определение логотипа и стиля мяча
  • мы определили перед нашим текстом как серый, это делается в файле styles.xml. См. Рис 1.
  • Мы также определили, что мяч должен быть в зеленых тонах. Для этого мы создаем ball.xml в папке с возможностью рисования. Проверьте Рис 2

Шаг 5: Описание анимации

Я объясню логику и последовательность анимации. Я думаю, что здесь нет смысла добавлять фрагменты кода, лучше вы сами прогоните код.

Идея анимации такова:

  • После создания фрагмента создается и запускается текстовый логотип.
  • После завершения анимации текстового логотипа выполняется первое параболическое движение теннисного мяча.
  • После завершения первого параболического движения воспроизводится звук, телефон вибрирует … и запускается следующее параболическое движение.
  • Как только последнее параболическое движение завершено и звук / вибрация выполнены, мы достигаем точки, чтобы вызвать наш второй экран.

Замечание: я не создавал абстрактный класс для анимации, потому что хотел, чтобы код оставался плоским… легче было следовать, по крайней мере, для меня:)

Я опубликую вторую часть серии в ближайшие дни, подписывайтесь на меня, если вам понравилась эта часть, а если нет, я буду рад получить ваш отзыв.

Рекомендуемые: