のらぬこの日常を描く

ノージャンルのお役立ち情報やアニメとゲームの話、ソフトウェア開発に関する話などを中心としたブログです。

【Android】Buttonに対して標準よりも小さいPadding値をJavaコードから設定する。

どうものらぬこです。

バージョンアップ開発中の個人アプリで、複数選択可能な「タグ」のような、見た目、操作性のものを作ろうとしています。

ベースコンポーネントはToggleButtonを使い、ただ、標準のものだと見た目がとてもダサいので、背景を「タグ」風の見た目にして、もう二回りPaddingを小さくしたものを作ることにしました。

ToggleButtonのbackgroundのカスタマイズは xml形式のdrawable resourceを用意してあげれば比較的簡単にできます。ボタンの状態毎にテキスト色をカスタマイズするのはこれに比べると少し面倒くさいですが、layoutでもJavaコードでも素直な実装で実現できます。

ただ、Paddingの値を小さくする方法がややトリッキーでした。 layoutで静的に用意する場合は、ややトリッキーなことをやるだけで実現できるのですが、Javaコードでボタンを動的に生成するようなコードを書く場合、Googleがますます嫌いになるようなコードを書かねばなりません。

今回作ったものは下図のようなものです。 f:id:noranuk0:20180603134701p:plain

なお、今回は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のコード補完機能って便利ですねー

というわけで、未解決の伏線を残したまま終了、なかんじではございますが、今回の記事は以上となります。

お読みいただいてありがとうございました。

Androidアプリ開発の極意 ~プロ品質を実現するための現場の知恵とテクニック

Androidアプリ開発の極意 ~プロ品質を実現するための現場の知恵とテクニック