Android：SeekBarの扱い方

こんにちは

前回enchant.jsの記事を書いておいてなんですが今回はAndroidの話
あっちいったりこっちいったりです。ふらふらです。

では、タイトルの通りSeekBarの扱い方について、今までSeekBarは使ったことがなかったので基本的な使い方になります。

やりたかったことは、フォントの調節をSeekBarで行う感じ。


とりあえず,xmlのレイアウトファイルは次のように

<seekbar 
  android:id="@+id/fontSeekBar" 
  android:layout_height="wrap_content" 
  android:layout_margintop="50dp" 
  android:layout_width="match_parent" 
  android:max="10" android:progress="10">
</seekbar>

<textview 
  android:id="@+id/fontSize" 
  android:layout_gravity="center_horizontal" 
  android:layout_height="wrap_content" 
  android:layout_width="wrap_content" 
  android:text="フォント:○○" 
  android:textsize="18sp">
</textview>

フォントの調節に使うので確認用にTextViewも載せます。
で,ソースコードはこんな感じ

SeekBar seekBar;
TextView textView;
seekBar = (SeekBar)dialog.findViewById(R.id.fontSeekBar);
textView = (TextView)dialog.findViewById(R.id.fontSize);

seekBar.setOnSeekBarChangeListener(new SeekBarChangeListener());  

SeekBarChangeListenerはこちら

class SeekBarChangeListener implements OnSeekBarChangeListener{
  @Override
  public void onProgressChanged(SeekBar seekBar, int progress,
    boolean fromUser) {
   //つまみをドラッグしたとき
   textView.setText("フォント："+seekBar.getProgress());
  }

  @Override
  public void onStartTrackingTouch(SeekBar seekBar) {
   //つまみに触れたとき
  }

  @Override
  public void onStopTrackingTouch(SeekBar seekBar) {
   //つまみを離したとき
  }
 }

onProgressChangedの中でSeekBarの値を取得しTextViewに反映させてあげればseekBarの変化とtextViewが連動して見栄えがよくなります。 基本的にseekBar.getProgress()で現在の値を,setProgress()で値をセットしています。そんな難しくない。 気になったのは,値の設定方法。
xmlのandroid:max
とい項目はあってこれで最大値は決められるらしいのだが
最小値を設定するパラメータはない・・・・
え？なんで？って思ったんだけどなんかなさそう。
SeekBarの最低値は0なんだけどフォントサイズ0で設定するわけにもいかないので配列使って変換することにしました。
こんな感じに

//フォントで設定できる値
 private static int Font[] = {8,12,14,16,18,20,22,24,28,32,36};
 

これでSeekBarを10段階に設定(max=10)して対応させてあげました。
最小値と最大値は下の画像のようになりました。

tl.enchant.js

久しぶりのブログになります。学生なので、春休みに入りました。やったね。


最近扱ってるのがenchant.jsというゲームエンジンを利用した開発なので,そっちの方もちょいちょい書いていきたいと思います。(というかAndroidをあんま触っていない...)

一年ぶりにenchantを触ってリハビリしていたのですが,便利と名高い(？)tl.enchant.jsをようやく使い始めました。アニメーション用のライブラリです。え？去年enchant扱い始めた頃はまだ知らないライブラリ恐怖症だったのですが,使っておけばよかった。

めっちゃ便利です。びっくりした....

ということで概要を僕なりに書いていきます。

まず,enchant.jsを使った通常の書き方
enchant.jsではフレーム数という一秒辺りのコマ数が設定できます。
で,配置したオブジェクトを動かすにはオブジェクトに1フレーム毎の挙動を設定してあげなければなりませんでした。これがめんどくさかった。
例えば,下の画像のようなクマ(変数bear)を左から右へ動かすにはフレームごとに

bear.addEventListener(Event.ENTER_FRAME,function(){
    this.x+=3;
  });

のような記述をしなければなりませんでしたし,画面右で止める・左右に動かすなどの動きにはfor文やif文による制御も必要でした。

これがtl.enchant.jsではすっごく簡単にできるのです。すっごく簡単にできるのです。(大事なことなのでry

bear.tl.moveTo(250,100,32);

これだけ。イベントリスナーも細かい制御もいりません。
.moveTo(x,y,f)はx,yが目標の座標,fがそこまで何フレームかけて進むかを指定しています。
クマの初期位置が(0,100)であったとすると上記のソースだけで画面右へクマが移動します。
左右に動かしたい時も関数を繋いでいけばいいだけ。

bear.tl.moveTo(250,100,32).moveTo(0.100,32).loop();

関数を繋いでいくとキューのように関数が溜まっていき順次実行されます。最後のloop()でその一連の動作を繰り返します。
この動作を実現させるのに去年どれだけ苦労したか・・・物悲しいですね。無知は罪だ。