Browsing articles tagged with " View"

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 >>

Canvasの状態を保存/復帰させる

5月 27, 2011   //   by @mhidaka   //   マルチメディア  //  No Comments

View#onDrawメソッドの表示処理ではCanvasを用いて描画を行います。複数のBitmapやオブジェクトを表示したい場合は描画ごとに表示位置を計算する必要があります。Canvasの状態を保存する主な目的は描画処理の簡略化です。描画位置がわかりやすくなるほか、任意のタイミングでCanvasの状態を復帰させられるメリットがあります。プログラミング上でのテクニックとしてどうぞ。

  • Canvas#save() 状態を保存する
  • Canvas#restore() 保存した状態へ復帰する

Canvas#save/restoreメソッドで保存できるのは回転、平行移動、図形のゆがみなどを表現するmatrix、表示範囲を指定するclip、の2種類の情報です。アプリケーションのスクリーンショットを取得するように1ピクセルの色情報単位で保存・復帰することはできませんので注意してください。

サンプルコード

以下のソースコードを実行すると画像のように直立したマスコット(緑)と傾いたマスコット(赤)が重なって描画されます。

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.WHITE);

            canvas.drawBitmap(mAndroidGreen, 0, 0, mPaint);
            //現在の状態を覚える
            canvas.save();

            //一時的に移動
            canvas.rotate(45);
            canvas.drawBitmap(mAndroidRed, 0, 0, mPaint);

            //移動した分を元に戻す(-45)
            canvas.restore();
        }

6行目で状態を保存します。45度Canvasを回転させてマスコット(赤)を描画した後、13行目で状態を復帰させています。


図示することで、わかりやすく説明できます。図中の1~4の順番でソースコードを実行、描画しています。

  1. Canvas#saveメソッドで現在のCanvas状態(行列matrixと表示範囲clip)を保存
  2. Canvasを45度回転させる
  3. 回転後のCanvasに対してマスコット(赤)をdraw
  4. Canvas#restoreメソッドで元のmatrixと表示範囲に復帰

サンプルコードの全体の解説はつづきから。
Read more >>

画面回転時にonDestroyさせない方法

4月 20, 2011   //   by @mhidaka   //   Hacks  //  No Comments

Androidでは端末を回転させるとActivityは一度破棄されてしまいます。問題のないケースも多いですが、メディアの再生、ゲームなどシビアなアプリケーションでは内部状態onStop/onDestroyを経由すること自体がネックとなります。少しテクニカルですが、画面回転時の処理を独自実装する方法を紹介します。

サンプルコードはGoogleCodeのこちらで公開しています

センサ、独自ビューを組み合わせているため、本記事の前に以下の解説を確認することをお勧めします。

画面回転処理の独自実装の概要

画面回転を独自に対応する一番大きなメリットは回転タイミングを自分で制御できるため、GCやActivityの再生成によるパフォーマンスの影響が抑えられるということです。(おまけとしてAndroid標準で対応していない上下さかさまにも対応できる)
反対に通知バーなどは一緒に回転しない、回転の契機、ロジックが難しくなるといったデメリットも存在します。
今回はAndroidの傾きセンサの値をみて、Viewを回転、表示を切り替えました。おおまかな手順は以下の通りです

  1. 標準のOrientationを固定値にする(android:screenOrientation=”portrait” )
  2. センサから値を読み取り、画面の向きを決定する
  3. Viewを回転し、表示を更新する

Androidのライフサイクル

Activityのライフサイクルのおさらいです。

画面回転時、Activityはライフサイクルに従い、一度onStopを経由しonDestroyされます。回転後、onCreateから画面を再構築します。

Read more >>

Viewをカスタマイズ(独自実装)する

1月 25, 2011   //   by @mhidaka   //   アプリケーション  //  No Comments

AndroidではViewクラスも拡張して独自機能を追加することが可能です。カスタマイズのサンプルとして、Viewにお絵かきできる機能を追加してみます。
今回、タッチ座標の取得にはonTouchEventを使っています。onTouchEventについては以前の記事タッチイベントを取得する(onTouchEventとMotionEvent)を参考にしてください。

独自Viewの作成方法は続きをどうぞ。
Read more >>

ListViewでOverScrollする

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

Android SDK 2.3より、OverScrollが利用できるようになりました。OverScrollとは画面端まで到達した段階から遊びを持ってスクロールできる機能で、UIの向上に寄与します。サンプルプロジェクトを用意しました。GoogleCodeのTechBoosterこちら(SVNが必要です)からどうぞ。

OverScrollを使うのに必要な(代表的な)メソッドは以下の通りです

OverScroll関連メソッド

メソッド 概要
View#overScrollBy オーバースクロールに関する設定
View#onOverScrolled オーバースクロールした結果を受け取る
AbsListView#setOverScrollMode モード設定(ListViewなどで有効)


上記のうち、View#overScrollByやView#onOverScrolledがproctectedなメソッドです。そのためオーバースクロールの実装に当たっては、ListViewなどを継承した独自クラスを作成する必要があります。

本記事は

を参考に作成しました。より詳しい情報を必要な場合は、上記サイトを是非、参考にしてみてください。

サンプルコードは続きから
Read more >>

レイアウトを使って配置する

10月 5, 2010   //   by @mhidaka   //   ユーザインターフェース  //  2 Comments

AndroidではTextVeiwやButtonなどを配置するため、Layoutを利用します。今回は各レイアウトについて簡単に解説します。

レイアウトの種類

レイアウトは以下の4種類を使うことができます。それぞれのLayoutは組み合わせたり、入れ子にしたりして目的の構成を作ります。

  • LinearLayout
    • もっとも単純なレイアウトで、要素となるViewは縦・横へ順番に並びます
  • TableLayout
    • テーブル形式でレイアウトを作成することができるほか、複数の列を結合して配置できます
  • FrameLayout
    • 複数の要素(View)を重ね合わせて表示します。重ね合わせの原点は左上です。
  • RelativeLayout
    • お互いの位置関係により、表示箇所を決めるレイアウトです。


これ以外にも、過去にはAbsoluteLayoutという絶対座標で指定できるレイアウトが存在していました。複数種類の解像度など多環境への対応が難しいレイアウトだったため、現在では非推奨扱いです。

つづきからサンプルソースコードです
Read more >>

技術書新刊 発売中

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

技術書新刊 発売中

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


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


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


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