Освой программирование играючи

Сайт Александра Климова

Шкодим

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

Щелчок кнопки/Счётчик ворон

Не тяни кота за хвост

Альтернативный вариант на Kotlin для старого примера на Java.

Текст будет дублироваться.

При создании проекта снимем флажок Backwards Compatibility (AppCompat).

В прошлый раз мы использовали ImageButton. Сегодня будем работать с обычной кнопкой. В режиме Design подведите курсор к компоненту Button и перетащите его на форму. В результате ваших действий на форме появится стандартная кнопка с настройками по умолчанию. В правой части экрана у вас имеется окно Attributes, в котором вы можете настроить необходимые свойства для кнопки. По умолчанию студия присвоит значение button атрибуту ID, который идёт самым первым. Если временно переключиться в режим Text, то увидите, что на самом деле атрибут имеет значение @+id/button. Если в вашем приложении будет много кнопок, то студия будет генерировать имена button2, button3 и т.д. Не используйте подобные идентификаторы, а сразу давайте им говорящие имена - button_name, button_food. Я пока оставил имя button. Атрибуту Text присвойте текст Поздороваться. Будет отлично, если вы добавите этот текст через ресурсы. В учебных примерах я буду использовать текст прямо в свойствах для экономии места, но вы должны привыкать писать код правильно.

Attributes

Если вы создали новый проект на основе шаблона Empty Activity, то там уже был компонент TextView с текстом Hello, World. Компонент TextView является текстовой меткой для вывода текста, который нельзя редактировать. В метке будем выводить приветствие после щелчка кнопки. В окне свойств удаляем текст из свойства Text, чтобы в текстовой метке ничего не было. Проследите, чтобы у него был идентификатор. Если в окне свойств ничего нет, то добавьте свой идентификатор, например, textView (в текстовом режиме @+id/textView).

Настройте взаимное расположение компонентов по своему желанию. Будем считать, что интерфейс программы готов - у нас есть кнопка для нажатия и текстовая метка для вывода сообщений.

Теперь нужно научиться писать код для щелчка кнопки. В Kotlin не работает приём связывания атрибута android:onClick с обработчиком щелчка, поэтому будем писать программно.

Откройте файл класса MainActivity и в методе onCreate() напишите код.


button.setOnClickListener {
    textView.text = "Hello Kitty!"
}

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

Запускаем проект и нажимаем на кнопку, чтобы увидеть результат. Можете изменить текст по своему желанию, например, на Ты кто такой? Давай, до свидания!, но это сообщение будет выглядеть мягко говоря, странным.

Полный текст кода.


// Если этот код работает, его написал Александр Климов,
// а если нет, то не знаю, кто его писал.
package ru.alexanderklimov.counter

import android.app.Activity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        button.setOnClickListener {
            textView.text = "Hello Kitty!"
        }
    }
}

Код для щелчка мыши

На всякий случай приведу альтернативные варианты, которые могут встретиться вам в интернете. Например, кнопку и метку можно объявить стандартным Java-способом через метод findViewById() и затем подключать слушатель к кнопке.


val button = findViewById<Button>(R.id.button)
// или
val button: Button = findViewById(R.id.button)
button.setOnClickListener(this::clickEvent)

private fun clickEvent(view: View){
    val textView = findViewById<TextView>(R.id.textView)
    textView.text = "Hello Kitty!"
}

Новички на первых порах часто делают элементарную ошибку - помещают код работы с компонентами до метода setContentView(). Запомните, сначала нужно вывести шаблон (R.layout.activity_main), а только потом можно работать с кнопками, текстовыми полями, переключателями и т.д. В нашем случае используется отдельный метод для кнопки, который формируется после метода setContentView().

Добавьте в проект новую кнопку и разместите под первой кнопкой. Подправьте несколько атрибутов, например, так.


<Button
    android:id="@+id/button_сounter"
    ... другие атрибуты
    android:text="Считаем ворон" />

Я поменял для кнопки текст и идентификатор, а также некоторые параметры, отвечающие за положение кнопки на экране. Переключитесь в графический режим и посмотрите, как выглядит кнопка.

Снова открываем файл MainActivity.kt и пишем следующий код сразу после объявления класса и до метода onCreate():


private var mCount: Int = 0

Google разработал целое руководство по наименованию переменных. Например, закрытая переменная на уровне класса должна начинаться с символа m (member), а далее идёт понятное название с заглавной буквы. Давайте попробуем придерживаться этого стиля.

В методе onCreate() после кода для первой кнопки пишем:


button_counter.setOnClickListener {
    textView.text = "Я насчитал ${++mCount} ворон"
}

Ещё раз напоминаю, не копируйте текст со страницы, а вводите текст вручную. Так вы быстрее освоите программирование, кроме того научитесь пользоваться системой подсказок и уменьшите количество опечаток.

В этом примере мы создали дополнительную переменную-счётчик mCount, которая будет содержать число подсчитанных ворон. После создания мы сразу её инициализировали.

В обработчике щелчка мы увеличиваем значение счётчика через оператор инкремента ++, который ставим перед переменной. Попробуйте разместить оператор после переменной и посмотреть на результат, так вы поймёте разницу от местоположения оператора у переменной.

Запускаем приложение и начинаем щёлкать по кнопке. При каждом щелчке счётчик mCount будет увеличиваться на единицу и эта информация будет отображаться на экране.

Счетчик ворон

Теперь у вас есть чрезвычайно полезное приложение Счётчик ворон. Если преподаватель вас неожиданно спросит на занятии, почему вы смотрите в окно с рассеяным видом, вы можете смело достать свой телефон и сказать, что заняты очень важным делом - считаете ворон.

Считаем ворон

Впрочем, программа получилась у нас универсальной, можно считать не только ворон за окном.

Считаем котов

Исправляем ошибки

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

Ваша задача - стремиться к зелёному цвету. Жёлтый цвет желательно просматривать и решать самостоятельно, нужно ли исправлять код. Если вы понимаете в чём проблема, то исправьте. Если не понятно, то оставьте. Предупреждения не всегда бывают по делу, иногда их можно игнорировать. Понимание придёт с опытом и практикой.

Ниже показан случай, когда я сделал опечатку в названии класса String.

Помимо прямоугольника, там же ниже есть зарубки с такими же цветами. Подведите курсор мыши к любой из зарубок и увидите подсказку о характере ошибки или предупреждения. Щелчок по зарубке перенесёт вас в нужное место в документе.

Домашнее задание

Добавьте в проект ещё одну кнопку, чтобы считать отдельно котов и ворон. Далее запускаете видео и считаете.

Дополнительное чтение

Обсуждение статьи на форуме.

Картины

Реклама