2014-05-02

左右にスライドして実行するAndroid-Bootstrap 拡張ボタンを作ってみた。(ダウンロード可)

前回の記事でも書きましたが、私は今 Android-Bootstrap にハマっています。
とても便利なので。(^-^)v

ということで今回は前回に引き続き Android-Bootstrap を拡張したスライドボタンをここで公開したいと思います。




とはいえ、作業はほぼ前回と同じなので簡単に説明します。


[準備編]

1.まずGitHub からBootstrapSlideButtonをダウンロードし解凍してください。

2.Android-Bootstrap の「src」の中に「com.sukohi.lib」というパッケージフォルダを作り、BootstrapSlideButton.javaをコピー(もちろん移動でもOK)

3.次に「layout」フォルダの中に、bootstrap_slide_button.xml をコピー。

4.最後に「values」の中にattrs.xml をコピーして上書きする。


はい。
以上で準備は完了です。


[実行編]

では、実際に使って見ましょう。

使いたいレイアウトのxmlの中で、

    <com.sukohi.lib.BootstrapSlideButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        bootstrap:bsb_type="success"
        bootstrap:bsb_slide_mode="both"
        bootstrap:bsb_right_text="Right Text"
        bootstrap:bsb_center_text="Center Text"
        bootstrap:bsb_left_text="Left Text"
        bootstrap:bsb_text_size="16"
        bootstrap:bsb_right_icon="fa-floppy-o"
        bootstrap:bsb_left_icon="fa-times-circle-o"
        bootstrap:bsb_restorable="true"
        bootstrap:bsb_padding="10"
        bootstrap:bsb_padding_top="10"
        bootstrap:bsb_padding_right="10"
        bootstrap:bsb_padding_bottom="10"
        bootstrap:bsb_padding_left="10" />

こんな感じでタグを配置します。
(※ネームスペースとして xmlns:bootstrap="http://schemas.android.com/apk/res-auto" を忘れずに!)

プロパティの意味は以下です。

bootstrap:bsb_type ・・・ ブートストラップの色タイプ。「Default」「Primary」「Info」「Success Warning」「Danger」「Inverse」の7つ。

bootstrap:bsb_slide_mode ・・・ 右のみ、左のみ、両方にスライド可能かを決める。パラメータは「right」「left」「both」

bootstrap:bsb_right_text ・・・ 右側のテキスト

bootstrap:bsb_center_text ・・・ 中央のテキスト

bootstrap:bsb_left_text ・・・ 左側のテキスト

bootstrap:bsb_text_size ・・・ テキストのサイズ

bootstrap:bsb_right_icon ・・・ 右側のアイコン(fa-****という形。Android-Bootstrapと同じ)

bootstrap:bsb_left_icon ・・・ 左側のアイコン

bootstrap:bsb_restorable ・・・ スライドさせたあとも元に戻せるかどうか

bootstrap:bsb_padding ・・・ padding。これを使うと top, right, bottom, left を省略可。

bootstrap:bsb_padding_top
bootstrap:bsb_padding_right
bootstrap:bsb_padding_bottom
bootstrap:bsb_padding_left ・・・ 個別のpadding。


※コード内での使い方は「BootstrapSlideButton.java」の中にある「Example」を参照してください。


ちなみに今回のボタンは本日アップデートした『HTBニュース』で使われています。
ぜひ参考にしてみてくださいね。

ちなみに、このスライドボタンだけでなくチェックボックスやCalloutなどもGitHubで公開しています。もしもう少し数が多くなってきたら「Android-Bootstrap ○○」みたいな形でひとまとめにして公開したいと思います。
(・・・とはいえ、本家のBootstrap とは全く関係のないコンポーネントもありますけどね^^;)

お疲れ様でした。


0 件のコメント:

コメントを投稿