画像ファイルを使わずにそこそこ見栄えのいいボタンを作ってみる

約3ヶ月ぶりの更新。
ちょっと仕事がバタバタしててというか、ストレスたまりすぎてて家に帰ってまでプログラムのことを考えたくなかったというか。

フロンティア（MHF）始めたのが原因かもしれませんが。
3鯖でのんびりやってますので、見かけたら声かけてください。喜びます。

で、仕事でAndroidアプリをいろいろと公開していますが、自分でもAndroid端末使いだして気づいたことは、iPhoneと比較してストレージ容量が非常に少ないこと。
なので、アプリのサイズは少しでも小さくしたほうがよいですね。microSDカードに移せますが、ユーザーが安物SDカード使ってると目に見えて処理が遅くなりますし。

で、これまではオリジナルボタンとか背景とかはデザイナーさんに画像ファイルを作ってもらってたんですが、できれば画像は使わない方向でいきたいなー、ということでちょっとだけやってみました。

とりあえず作ってみたサンプルを貼ります。

画像でかいなあｗ。

で、上から簡単に書いていきますが、「標準ボタン」ってのはそのままです。
何も指定せずにボタンを作るとそんな感じになります。これは端末依存で少し変わりますね。僕のはXperia arcです。

で、標準ボタンとそれ以外でボタンの大きさが違いますが、これlayoutファイルでは全部同じサイズ（width:120dp/height:48dp）で指定しています。
よーするに、標準ボタンは実際のViewの領域とボタン画像の領域が少し違うみたいですね。

で、どちらも標準以外はdrawableディレクトリの下にxmlを置いて、そこで指定しています。
いっこずつ説明するほどのことではないので、ざっくりと書くと、上の写真は単純なタグで作ってみました。下の写真はを使って複数のを重ねて表示してる感じですね。

ということで、細かいことは抜きにしてxmlのソースを貼ります。

ボタン１

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#FFFFB7" />
</shape>

ボタン２

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#FFFFB7" />
    <stroke
        android:color="#F95E00"
        android:width="2dp" />
    <corners 
        android:radius="8dp" />
</shape>

ボタン３

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFFB7" 
        android:endColor="#FF9900"
        android:angle="270" />
    <stroke
        android:color="#F95E00"
        android:width="2dp" />
    <corners 
        android:radius="8dp" />
</shape>

ボタン４

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFFB7"
        android:centerColor="#FF9900" 
        android:endColor="#FFFFB7"
        android:angle="270" />
    <stroke
        android:color="#F95E00"
        android:width="2dp" />
    <corners 
        android:radius="8dp" />
</shape>

ボタン５

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFFB7"
        android:centerColor="#FFFFB7" 
        android:endColor="#FF9900"
        android:angle="270" />
    <stroke
        android:color="#F95E00"
        android:width="2dp" />
    <corners 
        android:radius="8dp" />
</shape>

ボタン６

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid
            android:color="#00000000" />
    </shape>
</item>
<item android:top="1dp" android:left="4dp" android:bottom="4dp" android:right="4dp">
    <shape android:shape="rectangle">
        <solid
            android:color="#D7EBFF" />
    </shape>
</item>
</layer-list>

ボタン７

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid
            android:color="#D7EBFF" />
    </shape>
</item>
<item android:top="24dp">
    <shape android:shape="rectangle">
        <solid
            android:color="#B7DBFF" />
    </shape>
</item>
</layer-list>

ボタン８

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid
            android:color="#D7EBFF" />
        <corners
            android:radius="6dp" />
    </shape>
</item>
<item android:top="24dp">
    <shape android:shape="rectangle">
        <solid
            android:color="#B7DBFF" />
        <corners
            android:radius="6dp" />
    </shape>
</item>
</layer-list>

ボタン９

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <gradient
            android:startColor="#D7EBFF"
            android:endColor="#59ACFF"
            android:angle="270" />
        <corners
            android:radius="6dp" />
    </shape>
</item>
<item android:top="24dp">
    <shape android:shape="rectangle">
        <solid
            android:color="#28002F7B" />
        <corners
            android:radius="6dp" />
    </shape>
</item>
</layer-list>

ボタン１０

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <gradient
            android:startColor="#D7EBFF"
            android:centerColor="#59ACFF"
            android:endColor="#D7EBFF"
            android:angle="270" />
        <corners
            android:radius="6dp" />
    </shape>
</item>
<item android:top="24dp">
    <shape android:shape="rectangle">
        <gradient
            android:startColor="#28002F7B"
            android:centerColor="#50002F7B"
            android:endColor="#36002F7B"
            android:angle="270" />
        <corners
            android:radius="6dp" />
    </shape>
</item>
</layer-list>

ボタン１１

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <solid 
            android:color="#B30078"/>
    </shape>
</item>
<item android:top="2dp" android:left="2dp" android:right="2dp" android:bottom="2dp">
    <shape android:shape="rectangle">
        <solid
            android:color="#FFFFFF" />
    </shape>
</item>
<item android:top="3dp" android:left="3dp" android:right="3dp" android:bottom="3dp">
    <shape android:shape="rectangle">
        <gradient 
            android:startColor="#FFE3F7"
            android:endColor="#FF35BD"
            android:angle="270"/>
    </shape>
</item>
<item android:top="24dp" android:left="3dp" android:right="3dp" android:bottom="3dp">
    <shape android:shape="rectangle">
        <gradient 
            android:startColor="#28FD00AB"
            android:endColor="#28FF8EDB"
            android:angle="270"/>
    </shape>
</item>
</layer-list>

ボタン１２

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <gradient 
            android:startColor="#FFF2B7"
            android:centerColor="#FFC959"
            android:endColor="#FFF2B7" />
        <corners 
            android:radius="10dp" />
        <stroke
            android:width="2dp"
            android:color="#F95E00" />
    </shape>
</item>
<item android:top="34dp" android:left="2dp" android:bottom="10dp" android:right="2dp">
    <shape android:shape="rectangle">
        <gradient
            android:startColor="#FFE1A4"
            android:endColor="#F95E00" />
    </shape>
</item>
<item android:top="2dp" android:left="98dp" android:bottom="2dp" android:right="18dp">
    <shape android:shape="rectangle">
        <gradient
            android:startColor="#FFE1A4"
            android:endColor="#F95E00" 
            android:angle="270" />
    </shape>
</item>
</layer-list>

公式リファレンスで書いてること以上のものはやってないです。
あ、いっこ気づいた点として、タグって4隅それぞれ別の数値を設定できるのですが、で重ねているの中で4隅別の指定をしたらエラーが出てlayoutのほうで読み込んでくれませんでした。残念。

久々に書いた割には内容うすいわー。うっすいわー。