Drawableで角丸長方形
HTMLの世界ではh1やh2といった見出しを角丸長方形などに設定することがあります。
では、Androidではどのように設定するのでしょうか。
CSSほどではありませんが、XMLを使って記述することができます。
この方法であれば画像を使いませんから修正も簡単です。
というわけで、方法です。cornersを用います。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<!-- 背景色 -->
<solid android:color="#67b44a" />
<!-- 角の丸み -->
<corners android:radius="8dp" />
</shape>
このXMLをdrawableに保存し、TextViewのBackGroundに指定すればTextViewの幅にあわせて表示されます。widthがmatch_parent でも 120dpでもしっかり角丸で表示されます。
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="50dp"
android:layout_marginEnd="10dp"
android:layout_marginStart="10dp"
android:gravity="center_vertical|center_horizontal"
android:text="Normal"
android:background="@drawable/kadomaru"/>
といった具合です。
グラデーション付きの角丸長方形
グラデーションを使う際は、gradientを使用します。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<!-- 背景色 -->
<gradient
android:startColor="#FFFFFFFF"
android:endColor="#FF67b44a"
android:angle="0"
/>
<!-- 角の丸み -->
<corners android:radius="8dp" />
</shape>
デフォルトでは左端がstart、右端がendとなります。
この方向を変更したい場合は angleを用います。
gradientタグの中で angle=”270″ とすれば上から下へのグラデーションに変更されます。
<gradient
android:startColor="#0067b44a"
android:endColor="#FF67b44a"
android:angle="270"
/>
左から右が0ですから上から下が270度ということで270というわけです。
ここからは透過グラデーションで表示しています。
透明度は8桁で表すことで表現でき、左2つの数値で指定します。
00xxxxxxで透明度100%、つまり完全な透明、FFで透明度0、つまり塗りつぶしとなります。
中央点を加えたグラデーションの長方形
start、endに加えてもう1点、グラデーションポイントを中央に配置する方法です。
同様にgradientを用い、もう1点としてcenterColorを用います。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<!-- 背景色 -->
<gradient android:startColor="#0067b44a"
android:centerColor="#FF67b44a"
android:endColor="#0067b44a" />
<!-- 角の丸み -->
<corners android:radius="8dp" />
</shape>
３点目を自由に設定するグラデーション
中央ではなく別の地点に3点目を設置する方法ももちろんあります。
これは0～1の数値をあてて、相対的に位置を決定する方法です。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<!-- 背景色 -->
<gradient
android:startColor="#FFFFFF"
android:endColor="#FF67b44a"
android:type="radial"
android:gradientRadius="100dp"
android:centerX="0.3"
android:centerY="0.3"
/>
<!-- 角の丸み -->
<corners android:radius="8dp" />
</shape>
centerXは左端を0、右端を1とした場合で、グラデーションのX軸の中心位置を指定し、
centerYは同様に、上を0、下を1としたY軸中心位置を記述します。
type=”radial”で放射状のグラデーション、type=”sweep”で円形のグラデーションとなります。
何も指定しない場合は直線グラデーションです。
枠線のつける方法
角丸のdrawableやグラデーションの方法は一通り説明しました。続いて枠をつける方法です。
コード自体は変わらず簡単で、次のようになります。strokeを用います。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<!-- 背景色 -->
<solid android:color="#67b44a" />
<!-- 角の丸み -->
<corners android:radius="8dp" />
<stroke
android:width="3dp"
android:color="#FFFFFF"/>
</shape>
となります。実はこの方法、単なる四角の枠を使う際にも利用します。
方法は、そうです。<solid android:color=”#67b44a” />を記述しない、ということです。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
>
<!-- 背景色を指定しない -->
<!-- 角の丸み -->
<corners android:radius="8dp" />
<stroke
android:width="3dp"
android:color="#FFFFFF"/>
</shape>
こうすれば、下のような四角枠が完成です。意外と使えるデザインです。
おわりに
drawableはソースこの他にも円(ring)や楕円(oval)、水平線(line)があります。drawableソースはxmlですからアプリを軽量化させます。サイズや色の変更も容易です。drawableリソースで表現できる図絵は、できる限りこの方法を利用してみてください。
ring,oval,lineは次の機会に。