Browsing articles in "ユーザインターフェース"

評価の星を使う(RatingBar)/Getting Started

12月 7, 2011   //   by furusin   //   ユーザインターフェース  //  No Comments

レイティングバー(RatingBar)とは、イカのような星の並びで、レートを星の点灯で表すためのViewです。

例えば、アプリの評価の星の数を表示するために使われたりします。
 

レイティングバーの属性

レイティングバーが保持している属性はイカの通りです。

種類詳細
isIndicator(boolean)レートの変更をユーザができるか、できないかの設定(falseで変更可能状態)
numStars(int)星の数(0~)。負数の場合は初期値(5)になります。
rating(float)初期設定の値。負数の場合は0になります。
stepSize(float)レートが加減される時のステップ幅。設定された数値ずつ、星の量が動きます。

表示する星の数を変えたり、レートが変更される時の加減の量を設定できたりします。

それでは、詳細は続きからどうぞ。
Read more >>

スマートフォン端末で、アクションバーにタブを表示する

11月 25, 2011   //   by UpDown-G   //   ユーザインターフェース  //  No Comments

Android3.0から導入されたアクションバーには、タブを表示することができました。
本エントリでは、画面の小さな端末で、アクションバーにタブを表示する方法を紹介します。

#Android3.0でのタブの使用方法は以下の記事をご覧になってください。
ActionBarのタブを使用する

画面の小さな端末では、以下のスクリーンショット2つのActionBarのタブの使い方があります。

本エントリで紹介するメソッドは以下の3つです。

ActionBarクラスのメソッド概要
setNavigationMode()Navigationのモードを選択する。タブ表示を行う場合は、NAVIGATION_MODE_TABS
setDisplayShowHomeEnabled()ActionBarのアイコン表示を設定する
setDisplayOptions()ActionBar持つ、DISPLAY_SHOW_TITLEなどの設定フラグを変更する

それでは、つづきをどうぞ。
Read more >>

システムテーマで統一感を出す

11月 23, 2011   //   by @mhidaka   //   ユーザインターフェース  //  No Comments

Android 4.0(targetSdkVersionもしくはminiSDKVersionが14以上)ではアプリケーションのデフォルトテーマが、Theme.DeviceDefaultに統一されました。

今まででも未指定の場合はTheme.Black、Android 3.0以降であればTheme.Holoなどが適用されていましたが、Android端末ごとに適用されるテーマがカスタマイズされているなど、アプリケーション側ではレイアウトを制御しにくかったのが現状です。

今回、Android 4.0からTheme.DeviceDefaultが追加されたことで、端末メーカーが、自分の端末ごとにテーマを用意することになります。アプリケーションでThemeを指定しなければTheme.DeviceDefaultが適応されます。ユーザーにとっては使い慣れた端末のテーマが適応されることになり、統一感が向上します。

Android 4.0でのTheme.DeviceDefaultなど、Themeの指定方法は以下の通りです。
テーマの指定方法は続きから。
Read more >>

アクションバーを上下に表示する

11月 22, 2011   //   by UpDown-G   //   アプリケーション, ユーザインターフェース  //  No Comments

アクションバーはAndroid3.0(Honeycomb)で導入された、タイトルバーにMENUやタブ、検索ウィジェットなど、
表示中の画面で操作できることを可視化するための領域です。

Android4.0(ICS)のバージョンアップでは、タブレット端末、携帯端末のどちらにも対応するため、
アクションバーの表示方法が拡張されました。

以下二つのスクリーンショットの様に、
画面解像度の広いタブレット端末の場合は上部にMenuItemを表示し、解像度の狭い携帯端末の場合には下部にMenuItemを表示するよう、アクションバーを上下に分ける事ができます。
本エントリでは、アクションバーを画面下部にも表示する方法を紹介します。

TechBoosterで過去紹介した、ActionBarに関連する記事はこちらです。
使用方法のおさらいなどにご利用くださいませ。

ActionBarにMENUを表示する
ActionBarのタブを利用する
ActionBarに共有履歴を表示する
ActionProviderを使用してMenuItemの処理を共通化する

詳細な使用方法は、つづきをどうぞ。
Read more >>

ロック画面からメディアプレイヤーをコントロールする

