音楽プレイヤー

【Android Studio】シンプルな音楽プレイヤーの作り方 第2回 「音楽プレイヤー画面の作成」

ここまでの記事はこちら
 

前回プロジェクトを作成をしたので、今回は音楽プレイヤーの画面を作っていきましょう。
 

この画面に必要なのは、この6つです。

  • 画像
  • 再生位置を表示するSeekBar
  • 再生時間を表示するTextView
  • 再生・停止ボタン
  • 音量調節をするSeekBar
  • 音量の大小がわかる画像

 

【完成イメージ】


 
 

それでは、Android Studioを開いて始めていきましょう!
 

画面サイズについて

今回はNexus4のサイズで開発していきます。
 
・ボタンサイズ(例 android:layout_width="60dp", android:layout_height="60dp")
・マージン(例 android:layout_marginTop="60dp")
 
の数値はプログラムに影響しないので、
お使いの機種やエミュレーターに合わせて変更してください。

 


 

画像を準備する

画像のダウンロード

まずは以下のリンクから画像をダウンロードしてください。(再生ボタンなど5つの画像が入っています。)

 
 

画像をdrawableフォルダにセット

Android Studio画面の左側のプロジェクト構造の中にある「Drawable」の上で右クリックするとメニューが出てきます。

Macの場合は「Reveal in Finder」Windowsの場合は「Show in Explorer」を選択します。
 

 
 

直接開く場合のパスはこちらです。

Macの場合
/Users/あなたのアカウント名/AndroidStudioProjects/MusicPlayer/app/src/main/res/drawable

Windowsの場合
C:¥Users¥あなたのアカウント名¥AndroidStudioProjects¥MusicPlayer¥app¥src¥main¥res¥drawable
 
 

drawableフォルダを開いたら、先ほどダウンロードした画像を入れてください。
 

 
これで画像の準備は完了です。
 
 

Design? Text?

activity_main.xmlファイルを開きます。

activity_main.xmlを開くと、下の方に「Design」「Text」というタブがあります。


 
 

Androidアプリ開発では、画面レイアウトをXMLで書いていきます。
このとき「Design」「Text」の2つの方法を選ぶことができます。

XMLとは?

XMLとはExtensible Markup Language(エクステンシブル マークアップ ランゲージ)の略です。
簡単に言うと、HTMLのデータ管理バージョン。HTMLはウェブサイトの画面を作るときに使いますが、XMLは主にデータを管理するときに使われます。

 

Design(デザイン)

デザインタブでは、ドラッグ&ドロップでボタンやテキストを置いていくことができます。
それらを置くと自動的にactivity_main.xmlにコードが追加されます。

長所:簡単に画面が作れる
短所:XMLファイルがゴチャゴチャする
 

Text(テキスト)

テキストタブでは、自分でXMLを書いていきます。

長所:コードがスッキリする
短所:手間がかかる
 
 

どちらが良いとは断言できませんが、私はコードがスッキリとする「Text」をいつも使用しています。初めての方にもわかりやすいと思うので、今回は「Text」でレイアウトを作っていきましょう。
 
 

レイアウトについて

activity_main.xmlを開いてみると、2行目にこんなコードが書いてあります。

<android.support.constraint.ConstraintLayout

これは「ConstraintLayoutというレイアウトを使用します」という意味です。

ConstraintLayout(コンストレイトレイアウト)とは、自動的にボタンやテキストの位置を最適化し調整してくれるレイアウトです。
 

今回はこれを使わずに「LinearLayout(リニアレイアウト)」を使います。
LinearLayoutは、ボタンやテキストなどを横一列・縦一列に並べることができるレイアウトです。
 

LinearLayoutの中にLinearLayoutを書くこともできます。
このアプリでは、画像のようにLinearLayoutを組み合わせてレイアウトを作っていきます。
 

 
 

レイアウトの作成

activity_main.xmlファイルを開いて、以下のように書きます。
長いですが、一気に書いてしまいましょう!

 
 
何箇所かコードを紹介したいと思います。
 

9行目

android:orientation="vertical"

LinearLayout内の要素をvertical(垂直方向)に並べるために書きます。

 

15行目

android:src="@drawable/image"

先ほど画像をdrawableフォルダに置きましたが、その画像を表示するためのコードです。
「@drawable/ファイル名」と書きます。
 

19行目

android:id="@+id/positionBar"

このSeekbarにid(名前)をつけています。これを書くことで、MainActivity.javaからこのSeekbarを呼び出せるようになります。
Seekbar以外にも、ButtonやTextViewにidを設定しています。

 

24~39行目

このLinearLayoutでは elapsedTimeLabel(経過時間ラベル)とremainingTimeLabel(残り時間ラベル)を横に並べています。

9行目ではandroid:orientation="vertical"を書きましたが、horizontal(水平方向)の場合は省略できます。
 

47行目

android:onClick="playBtnClick"

これは「ボタンを押した時にplayBtnClick関数を呼びます」という設定です。

playBtnClick関数には、音楽の再生・一時停止の処理を書いていきます。
 

今は「playBtnClick」の部分に赤い波線がついていると思います。

これは「MainActivityにplayBtnClick関数がありません!」という警告です。

次回MainActivity.javaを書くときに消えますので、そのままにしておいて大丈夫です。

 
 

次に行うこと

activity_main.xmlはこれで完成です。
次回は音楽を再生・一時停止する機能を実装していきましょう????

第3回 「音楽の再生・停止」に進む
 

ABOUT ME
Sara
Sara
「わかりやすく・シンプル」をモットーに、携帯アプリ・ウェブアプリの作り方を紹介します。 独学でプログラミングを勉強をしている方、基礎は勉強したけれど次に何をすれば良いか分からない...という方のお役に立てるサイトを目指しています🙂
独学は難しそうと感じたら

 
独学でプログラミングを勉強するのは難しそう、効率的にプログラミングを学びたいという方はオンラインスクールがオススメです。

オンラインスクールを選ぶときのポイント

  • 無料体験があること
  • 個別サポートがあること

自分にあったスタイルを見つけるために、無料体験のご利用をオススメします。(無料体験後に自分には合わないなと感じたらハッキリ断ってしまって問題ありません。)
 
個別サポートもプログラミング学習に挫折しないために重要なポイントです。エラーや困った時にすぐに個別対応をしてくれるスクールを利用して下さい。

ここでは3つのオンラインスクールを紹介します。
全て無料体験がありますので、ぜひ自分に合ったスクールを見つけてみて下さい????
 

1. TechAcademy(テックアカデミー)

オンライン完結で勉強できるスクールで、コースがとても充実しています。チャットで質問すればすぐに回答を得られるのが一番のおすすめポイントです。
オリジナルのサービスやアプリの開発もサポートしてくれるので、開発したいものが決まっている人にもオススメです。

無料体験はこちら

2. CodeCamp(コードキャンプ)

一対一で受講できる個別指導のプログラミングスクールです。
Webデザイン・Webサービス開発・アプリ開発などを幅広く学習することができます。
マンツーマンなので自分のペースで学習できて、質問もその都度できるのがメリットです。

無料体験レッスンはこちら

3. Treehouse

英語でも良い、英語とプログラミングを同時に勉強したいという方は Treehouse がオススメです。月25ドルで始めることができて、たくさんのプログラミング言語を学ぶことができます。
個別サポートはありませんが、掲示板が充実しています。ほとんどの場合、質問してから30分程度で回答を得ることができます。

7日間の無料体験はこちら

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA