【Android】Buttonに対して標準よりも小さいPadding値をJavaコードから設定する。
どうものらぬこです。
バージョンアップ開発中の個人アプリで、複数選択可能な「タグ」のような、見た目、操作性のものを作ろうとしています。
ベースコンポーネントはToggleButtonを使い、ただ、標準のものだと見た目がとてもダサいので、背景を「タグ」風の見た目にして、もう二回りPaddingを小さくしたものを作ることにしました。
ToggleButtonのbackgroundのカスタマイズは xml形式のdrawable resourceを用意してあげれば比較的簡単にできます。ボタンの状態毎にテキスト色をカスタマイズするのはこれに比べると少し面倒くさいですが、layoutでもJavaコードでも素直な実装で実現できます。
ただ、Paddingの値を小さくする方法がややトリッキーでした。 layoutで静的に用意する場合は、ややトリッキーなことをやるだけで実現できるのですが、Javaコードでボタンを動的に生成するようなコードを書く場合、Googleがますます嫌いになるようなコードを書かねばなりません。
今回作ったものは下図のようなものです。
なお、今回はToggleButtonで実装していますが、通常のボタン(Button) でも同等の実装で実現できるかと思います。
layout.xmlで静的なボタンとして実装する場合
まずは、ボタン背景をカスタマイズするために背景の drawable.xml と、ボタンの状態によってテキスト色を変化させるための textcolorselector.xml を用意します。
まずは、背景色用のxmlです。ボタンの状態によって見た目を変えたいため、selectorを使って状態ごとのフィルターを作成しています。これを、drawable/background_tagbotton.xml 等の名前で保存してください。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:state_enabled="true"> <shape android:shape="rectangle"> <corners android:radius="5dp" /> <solid android:color="@color/colorAccentAlpha"/> <stroke android:width="1dp" android:color="@color/colorAccent"/> </shape> </item> <item android:state_checked="false" android:state_enabled="true"> <shape android:shape="rectangle"> <corners android:radius="5dp" /> <stroke android:width="1dp" android:color="@color/colorAccentAlpha"/> </shape> </item> <item android:state_checked="true" android:state_enabled="false"> <shape android:shape="rectangle"> <corners android:radius="5dp" /> <solid android:color="@color/colorAccentAlpha"/> </shape> </item> <item android:state_checked="false" android:state_enabled="false"> <shape android:shape="rectangle"> <corners android:radius="5dp" /> </shape> </item> </selector>
次に、テキスト色用の drawable xmlリソースです。背景と同様に、ボタンの状態によって見た目を変えたいため、selectorを使って状態ごとのフィルターを作成しています。これを、drawable/textcolor_tagbotton.xml 等の名前で保存してください。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:color="@color/colorAccent"/> <item android:state_checked="false" android:color="@color/colorAccentAlpha"/> </selector>
最後に、layout.xml で ToggleButton を作成します。Paddingの指定もここで行います。
<ToggleButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:minHeight="0dp" android:minWidth="0dp" android:padding="4dp" android:textOn="on" android:textOff="off" android:textStyle="normal" android:background="@drawable/background_tagbutton" android:textColor="@drawable/textcolor_tagbutton" android:layout_marginTop="4dp" android:layout_marginBottom="4dp" android:layout_marginStart="2dp" android:layout_marginEnd="2dp" android:textAllCaps="false" android:text="sample text"/>
padding の指定を書いただけでは、小さなボタンは作れません。
android:minHeight="0dp" android:minWidth="0dp"
の2つの設定が必要です。
java コードで動的なボタンとして実装する場合。
javaコードで実装する場合も、大抵の場合は、コントロールのオブジェクトをnewした後に、プロパティーを設定する要領で、javaのメソッド呼び出しで設定してあげるだけです。
dataBinding.detailContainer.removeAllViews(); float scale = getResources().getDisplayMetrics().density; ToggleButton button = new ToggleButton(this); button.setText(""); button.setTextOn("on); button.setTextOff("off"); button.setBackgroundResource(R.drawable.background_tagbutton; button.setAllCaps(false); try { @SuppressLint("ResourceType") XmlResourceParser parser = getResources().getXml(R.drawable.textcolor_tagbutton); ColorStateList colors = ColorStateList.createFromXml(getResources(), parser); button.setTextColor(colors); } catch (Exception e) { // handle exceptions } button.setPadding((int)(4 * scale + 0.5f), (int)(4 * scale + 0.5f), (int)(4 * scale + 0.5f), (int)(4 * scale + 0.5f)); button.setMinHeight(0); button.setMinimumHeight(0); button.setMinWidth(0); button.setMinimumWidth(0); dataBinding.detailContainer.addView(button);
paddingに標準より小さい値を設定したボタンをjavaコードで生成する場合も基本的には一緒です。
ただし、最小幅、最小高を設定する部分は、setPadding / setMinHeight / setMinWidth の呼び出しだけでは不十分です。
上のコードの通り、幅と高さそれぞれについて
button.setMinWidth(0); button.setMinimumWidth(0);
button.setMinHeight(0); button.setMinimumHeight(0);
の、2つのメソッドの呼び出しが必要です。
getMinHeight / getMinimuHeight、getMinWidth / getMinimumWidth の違いは?
ToggleButton | Android Developers のあたりを漁ってみたのですが、情報はなく、正直よくわからん。
IDEのコード補完機能って便利ですねー
というわけで、未解決の伏線を残したまま終了、なかんじではございますが、今回の記事は以上となります。
お読みいただいてありがとうございました。
- 出版社/メーカー: BIG ENTER
- メディア: おもちゃ&ホビー
- この商品を含むブログを見る