xmlのshapeタグって意外と自由度が高いっていう話 part3

初めに

今回は、shapeタグの紹介記事第三弾になります
3個目はViewに一気対してこだわりを持たせられるgradientです。

本文

こちらは名前の通りグラデーションをつけることができ、色はstartColor、centerColor、endColorの三種類を指定することがきます。
・startColorはスタート位置の色
・centerColorは中間地点の色
・endColorは最終地点の色を指定することができます。
色以外の要素となると
・type
・gradientRadius
・centerX
・centerY
・angle
の5点があります

typeとはグラデーションの形を指定することができ、
・linear
・radial
・sweep
の3種類があり、radialは放射状に、sweepは円形にグラデーションをかけることができ、typeを指定しない場合はlinearになり直線状のグラデーションがかかります。
gradientRadiusはradialを使用してる時に半径を指定することができます。
centerXとcenterYは0~1の間でグラデーションの場所を指定することができるので、放射状にグラデーションを表示している時などに便利です。
最後にangleです。
gradientはデフォルトだと左から右にグラデーションをかけるのでangleに0~360を指定することで方向を変更することができます。
各形状のサンプルコードと画像を置いておきます。

---

linear

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:centerColor="@color/white"
        android:endColor="@android:color/transparent"
        android:type="linear"
        android:startColor="@color/white" />
</shape>

---

radial

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:centerColor="@color/black"
        android:endColor="@android:color/white"
        android:type="radial"
        android:centerX="0.5"
        android:centerY="0.5"
        android:gradientRadius="200dp"
        android:startColor="@color/white" />
</shape>

---

sweep

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:centerColor="@color/black"
        android:endColor="@android:color/darker_gray"
        android:type="sweep"
        android:startColor="@color/white" />
</shape>

最後に

Shapeタグを紹介していくシリーズは今回が最後になります。
自由度が高く、簡単に少しだけこだわりを持たせたり、見た目のグレードアップにつながるものなので皆さんもぜひ活用してみてください。
前回の記事はこちら：https://qiita.com/ryuji_sato/items/b2f1f716e686d26bc849