アンドロイドのボタンデザイン、カスタムボタン、ラウンドボタン、カラー

1年 ago
蓮, 翼
7 minutes

このチュートリアルでは、Androidアプリケーションのボタンをカスタマイズします。Androidのボタンについて知らない場合は、先にこのチュートリアルを確認してください。私たちはボタンにセレクターとシェイプをXMLで設定します。

アンドロイドのボタンデザイン

ボタンの異なる状態に対して異なる振る舞いを定義するためにセレクターが使用されます。ドローアブルステートとは何ですか？ボタンや他のビューの各イベントは、状態の一種です。

  • state_pressed
  • state_selected
  • state_focused
  • state_enabled

ウィジェットにマウスを乗せるとstate_focusedが発生します。通常はエミュレーターでのみ機能します。viewを選択するためにstate_selectedが存在します。ただし、Buttonでは動作しませんが、RadioButtonsでは動作します。ボタンには通常、normal（通常）、pressed（押されたとき）、enabled（有効）という3つの重要な状態があります。セレクターの各状態ごとに、ボタンに異なる描画/色/形状を設定することができます。それぞれを新しいAndroid Studioプロジェクトで実装しましょう。

アンドロイドのカスタムボタンのプロジェクト構造

android button selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:state_focused="true" android:drawable="@color/yellow"/>
    <item android:drawable="@color/green"/>
</selector>

上記のコードでは、各状態はアイテムタグを使用して表されます。セレクタータグは、ある程度までif – else if文のように振る舞います。セレクタータグは上から順に各条件をチェックします。条件が一致した場合、ボタンに関連する内容を設定し、次のアイテムタグの処理を停止します。3番目のアイテムタグはデフォルトです。最後に保持することが重要です。最初に置くと、他の2つのアイテムタグは一切実行されません。上記のドローアブルセレクターファイルをactivity_main.xmlのボタンに設定します。

<Button
            android:id="@+id/btnBgSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector"
            android:padding="8dp"
            android:text="Colored Selector" />

ボタンの背景属性にセレクタが設定されています。

無効ボタンのセレクタ

「btn_bg_selector_disabled.xml」というセレクタは、有効ではないボタンに使用されています。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@color/yellow"/>
    <item android:state_pressed="true" android:drawable="@color/red"/>
    <item android:drawable="@color/green"/>
</selector>

上記のセレクタが機能するためには、android:enabledをfalseと指定する必要があります。

<Button
            android:id="@+id/btnBgSelectorDisabled"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector_disabled"
            android:enabled="false"
            android:padding="8dp"
            android:text="Color Selector Disabled" />

異なるDrawableを持つセレクター

ボタンの状態に基づいて表示される異なるドローアブル画像を設定することができます。この役割を果たすセレクターのコードは、btn_drawable_selector.xmlというファイルに含まれています。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    
    <item android:drawable="@drawable/sad" android:state_pressed="true"/>
    <item android:drawable="@drawable/happy" android:state_focused="true"/>
    <item android:drawable="@drawable/happy"/>

</selector>

注意：フォーカスの状態はスマートフォンでは機能しません。また、ボタンの背景として設定された描画可能な画像は、その幅/高さがボタンよりも大きい場合に伸びることがあります。そのため、描画可能な画像に応じてボタンの幅/高さを設定する必要があります。これは、xmlでハードコーディングするか、プログラムで描画可能な画像の寸法を取得してボタンに設定することで行うことができます。便宜のために、ここでは前者を行っています。

<Button
            android:id="@+id/btnDrawableSelector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/btn_drawable_selector"
            android:padding="16dp" />

ImageButtonは、ボタンの背景として描画可能なDrawableを表示する必要がある場合に最適なViewです。適切にDrawableにフィットするため、ImageButtonにはandroid:scale属性でDrawable画像のサイズを調整する機能があります。

<ImageButton
            android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@color/green"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

アンドロイドボタンの色

セレクター内の状態に応じてボタンのテキストの色を変更することができます。btn_txt_selector.xmlの次のコードがそれを行います。android:drawableの代わりにここでandroid:colorを使用する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:color="@color/red"/>
    <item android:state_focused="true" android:color="@color/yellow"/>
    <item android:color="@color/green"/>
</selector>

レイアウト内のボタン

<Button
            android:id="@+id/btnTxtSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />

「Androidボタンの形状」