11月 16, 2011   //   by kseto   //   Android, マルチメディア, ユーザインターフェース  //  No Comments

Android 4.0でサポートされたRemoteControlClientを利用すると
オリジナルのメディアプレイヤーと連携して端末のロック画面から音楽ファイルの再生/停止、
早送り/巻き戻しなどが行うことができるようになります。

上の図のように、ロック画面上に表示される制御パネルをリモートコントロールと呼びます。
このリモートコントロール上には再生中の音楽ファイルの曲名やアーティスト名などの情報も
表示することができます。

オリジナルのメディアプレイヤーでリモートコントロールを利用するためのステップは以下のようになります。

  • ACTION_MEDIA_BUTTONインテントを処理するBroadcastReceiverを登録する
  • RemoteControlClientを生成してシステムに登録する
  • サポートするメディア制御処理を設定する
  • リモートコントロール上に表示するメディア情報を設定する

それでは続きから詳しく説明していきます。

Read more >>

Android 4.0でアクセシビリティを向上させる

11月 13, 2011   //   by @mhidaka   //   ユーザインターフェース  //  1 Comment

Android4.0では、Android Beamなどの新機能の追加に加えて、アクセシビリティの向上も図られています。設定画面より、「ユーザー補助(またはAccessibility)」として有効化できます。
視覚によらないインターフェイスを確保することで、アプリケーションの利用促進が期待できるほか、Androidの普及に伴ってハンディを持つ人にとって利用しやすいか、というアクセシビリティの確保は非常に重要な要素となりつつあります。

アクセシビリティのためのexplore-by-touch mode

アクセシビリティを向上させる方法は、非常に簡単で、View(コンテンツ)に読み上げてほしい文字列を追加します。記述した文字列はAndroid OSの用意した“explore-by-touch mode”(コンテンツ情報を取得するタッチモード)で有効になります。

“explore-by-touch mode”では、トラックボールを使ってマウスのような仮想カーソルをシミュレートします。(当然、デバイスはトラックボールで無くてもよいですが、視覚によらないで液晶ディスプレイに映し出されたコンテンツを確認するには、一般的なようです)。カーソルのHover(マウスなどのカーソルがViewの上で長時間、動かずにとどまる)状態で、文字列が読み上げられます。

Viewへ説明文を追加するには

Viewとxmlレイアウトへの記述、2種類の対応方法があります。

メソッド、属性説明
ViewクラスsetContentDescription()Viewの説明文となる文字列を指定する
xmlの属性値 android:contentDescriptionStringリソース、または説明文を直接記述する

Reference: setContentDescription
Reference: android:contentDescription

文字列以外は指定できず、改行コード ‘\\n’ やunicode文字の場合は ‘\\uxxxx’ でエスケープできます。
Viewの種類によっては本文(Text)を持たないため、それらをよりわかりやすく説明する文字列を追加すると良いでしょう。
説明文が設定されていないコンテンツ(特にImageButton、EditText、ImageViewやウィジェット)では必ず、android:contentDescriptionを設定するようにしてください。

サンプルコード

サンプルコードはつづきからどうぞ。
Read more >>

ナビゲーションバーおよびシステムバーの表示状態を切り替える

11月 10, 2011   //   by UpDown-G   //   Android, ユーザインターフェース  //  No Comments

Androidには、メールの通知や常駐アプリの起動を知らせてくれるステータスバーが、最初から用意されています。
Android2.xではそのステータスバーの表示/非表示を、アプリ内で設定することができました。
フルスクリーン表示のアプリケーションを作る

そして、Android3.0からは、ユーザーの操作を補助するボタンや、ユーザーへの通知などを行うシステムバーが追加されました。

図1:Android4.0タブレットのシステムバー

そしてAndroid4.0では、新たにNavigation Bar(以降ナビゲーションバー)が追加されました。

図2:Android4.0ナビゲーションバー

ナビゲーションバーは、ハードキーを持たない端末において、画面上にその代わりとなるホームボタンなどを配置します。
Android4.0では、これらの各種バーの表示状態を、アプリ内で切り替えることができます。
今回はその方法について解説していきます。

※ナビゲーションバーは、現状のAVD 4.0エミュレータでは非対応となっており、動作未検証です。実機入手次第検証します。

