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

AnimationDrawableでアニメーションを作る

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

AnimationDrawableを使うと、XMLでリソースを用意するだけで簡単にアニメーションが作成できます。

画像を事前に用意します。今回は6枚の画像を(android_logo,1~5.jpgを)連続表示して回転しているように見えるアニメーションを作成します。
リソースの登録は通常通り、Drawableに追加します(パラパラマンガのようになります)
今回はXMLでアニメーションの設定を行うのでDrawableの下にxmlも一緒に配置します

XMLリソースの設定

/res/drawable/android_animation.xml

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item android:drawable="@drawable/android_logo" android:duration="50" />
    <item android:drawable="@drawable/android_logo2" android:duration="50" />
    <item android:drawable="@drawable/android_logo3" android:duration="50" />
    <item android:drawable="@drawable/android_logo4" android:duration="50" />
    <item android:drawable="@drawable/android_logo5" android:duration="50" />
    <item android:drawable="@drawable/android_logo6" android:duration="50" />
 </animation-list>

animation-listにitemを登録します。android:oneshot=”false”なのでリピートONです(true設定で1度のみアニメーションを行います)。また、itemのandroid:durationはミリ秒(ms単位)で指定できます。
animation-listの概要、サンプルコードは続きから。
Read more >>

プログレスバーをカスタマイズする

12月 1, 2010   //   by kkato   //   ユーザインターフェース  //  No Comments

以前、プログレスバー、プログレスダイアログを使って進捗を表示するでプログレスバーの使い方を説明しました。

今回は、用意した画像でプログレスバーを表示する方法を説明します。

上記の右側の画像のように画像を用意することで標準のUIとは異なるプログレスバーを出すことが可能です。

それでは続きで説明します。

Read more >>

Spinnerクラスのラジオボタンをカスタマイズする

11月 28, 2010   //   by kseto   //   ユーザインターフェース  //  1 Comment

Spinnerクラスの使い方については以前、
「Spinnerクラスを使ってコンボボックスを表示する」で紹介しました。

 

Spinnerクラスのドロップダウンリストの右側にはラジオボタンがあり、今選択されている項目が
一目で分かるようになっていますが、このラジオボタンは好きなアイコンに変えることができます。

というわけで、今回はSpinnerクラスのラジオボタンをカスタマイズする方法について
説明したいと思います。くわしくは続きからどうぞ。

Read more >>

Viewにアニメーションを付与する(Tweenアニメーション)

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

以前のViewFlipperでアニメーションする(ViewAnimator) では、ViewFlipperにアニメーションをつける方法を紹介しました。今回はより一般的にViewにアニメーションをつける方法、アニメーションの種類を解説します。

アニメーションのタイプは大きく2つに分類できます。Tweenアニメーション(Animation)とFrameアニメーション(AnimationDrawable)です。

  • Tweenアニメーション:1つのイメージを連続に変化させるタイプ
    • 移動、フェード、回転、拡大縮小、それらを組み合わせて変化させます
  • Frameアニメーション:順番にイメージを並べて表示してアニメーションにするタイプ
    • 順番に表示させる画像をあらかじめ用意して、パラパラ漫画のように表示します

Tweenアニメーション

ここでは1つのイメージを連続的に変化させるTween Animationを解説します。アニメーションの動きはXMLとソースコードで定義できます。

  1. アニメーションのもとになる動きを決める(移動、透明度、回転、拡大縮小)。
  2. XMLやソースコードでアニメーションを記述(XMLの場合は属性で表現)
  3. Viewにアニメーションを設定する

TweenアニメーションはAnimationクラスを使って表現されます。アニメーションの種類は5つあり、いずれもAnimationクラスを継承しています。

Tweenアニメーションの種類

アニメーションの種類 概要
AlphaAnimation 透明度を変更する
AnimationSet アニメ要素を保持するコンテナ
RotateAnimation 回転する
ScaleAnimation 拡大・縮小を行う
TranslateAnimation 移動、変形を行うアニメーション

以下、アニメーションの作り方です
Read more >>

ViewFlipperでアニメーションする(ViewAnimator)

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

ViewFlipperでレイアウトやViewを切り替えるでは基本的な使い方を紹介しました。
今回はViewFlipperへのAnimation設定方法を解説します。

アニメーションはViewFlipper独自の機能というわけではありません。ViewFlipperの親クラスであるViewAnimatorのメソッドにより実現しています。
android.widget.ViewAnimator を継承しているクラスは多くはありませんが、リファレンスでは以下の4つのウィジェットがあります(参照)。

  • ViewFlipper
  • ViewSwitcher
    • ImageSwitcher
    • TextSwitcher

以下ではViewFlipperをベースにViewAnimatorの機能を記載していますが、
上記4つのウィジェットは、いずれも今回紹介するアニメーションの設定方法が利用できます。

アニメーションする

アニメーションする方法はソースコードで指定する場合と、XMLでの指定の2通りがあります。
ソースコードからの指定で、アニメーションに必要なメソッドは以下の通りです。

  • ViewAnimator#setInAnimation(Animation inAnimation)
  • ViewAnimator#setOutAnimation(Animation inAnimation)

スクリーンにViewが表示されるタイミング/非表示になるタイミングでアニメーションを設定できます。

		case R.id.prevButton:
			viewFlipper.setInAnimation(AnimationUtils.loadAnimation(this,
					android.R.anim.slide_in_left));
			viewFlipper.showPrevious();
			break;

上記サンプルでは、AnimationUtilsをつかってAndroid SDK標準で用意されているアニメーションを利用しています。
Android SDKのアニメーションのリソース一覧は以下の通りです。
Read more >>

タイトルバーにアイコンを表示する

11月 14, 2010   //   by kseto   //   ユーザインターフェース  //  2 Comments

Androidアプリケーションのタイトルバーは自由にカスタマイズすることができます。
今回はタイトルバーにアイコンを表示する方法をご紹介します。

詳細は続きからどうぞ。

Read more >>

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

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

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

レイアウトの種類

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

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


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

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

リストビューをカスタマイズする

9月 23, 2010   //   by kkato   //   ユーザインターフェース  //  4 Comments

以前の記事(リストビューを使ってデータを一覧表示する)でリストビューを扱う方法がありましたが、文字だけを表示させていました。

今回は画像と文字を表示させてみようと思います。

では続きで説明して行きます。

Read more >>

シークバーを利用する方法

9月 11, 2010   //   by kseto   //   ユーザインターフェース  //  1 Comment

今日はシークバーについて紹介します。
シークバーはツマミをマウスで左右にドラッグしてパラメータを調整するGUIです。
オーディオのボリュームコントロールなど、量的なパラメータを設定する場合に重宝すると思います。

詳細は続きからどうぞ。

Read more >>

AlertDialogで文字を入力する(2) – カスタムダイアログ

9月 7, 2010   //   by @mhidaka   //   ユーザインターフェース  //  1 Comment

Androidには標準でいろんなダイアログが用意されています。これまでに紹介したダイアログは警告表示(AlertDialog)時刻入力(TimePickerDialog)日付入力(DatePickerDialog)などです。

今回は、文字入力など開発者がより自由に使えるダイアログのカスタマイズについてご紹介します。ActivityのshowDialog()onCreateDialog()を使えば簡単にレイアウトファイルを適用した、カスタムダイアログを作成できます。

続きはサンプルコードと詳細です。
Read more >>

ページ:«12345678910»

技術書新刊 発売中

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

技術書新刊 発売中

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


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


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


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