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点目を自由に設定するグラデーション
中央ではなく別の地点に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は次の機会に。