Android приложение для начинающих гитаристов, пишем андроид приложение с аккордами для гитары

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

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

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

Так будет выглядеть оно на телефоне, просто запускается, делается клик по экрану, я допустим сижу с гитарой и повторяю увиденное на картинке, ставлю пальца на те лады и струны и можно пробовать играть.

Android приложение для начинающих гитаристов, пишем андроид приложение с аккордами для гитары

В общем задумка такая, на просторах интернета я нашёл вот такую картинку с аккордами.

Далее в графическом редакторе, можно использовать любой – хоть фотошоп, хоть паинт, я повырезал от неё вот эти части, и меня получилась 21 картинка.

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

Создадим наш проект, запустив Android Studio, после обновления у меня на заставке появилась вот такая вот Лисичка, чем-то напоминает Firefox…

Создадим новый проект, empty activity, назовем проект accords – аккорды.

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

И вот через некоторое время после всех моих обновлений и синхронизаций наконец-то создался новый проект.

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

Предлагаю попробовать вариант, удалим textview, через код удалить гораздо проще.

Нам нужно будет сюда добавить imageview. Вот мне не совсем ясна мысль, что я должен вот здесь делать, совсем эта идея мне не нравится, не выбрав источник и нажав ок – imageview в активность не добавляется…

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

Так, Android id у нас есть, это хорошо, у нас высоту и ширину установим не врапконтент, а на всю катушку Матч Перент, эти строки можно вообще убрать, они тут большому счёту и не нужны.

Картинка у нас будет во всю ширину, для масштабирования ещё добавим здесь один параметр

android:scaleType="fitCenter"

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

И нам теперь нужно получить список всех файлов, так как мы будем использовать его в массиве.

Давайте добавим изображения сюда в папку, но не перемещение, а копированием, перетащим файлы с нажатым Control, 21 картинка добавлена в папку drawable. В исходной папке у нас картинки остались.

Сейчас давайте в коде напишем пару переменных, объявим их до onCreate,

ImageView imageView;
Random r;

В onCreate напишем

imageView = findViewById(R.id.imageView);
r = new Random();

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

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

Мы копируем путь к папке с изображениями, открываем любой браузер, Chrome например, и вставляем сюда наш путь, и вот мы получили список файлов, снизу вверх мы копируем весь текст, открываем Excel, делаем специальную вставку, прошу прощения, можно попробовать, так вот, так не так, одну секунду.

Вот так, текст в кодировке Unicode, избавляемся от лишнего, добавляем несколько пустых столбцов, нажав control+. Нужно избавиться от расширения файлов, выделяем его, копируем .jpg, нажимаем горячую клавишу Control+H, найти и заменить, вставляем сюда jpg с точкой, заменить оставляем пусто.

Заменяем, получили в итоге, такой перечень, список наших файлов. Теперь нам нужно будет объединить часть «R.drawable.», ставим её сюда, скопируем или протащим.

Какой-то цвет текста получился мрачноватый, темноватый, JetBrains Mono стиль шрифта.

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

Тем более у вас их может быть не 21, а может быть и 121. Запятую поставили везде кроме последней ячейки. Теперь пишем формулу: равно ячейка с текстом «R.drawable.», символ ampersand, ячейка с именем файла, снова символ ampersand и ячейка с запятой.

Протягиваем нашу формулу, либо копируем и вставляем, и вот что мы получили, вот такую вот конструкция. ЕЕ копируем и вставляем, в массив вместо вот этого текста.

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

 Integer[] images = {
            R.drawable.a,
            R.drawable.a7,
            R.drawable.am,
            R.drawable.b,
            R.drawable.b7,
            R.drawable.bm,
            R.drawable.c,
            R.drawable.c7,
            R.drawable.cm,
            R.drawable.d,
            R.drawable.d7,
            R.drawable.dm,
            R.drawable.e,
            R.drawable.e7,
            R.drawable.em,
            R.drawable.f,
            R.drawable.f7,
            R.drawable.fm,
            R.drawable.g,
            R.drawable.g7,
            R.drawable.gm

    };

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

Напишем небольшой обработчик нажатия на imageview, подтяну текст, чтобы было все видно:

imageView.setOnClickListener(new View.OnClickListener() {

Пишем далее одну строчку:

imageView.setImageResource(images[r.nextInt(images.length)]);

Обращаемся к нашему массиву images, не забываем про квадратные скобки, r.nextInt(images.length), будет генерировать случайное значение.

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

Ну что ж давайте пробовать, что у нас получится, посмотрим, при запуске на экране ничего нет, в принципе при загрузке можно установить картинку с текстом – Нажми меня, но пока тут белый экран, ничего нет, до первого нажатия на экран.

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

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

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

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

Cкачать архив для ознакомления - Android приложение для начинающих гитаристов, пишем андроид приложение с аккордами для гитары v.1:

ZIP архив с проектом

Полный текст MainActivity.java

package ru.maxfad.accords;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;

import androidx.appcompat.app.AppCompatActivity;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

    ImageView imageView;
    Random r;
    Integer[] images = {
            R.drawable.a,
            R.drawable.a7,
            R.drawable.am,
            R.drawable.b,
            R.drawable.b7,
            R.drawable.bm,
            R.drawable.c,
            R.drawable.c7,
            R.drawable.cm,
            R.drawable.d,
            R.drawable.d7,
            R.drawable.dm,
            R.drawable.e,
            R.drawable.e7,
            R.drawable.em,
            R.drawable.f,
            R.drawable.f7,
            R.drawable.fm,
            R.drawable.g,
            R.drawable.g7,
            R.drawable.gm

    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        imageView = findViewById(R.id.imageView);
        r = new Random();


        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                imageView.setImageResource(images[r.nextInt(images.length)]);
            }
        });
    }
}

Android приложение для начинающих гитаристов, пишем андроид приложение с аккордами для гитары

Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!