【Android】Viewの装飾
TextViewやEditTextをはじめとするViewクラスを継承する多くのViewは、様々な装飾をすることが可能です。
個人アプリは特にシンプルなUIになりがちですが、こうした装飾をすることで見た目が一気にグレードアップします。
ここではいくつかそのサンプルを上げておきます。
実装
装飾を定義したファイルの準備
drawble/view_frame.xml
方法としては、drawble配下に装飾用の定義を記述したxmlファイルを用意しておき、Viewのバックグラウンドに指定します。
xmlファイルを追加は、プロジェクトメニューの drawbleを右クリック → New → File で追加します。
ファイル名は任意で、view_frame.xmlとした場合、適用したいViewのbackground属性に以下のように設定します。
android:background="@drawble/view_frame"装飾定義ファイルには、shapeタグとその子要素によって記述します。
どのように記述していくのかを以下に記載していきます。
枠線をつける
drawble/view_frame.xml
まずはシンプルに枠線をつけてみます。特にデフォルトのEditTextは枠線がなく、明るい画面にデフォルトのEditTextだと入力欄であることが気づきにくいという難点があるので枠線は必須だと個人的に思ってます。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#232323" />
</shape>
strokeタグでEditTextに枠線をつけます。
widthで線の幅、colorで色を指定できます。
背景色をつける
drawble/view_frame.xml
これもよく使います。EditTextでは特に淡い色にして背景との境界を視認しやすくすると良いです。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#232323" />
<solid android:color="#ddd" />
</shape>
solidタグで背景色を指定します。
角を丸くする
drawble/view_frame.xml
これはあまり使ったことがないですが、一気に柔らかいイメージになるのでアプリケーションのタイプによってはハマると思います。
もちろんButtonコントロールにも使えるので、一昔前のiPhoneアプリみたいに作ることもできます。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#232323" />
<corners android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" />
</shape>
cornersタグを使えば、EditTextの角に丸みをつけることができます。
- topLeftRadius 左上
- topRightRadius 右上
- bottomLeftRadius 左下
- bottomRightRadius 右下
これらの要素は丸みの度合いが全て同じ値であれば、android:radius で一括指定できます。
グラデーションをつける
drawble/view_frame.xml
これはちょっと使い所が難しそうですが、こんな事もできますという例です。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<stroke android:width="2dp" android:color="#232323" />
<corners android:radius="10dp" />
<gradient android:angle="0" android:startColor="#aff" android:endColor="#ffa" android:type="linear" />
</shape>
gradientタグで背景色にグラデーションをつけることができます。
startColorから始まり、endColorで終わるようにグラデーションがつきます。
angle要素は、グラデーションの角度のことで0のときは左から右へ、90にすると下から上へグラデーションがかかります。
コメント
コメントを投稿