android:整理drawable（shapdrawable）（二）

前言

bitmapdrawable 與nithpathdrawable 完結，接下來是shapedrawable。

shapedrawable是使用頻率最高的drawable 可見其重要性。

shapedrawable

shapedrawable 有 rectangle、oval、line、ring

分別對應 矩形、橢圓、橫線、圓環。

矩形

先看一段:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:radius="20dp">
    </corners>
    <gradient
        android:angle="0"
        android:startColor="#008577"
        android:centerColor="#FFF200"
        android:endColor="#D81B60"
        >
    </gradient>
    <size
        android:height="100dp"
        android:width="100dp">
    </size>
</shape>

效果:

總結起來就4個字，華麗庸俗。

那就來介紹一下其中的做用:

android:shape：形狀

corners android:radius="20dp" 邊角20dp。

gradient：漸變

size:大小,有寬高兩個屬性。

那麼重點就是:gradient，其餘的都很簡單易懂。

gradient 屬性:

angle 表示漸變的角度，這個角度只能是45的倍數。

若是把角度比做是旋轉，不如把角度比做燈光照射，如上圖。

android:startColor="#008577" // 開始漸變的顏色
android:centerColor="#FFF200" // 中間漸變的顏色
android:endColor="#D81B60" // 結束漸變的顏色

在這上面還有一個重要的屬性:centerX:

如圖比較下:centerX:0.1

centerX:0.2

centerX:0.3

相信已經明白了這個屬性的意思了。

漸變分爲:線性漸變，徑向漸變，以及掃描線漸變

上面就是線性的了。

看下徑向的:

<gradient
    android:startColor="#008577"
    android:centerColor="#FFF200"
    android:endColor="#D81B60"
    android:gradientRadius="45dp"
    android:type="radial"
    >
</gradient>

其餘不變替換gradient部分:

黃色的太陽，感受有點科技感了。

關鍵部分，既然是徑向變，其實就是gradientRadius要設置，畢竟要有半徑的吧，設置gradientRadius="60dp"看下。

上圖可看，其實就是中心點到黃色的圓環位置，設置100看下，這裏爲何設置100呢？

<size
        android:height="100dp"
        android:width="100dp">
</size>

如圖:

在加上另外兩個有用的屬性:

<gradient
    android:startColor="#008577"
    android:centerColor="#FFF200"
    android:endColor="#D81B60"
    android:gradientRadius="45dp"
    android:type="radial"
    android:centerX="0.1"
    android:centerY="0.5"
    >
</gradient>

效果:

如此可見，真的就很是明瞭了。

接下來就是sweep：這東西就詭異了。。。

<gradient
    android:startColor="#008577"
    android:centerColor="#FFF200"
    android:endColor="#D81B60"
    android:type="sweep"
    >
</gradient>

很是好，很是beautiful。
這裏能夠看到中心點在中間，那麼能夠遐想一下，是否能夠改變其位置。

padding:padding是內邊距的意思。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners
        android:radius="20dp"
        ></corners>
    <gradient
        android:startColor="#008577"
        android:centerColor="#FFF200"
        android:endColor="#D81B60"
        android:type="sweep"
        android:centerX="0.3"
        android:centerY="0.6"
        />
<!--<padding-->
<!--android:left="100dp"-->
<!--&gt;</padding>-->
        <stroke
            android:width="2dp"
            android:color="@color/colorPrimary"
            android:dashWidth="2dp"
            android:dashGap="2dp"
            >

        </stroke>
        <size
            android:height="100dp"
            android:width="100dp">
        </size>
</shape>

而後再layout中引用:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/testdrawable"
    >
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@drawable/testdrawable"
        />
</LinearLayout>

效果:

加上padding:

<padding android:left="100dp" ></padding>

效果:

solid

關於solid 沒什麼好介紹的，solid就是設置color的，和gradient 是衝突的，android：color就能夠設置其總體顏色。

stroke

我翻譯過來是輕撫，其實就是border的意思。
加上:

<stroke
    android:width="2dp"
    android:color="@color/colorPrimary"
    >

效果:

加上2dp的綠色的框。
其餘兩個屬性:dashWidth,dashGap

<stroke
    android:width="2dp"
    android:color="@color/colorPrimary"
    android:dashWidth="2dp"
    android:dashGap="2dp"
    >

這兩個以爲了邊框設置爲虛線:

橢圓

設置一下type="oval",以下:

由於寬高都是相等的，因此是圓。
裏面的屬性一致，很少介紹。

橫線

type 設置爲type="line",以下：

就真的是條線了。

圓環

設置type="ring",而後修改code:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    >
    <gradient
        android:centerColor="#ff0000"
        android:endColor="#0ff676"
        android:startColor="#B23AEE"
        android:useLevel="false" />
    <size
        android:height="100dp"
        android:width="100dp"
        ></size>
</shape>

以下:

| 值| 描述|
|-|-|
|android:innerRadius|圓的內半徑,優先級高於android:innerRadiusRatio|
|android:innerRadiusRatio|圓的半徑與drawable的比例，默認值爲3，也就是寬度的1/3。若是是n的話，就是寬度/n|
|android:thickness| 圓環的厚度,外徑-內徑|
|android:thicknessRatio| 圓環的厚度的比例,默認值爲9，佔用1/9。若是是n的話，就是寬度/n|

如今能夠看出上圖圓環厚度，大概是1/3，由於分紅9份，佔用3份。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="3"
    android:thicknessRatio="9"
    android:useLevel="false"
    >
    <gradient
        android:centerColor="#ff0000"
        android:endColor="#0ff676"
        android:startColor="#B23AEE"
        android:useLevel="false" />
    <size
        android:height="100dp"
        android:width="100dp"
        />
</shape>

這樣設置和剛纔的效果同樣，接下來就是本身的設計與審美了。

總結

shapeDrawable 分爲rectangle,oval,line,ring。 總結如上述。。。。