オーダーメイドコース
icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,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では初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。