Урок 1 : Создаем экран

Приложение "Светофор" Часть 1: Создаем экран

Начинаем создавать простое приложение “Светофор” в котором будет три лампочки на экране в виде серых квадратов и одна кнопка, при нажатии на которую лампочки начнут поочередно загораться каждая своим цветом : Зеленый,желтый, красный. При нажатии еще раз на кнопку весь процесс будет останавливаться. Начнем с создания экрана приложения и элементов экрана. 

Для начало нам нужно создать ресурсы цветов которые будем использовать. Для этого в структуре проекта ( левая часть экрана где находятся все папки) открываем файл  “res/values/colors.xml”. Это означает что в папке “res” открываем папку “values” и в данной папке открываем файл “colors.xml”.

В файле “colors.xml” вставляем следующий код:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#008577</color>
<color name="colorPrimaryDark">#00574B</color>
<color name="colorAccent">#D81B60</color>
<color name="grey">#8A8989</color>
<color name="green">#34FA07</color>
<color name="yellow">#FDD203</color>
<color name="red">#FF0000</color>
</resources>

Далее приступаем к созданию экрана. Открываем файл “res/layout/activity_main.xml” и пишем код как на видео уроке или удаляем все и заменяем на этот код (для ленивых):

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<LinearLayout
android:id="@+id/bulb_3"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="8dp"
android:background="@color/grey"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bulb_2">

</LinearLayout>

<LinearLayout
android:id="@+id/bulb_2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="8dp"
android:background="@color/grey"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bulb_1">

</LinearLayout>

<LinearLayout
android:id="@+id/bulb_1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="80dp"
android:background="@color/grey"
android:orientation="horizontal"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.498"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">

</LinearLayout>

<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="36dp"
android:onClick="onClickStart"
android:text="Start"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/bulb_3" />

</androidx.constraintlayout.widget.ConstraintLayout>
 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *