しかしその下には、RangeSeekBarという似たようなプラグインが。
というわけで、その二つ両方を導入し、比較してみました。
■設置方法
RangeBarは以下のリンクからダウンロードできます。https://github.com/edmodo/range-bar
DownloadZIPをクリックするか、git cloneしてきてください。
ダウンロードした後は、Eclipseにプロジェクトとしてインポートした後、
使いたいAndroidアプリケーションプロジェクトから、ライブラリの追加を行います。
プロジェクトエクスプローラから使いたいプロジェクトを選択し右クリック>プロパティからプロパティを開き、
Android>ライブラリー グループ内の「追加...」から「RangeBar」を選択します。
これでRangeBarの導入は完了。(ここでTheme.Holoがないとかたまに怒られるんですが、わからん)
あとは使いたいActivityなりのレイアウトエディタで、Custom&Library ViewsグループからRangeBarの項目をD&Dしてくればよい…
…はずなんですけど、なぜか表示されなかったのでwikiページ見ながらxmlを手動入力しました。
<com.edmodo.rangebar.RangeBar xmlns:custom="http://schemas.android.com/apk/res-auto" android:id="@+id/rangebar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/textView2" android:layout_centerHorizontal="true" custom:tickCount="7" />
次はRangeSeekBarですね。
RangeSeekBarはライブラリではなく、単一.javaファイルを直接追加するだけのようです。
しかもコピペというなんとも原始的な方法で。
使いたいプロジェクトで右クリック>「新規」>「クラス」、
名前は「RangeSeekBar」、スーパークラスはImageViewらしいんですが、どうせコピペするのでなんでもいいです。
https://code.google.com/p/range-seek-bar/
生成された.javaファイルの一行目「package ~~」を残して、二行目以降全部削除。
上のページの「Source code: class RangeSeekBar.java」欄にあるjavaコードを、
二行目から選択、コピーし、貼り付け。
RangeSeekBar.javaを保存して導入は完了です。
※R.drawableにseek_thumb_normalとseek_thumb_pressedが存在している必要があるようです。今回は偶然にもRangeBarに同じ名前の画像が入っていたのでそれを参照してくれました
xmlから追加できないらしく、Activityなどに張り付けるにはコードから動的に追加する必要があります。
一応Viewを継承してるのになぜxmlから追加できないのか疑問です。
以下は、今回使用した、RangeSeekBarの生成、追加、イベントリスナーの設定、RangeBarのイベントリスナーの設定のコードです。
ただのテストなのでテキトーですが。
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Context context = getApplicationContext();
// create RangeSeekBar as Integer range between 20 and 75
RangeSeekBar<Integer> seekBar = new RangeSeekBar<Integer>(20, 75, context);
seekBar.setOnRangeSeekBarChangeListener(new OnRangeSeekBarChangeListener<Integer>() {
@Override
public void onRangeSeekBarValuesChanged(RangeSeekBar<?> bar, Integer minValue, Integer maxValue) {
// handle changed range values
Log.i("Test", "User selected new range values: MIN=" + minValue + ", MAX=" + maxValue);
((TextView)findViewById(R.id.textView1)).setText("RangeSeekBar \rminValue:" + minValue + " maxValue:" + maxValue);
}
});
RangeBar rangebar = (RangeBar)findViewById(R.id.rangebar);
rangebar.setOnRangeBarChangeListener(new OnRangeBarChangeListener() {
@Override
public void onIndexChangeListener(RangeBar rangeBar, int leftThumbIndex,
int rightThumbIndex) {
// TODO Auto-generated method stub
((TextView)findViewById(R.id.textView2)).setText("RangeBar \rleftThumbIndex:" + leftThumbIndex + " rightThumbIndex:" + rightThumbIndex);
}
});
// add RangeSeekBar to pre-defined layout
ViewGroup layout = (RelativeLayout) findViewById(R.id.relativelayout);
layout.addView(seekBar);
}
■とりあえず触る
RangeBarもRangeSeekBarも、設定された範囲の整数で位置を取得する、というのは変わりません。
ですがRangeBarの方には目盛りがついており、動かしてから指を離すと強制的に近くの目盛りに移動するようです。
対してRangeSeekBarは、大きい範囲を指定できるものの、目盛りはなく、目盛りに吸着するような動作も見られません。
また、RangeSeekBarのonRangeSeekBarValuesChangedは指を離してから呼ばれるのに対し、RangeBarのonIndexChangeListenerはドラッグした時点でどんどん呼ばれるようです。
やっぱり吸着するような動作は見せないようです。
ついでに2.3.3で動作することの確認。
※上で書いた動作は設定で変更できるかもしれませんが、未検証です。
drawableにseek_thumb_normalとseek_thumb_pressedを画像などで用意すればつまみのようなものの画像も好きに変えられます。
色の変更についても、RangeBarなら各種Setterが用意されていますし、RangeSeekBarでも中身を直接いじれば可能です。
バーの色がなぜかconstで定義されているのでconst外してSetter作ればいいんじゃないかな。
■メリット
RangeBar- ライブラリとして作りが良く、Getter/Setterも普通に完備
- カスタマイズ性もそれなりにある
- レイアウトxml上に配置できる
- 手軽に導入でき、サイズも小さい
- 大きな範囲の数字を扱うのに自然
- 日付が扱えるらしい
■結論
モダンに実装したい！20程度以下の段階的な数字を表したい
それなりにカスタマイズしたい ならRangeBar
そんなに使いこなさないから軽量なのがいい
0~100%といった連続的な数字や日付を表したい
コードの質はあんまり重視してない ならRangeSeekBar
っていう感じですかね…
----------------------------
今回のはあくまで私の主観なので、両者ともまだまだ隠れた機能があるかもしれません。
こういった似たようなライブラリの比較はこれからもしていきたいですね。
では！
0 件のコメント:
コメントを投稿