前回の記事でも書きましたが、私は今 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 件のコメント:
コメントを投稿