Урок 2. Интерфейс проигрывания

[EgorovAD MEPhI]

В этом уроке будет продолжена работа над аудиоплеером, и рассмотрены следующие темы:
• Создание activity для проигрывания музыки;
• Создание интерфейса проигрывания.

[EgorovAD MEPhI]

Новое activity
Проигрывание аудио логично делать в отдельном activity. В этом activity можно расположить элементы навигации и отображать информацию о песне.
Для нового activity понадобится отдельный класс. Для того чтобы вручную не создавать файл нового класса и не прописывать всё необходимое, можно воспользоваться автоматической генерацией кода. Нажмите правой кнопкой на основной package в левой части экрана и выберите New > Class, появится окно, в котором можно задать параметры нового класса (рисунок 1).

Рисунок 1. Создание нового класса.
Назовите класс PlayActivity. Нужно указать, что новый класс наследуется от Activity: в поле Superclass напишите android.app.Activity (для этой цели можно воспользоваться кнопкой “Browse...” рядом с полем ввода или автодополнением, которое активируется с помощью сочетания Ctrl+Пробел). Остальные настройки можно оставить по умолчанию (рисунок 2). Нажмите Finish.

Рисунок 2. Параметры класса.
Теперь необходимо прописать новое activity в манифесте. В списке файлов откройте AndroidManifest.xml и перейдите на вкладку AndroidManifest.xml, где в обычном текстовом режиме добавьте следующую строчку внутрь тега <application>:

Код: выделить все

<activity android:name=".PlayActivity"></activity>

Описывание в манифесте таких элементов, как activity, сервисы, BroadcastReceiver'ы необходимо для нормальной работы приложения. К примеру, если не прописать activity в манифесте, то при попытке его открыть Android его не найдет и выдаст ошибку.

[EgorovAD MEPhI]

Создание layout’а
Необходимо создать layout, который бы содержал информацию о песне, а также некоторые элементы управления (в простейшем случае проигрывание/пауза). Нажмите на папку layout правой кнопкой мыши и выберите New > Android XML File. В появившемся окне в качестве названия в поле File укажите activity_play.xml, а в списке Root Element выберите RelativeLayout (рисунок 3).

Рисунок 3. Генерация layout.
Готово, можно нажимать Finish. Должен получиться абсолютно пустой layout.
Для того чтобы связать PlayActivity и layout, необходимо переопределить метод onCreate(...). Для того чтобы переопределить метод, можно воспользоваться автоматической генерацией кода в Eclipse. Для этого щелкните правой кнопкой мыши на PlayActivity и в контекстном меню выберите Source > Override/Implement methods...

Рисунок 4. Связывание activity и layout.
В появившемся окне выберите onCreate(...) и нажмите ОК (рисунок 5).

Рисунок 5. Выбор способа активации.
В начале метода onCreate(...) необходимо вызывать родительский метод, который выполнит определенную подготовительную работу, и загрузить layout.

Код: выделить все

      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_play);

Теперь перейдем к добавлению элементов управления и надписей в layout. Во-первых, понадобится кнопка проиграть/пауза. Кнопку с изображением можно взять из раздела палитры Images & Media (рисунок 6).

Рисунок 6. Выбор кнопки.
Перетащите ImageButton на layout, а в качестве иконки выберите ic_media_play из System Resources (рисунок 7).

Рисунок 7. Выбор иконки для кнопки.
Перетащите кнопку вниз и растяните, должно получиться как на скриншоте(рисунок 8):

Рисунок 8. Скриншот приложения.
Теперь измените id для новой кнопки. Это можно сделать несколькими способами: из контекстного меню, появляющегося при нажатии правой кнопкой мыши, непосредственным редактированием самого xml или с помощью панели свойств справа внизу. Проще всего воспользоваться третьим методом и заменить “@+id/imageButton1” на “@+id/playButton” (рисунок 9).

Рисунок 9. Изменение id кнопки.
После изменения id появится окно, предлагающее обновить все ссылки на этот id и автосгенерированные файлы, со всем соглашаемся.
Для новой кнопки появилось следующее предупреждение “[Accessibility] Missing contentDescription attribute on image”. Это предупреждение говорит о том, что надо заполнить поле contentDescription для изображения. Заполнение описания изображения нужно для слепых людей, которые используют специальные средства “проговаривание” текста. Маловероятно, что какой-нибудь слепой будет пользоваться этим аудиоплеером, но предупреждение всё же лучше убрать, заполнив поле. Найдите на панели свойств поле “Content Description” и нажмите на значок справа от него, должно появиться следующее окно (рисунок 10):

Рисунок 10. Content description.
Нажмите на кнопку “New String...” и заполните поля “String” и “New R.string” как указано на скриншоте (рисунок 11):

Рисунок 11. Заполнение action_settings.
Далее нажмите “OK”. Вы должны были снова оказаться в окне выбора строки, там выберите “playButtonDescr” и нажмите “OK”. Предупреждение исчезло, но необходимо добавить перевод этой строки на русский язык. По аналогии с предыдущим уроком добавьте перевод самостоятельно. В качестве перевода можно использовать строку “Проигрывание или пауза”.
Теперь нужно добавить текстовые поля для исполнителя, названия песни и названия альбома. Добавьте надписи, как показано на скриншоте (надписи снизу вверх – исполнитель, название, альбом). Для названия лучше использовать шрифт крупнее, чем для исполнителя и альбома(рисунок 12).

Рисунок 12. Шаблоны описания композиции.
Теперь дайте надписям соответствующие id: artist, title, album. Как это делать, было рассмотрено ранее.
В ходе работы аудиоплеера название, исполнитель и альбом будут подставляться в надписи программно. Для того чтобы сделать layout более наглядным, присвоим надписям соответствующие строки. Добавьте их самостоятельно (рисунок 13).

Рисунок 13. Интерфейс.
Простейший интерфейс для проигрывания музыки готов!

Что дальше?
В следующем уроке будет рассмотрено проигрывание музыки, как открыть новую activity и другое.