ボタンには、xmlタグを使用してカスタムの形状を設定することができます。これらのxmlファイルは、drawableフォルダー内にも作成されます。shapeはセレクターの内部で使用することができます。形状は、矩形（デフォルト）、楕円、リング、ラインに設定することができます。shapeタグの中で最もよく使用されるタグは次のとおりです。

  • – Setting start and end colors of the gradient along with the type(radius, linear, sweep)
  • – Setting border color and width
  • – Setting the solid color on the button
  • – Setting radius

Androidの角丸ボタン

btn_shape_round.xmlファイルのXMLコードは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:padding="16dp"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />
    <corners android:radius="10dp" />
</shape>

セレクターと同様に、Androidのxmlレイアウト内のボタンのandroid:backgroundタグにこれを設定することができます。

Androidボタンの形状とグラデーション

次のbtn_shape_gradient.xmlファイルでは、グラデーションを半径状に設定しました。また、gradient_radius属性も設定する必要があります。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <gradient
        android:endColor="@color/green"
        android:gradientRadius="30dp"
        android:type="radial"
        android:startColor="@color/yellow" />

    <corners android:radius="@dimen/btn_corner_radius" />

    <stroke
        android:width="4dp"
        android:color="@android:color/black" />

</shape>

アンドロイドのボタンの形状とセレクターを一緒に使用します。

btn_selector_shape.xmlには、セレクタが格納されています。各アイテムには、指定された形状があります。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">

        <shape android:shape="oval">
            <gradient android:angle="135" android:endColor="@color/jd_red" android:startColor="@color/green" />
            <corners android:radius="20dp" />
            <stroke android:width="2dp" android:color="@android:color/black" />
        </shape>

    </item>

    <item>
        <shape android:shape="rectangle">
            <gradient android:angle="225" android:endColor="@color/green" android:startColor="@color/jd_red" />
            <corners android:radius="@dimen/btn_corner_radius" />
            <stroke android:width="4dp" android:color="@android:color/black" />
        </shape>

    </item>
</selector>

ボタンにこれを設定すると、ボタンがクリックされたときに形状が長方形から楕円に変わります。角度は45の倍数で指定された線形グラデーション以外ではクラッシュします。ボタンの形状をカプセルとして設定するには、btn_shape_capsule.xml内のセレクターに形状を設定します。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape android:shape="rectangle">

            <solid android:color="@color/colorAccent" />
            <corners android:radius="10dp" />

        </shape>

    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/yellow" />
            <corners android:radius="10dp" />
        </shape>

    </item>

</selector>

上記のボタンの例をすべて提供するMainActivity.javaクラスのコードは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:weightSum="2">


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Selectors"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />


        <Button
            android:id="@+id/btnBgSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector"
            android:padding="8dp"
            android:text="Colored Selector" />

        <Button
            android:id="@+id/btnBgSelectorDisabled"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_bg_selector_disabled"
            android:enabled="false"
            android:padding="8dp"
            android:text="Color Selector Disabled" />

        <Button
            android:id="@+id/btnDrawableSelector"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_margin="8dp"
            android:background="@drawable/btn_drawable_selector"
            android:padding="16dp" />

        <ImageButton
            android:id="@+id/imgButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@color/green"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:id="@+id/btnTxtSelector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Shapes+Selectors"
            android:textColor="@android:color/black"
            android:textSize="18sp"
            android:textStyle="bold|italic" />

        <Button
            android:id="@+id/btnRoundShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_round"
            android:padding="8dp"
            android:text="ROUND SHAPE" />

        <Button
            android:id="@+id/btnBgShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:text="SHAPE WITH GRADIENT" />


        <Button
            android:id="@+id/btnSelectorShape"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_selector_shape"
            android:padding="8dp"
            android:text="SELECTOR SHAPE" />


        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_gradient"
            android:padding="8dp"
            android:scaleType="center"
            android:src="@drawable/btn_drawable_selector" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:background="@drawable/btn_shape_capsule"
            android:padding="8dp"
            android:text="Text Selector"
            android:textColor="@drawable/btn_txt_selector" />


    </LinearLayout>


</LinearLayout>

アンドロイドのカスタムボタンデザインアプリの出力

android custom button design app example

Androidボタンデザインプロジェクトをダウンロードしてください。

コメントを残す 0

Your email address will not be published. Required fields are marked *