読者です 読者をやめる 読者になる 読者になる

なら@はてなブログ

福岡で働くスマートフォンエンジニア(おっさん)のブログ。更新頻度がとにかく低いのが悩み。

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

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


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


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


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


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

f:id:narazoro:20110710131843p:image

f:id:narazoro:20110710131844p:image


画像でかいなあw。


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

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


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


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


ボタン1

<?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>

ボタン2

<?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>

ボタン3

<?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>

ボタン4

<?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>

ボタン5

<?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>

ボタン6

<?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>

ボタン7

<?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>

ボタン8

<?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>

ボタン9

<?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>

ボタン10

<?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>

ボタン11

<?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>

ボタン12

<?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のほうで読み込んでくれませんでした。残念。


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