それでは続きをどうぞ。

Read more >>

HoverEventを制御する

11月 9, 2011   //   by UpDown-G   //   アプリケーション, ユーザインターフェース  //  No Comments

※エミュレータ環境では、USBマウスを接続出来ないため動作未検証の内容になります。

ICS(Android4.0)から、Viewに対するHover状態(マウスオーバー状態)を検知することが出来るようになりました。
Hover状態の検知とは、USBマウスなどのポインティングデバイスを接続した場合に表示されるカーソルが
Viewの上に乗っている状態がわかることです。

HoverEventを制御すると、画像イメージやボタンの上にカーソルが重なった時に、画像やボタンの色を変えるなど
以前よりもっとリッチなUIを作成できるようになります。

本エントリでは、APIDemosのHoverEventを取り扱ったサンプルコードを参考にしながら、
HoverEventの制御方法を紹介していきます。


画像はAPIDemoの Views → Hover Events のスクリーンショットです。

それでは、続きをどうぞ。

Read more >>

トグルスイッチを設定画面(Preference)で利用する

11月 8, 2011   //   by UpDown-G   //   ユーザインターフェース, リソース  //  No Comments

Android4.0(以降ICS)では、「トグルスイッチを利用して設定を変更する」でも紹介した通りトグルスイッチ(Switch)が追加されました。

ICSからトグルスイッチを簡易に設定画面(Preference)で使用する為に、
SwitchPreference」が追加されました。
本エントリでは、「SwitchPreference」とSwitchPreferenceを拡張するための「TwoStatePreference」を紹介します。


図1:トグルスイッチをPreferenceで使用しているサンプル

SwitchPreferenceはPreferenceクラスを継承して作成されたクラスで、
以下要素を新たに持ちます。

表:SwitchPreferenceに追加されているメソッド一覧

メソッド名概要
setSwitchTextOff() トグルスイッチに表示されるOFFの時のテキストを設定する
setSwitchTextOn() トグルスイッチに表示されるONの時のテキストを設定する
getSwitchTextOff() トグルスイッチにOFFの時に表示するテキストを取得する
getSwitchTextOn() トグルスイッチにOFFの時に表示するテキストを取得する

その他、Preferenceとしての使用方法は以下記事を参考にしてください。
設定画面を簡易に作る

それでは、つづきをどうぞ

Read more >>

スタイラスによる入力イベントを取得する

11月 6, 2011   //   by UpDown-G   //   Android, ユーザインターフェース  //  No Comments

Android4.0では、スタイラスによる入力イベントを取得できるようになりました。

Androidでは、これまでもスタイラスペンによる入力時にイベントは取得できていましたが、マウスや指で端末画面をタッチ、もしくはドラッグした際に発生するイベントと同様にして扱われていました。

Android4.0では、Motion Eventから指、マウス、スタイラス、その他のいずれの入力なのかを判別することができるようになりました。
つまり、スタイラスの入力を、指やマウスとは違った入力として扱うことが可能になったということになります。

今回はMotion Eventからどのようにスタイラスとによる入力イベントを取得する方法について解説します。実機がないため、実際に確認することはできていませんが、ApiDemosのTouchpaint.javaのソースコードとそのサンプルをベースに解説を進めます。


図:ApiDemos の Touch Paintサンプル (android-14/ApiDemos/src/com/example/android/apis/graphics/TouchPaint.java)

Touch Paintサンプルは、端末(画像はエミュレータ)の画面上をマウスや指、スタイラスでドラッグすると、それぞれで違ったスタイルの線を引くことができます。

それでは続きをどうぞ

Read more >>

ページ:12345678910»

技術書新刊 発売中

アンドロイドアカデミアには、CIやテスト、互換検証など実務に生きるノウハウをあつめています

技術書新刊 発売中

Android Next!はAndroid 7.0に対応したはじめての技術書です!


The Web Explorer 2はCSSの中央寄せやWebAudioなど未来を読み解く一冊です


Revised TypeScript in DefinitelylandはTypeScript 2.0(β)に対応した解説書です。インストールから型定義まで幅広くサポートしています


技術書をかこう!はエンジニアらしい執筆環境を構築、HowTo本です