Androidアプリ開発でAnalogClockを追加する方法【初心者向け】

Androidアプリ開発のGUIコンポーネント【AnalogClock】を追加する方法を初心者向けに解説した記事です。アプリ内にアナログ時計を表示することができます。長針・短針、文字盤を、自分で作成した画像にカスタマイズする方法も紹介。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。

今回はそのうちの1つである、AnalogClock(アナログ時計)を追加する方法をご紹介します。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

大石ゆかり

田島メンター!!Androidアプリにアナログ時計を使いたいんですけど、自分で実装しないといけないでしょうか・・・?

田島悠介

ううん、そんなことはないよ。AnalogClockっていうGUIコンポーネントを使うといいんだ。

大石ゆかり

え、用意されているんですか!?

 

AnalogClockとは

AnalogClockとは、アプリ内にアナログ時計を表示したい場合に使われるGUIコンポーネントです。

時計を表示するGUIコンポーネントにはほかにDigitalClockがあり、こちらはデジタル時計が表示できます。

 

 

AnalogClockを配置する

AnalogClockはレイアウトエディタのパレットの「時刻&日付」から配置できます。 パレット内のAnalogClockを、配置したい場所までドラッグしましょう。

※AnalogClockは、APIレベル23で非推奨となりました。パレットに出てこない場合は、下記のソースコードをレイアウトファイルに貼り付けてください。

 

このようにAnalogClockを配置すると、xmlファイルには次のようなコードが追加されます。

<AnalogClock android:id=”@+id/analogClock1″ android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_alignParentTop=”true” android:layout_centerHorizontal=”true” android:layout_marginTop=”36dp” />

 

これでAnalogClockの配置は完了しました。 アプリを起動してみましょう。画面にアナログ時計が表示されました。

 

 

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

カスタマイズする

AnalogClockは、長針・短針や文字盤を、自分で作成した画像に変更することができます。

先に、プロジェクトの「resフォルダ」内に「Drawableフォルダ」を用意します。そのなかに、AnalogClockで使用したい画像をコピーしておきましょう。

 

まずは、文字盤を変更します。 プロパティの「Dial」の横の[…]ボタンをクリックします。すると、画像の様なダイアログが表示されます。 Drawableフォルダにコピーした画像のファイル名を選択し、[OK]ボタンをクリックします。

同様に、短針は「hand_hour」、長針は「hand_minute」を変更します。

 

アプリを実行すると、自分で用意した画像を使ったアナログ時計が表示されます。

0058-620x872

今回の記事は以上です。

 

他のGUIコンポーネントを追加したい場合は、Androidアプリ開発でProgressBarを追加する方法も合わせてご覧ください。

 

大石ゆかり

簡単に設置できていいですね〜♪

田島悠介

カスタマイズもできるから、アプリのデザインに合わせて使えてとても便利だよ♪

大石ゆかり

そうですね〜♪

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。