說起shape,大家應該或多或少都知道并用過,有什么用,我們平常在開發當中,通常會遇到這樣的情況,就是會給控件增加一個背景,比如button,textview等
可以說shape就是一個形狀定義工具。是xml繪圖當中非常重要的一個工具
代碼也是很簡單的,這里使用到了shape的三個特性。好了到這里我已經簡單介紹shape的作用以及用法,但是shape能做的可遠遠不止這些,下面就讓我們正式開始學習吧!
首先你需要明白:使用shape一般是用來定義形狀的,可以在xml上繪圖,意思就是shape的表現形式就是一個xml文件,這個xml文件一般是放在drawable文件目錄下,然后可以直接引用作為控件的背景。那么如何定義這樣的一個xml文件呢?
在你項目的drawable目錄上右擊新建Drawable resource file,這代表新建一個可繪制圖形資源,你會得到如下代碼文件。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android";>
</selector>
切換成shape
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android";>
</shape>
這樣我們就得到了一個shape的xml文件了,我們之前說過了,shape是用來定義形狀的,那么它可以定義哪些形狀呢?分別有如下幾種形狀
1·rectangle--矩形,總覺得這個用的比較多
2·line---線,這個只能是水平的,不能定義豎直的。
3·oval---橢圓,我們一般是定義一個正圓。
4·ring---圓環,可以定義加載控件。
這是shape可以定義的幾種形狀,而且他們都離不開如下幾種特性(我用導圖整理了一下,方便查看)
以上就是shape的六種特性了,可以說,學習shape就是學習以上六種特性。下面我將一步一步的講解以上六種特性的使用以及實現效果,我開篇也說了,這篇文章不僅教大家如何使用shape,更會告訴初學者如何學習shape,那學習shape的關鍵在哪呢?那就是你一定要動手實踐,自己寫代碼看看效果。
首先,我們以最常用的rectangle為例來講解以上特性的使用,這個時候你就需要在shape的根元素指定你要繪制的shape類型,如下:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android";
android:shape="rectangle"
>
</shape>
我們這里就以開篇提到的那個button按鈕的效果來實例操作一下,首先你要明確我們是利用shape來給button按鈕繪制一個背景,所以我們先要定義這個背景的寬和高,這用到shape的哪個特性呢?(如果忘記都有哪些特性,可以瀏覽之前給的那張導圖,建議下載下來,對照查看),我們可以看到在shape的特性當中有一個size,對這就是用來定義我們所要繪制圖形的大小了,那我們來實際操作一下吧!
<!--大小-->
<size android:width="600dp" android:height="100dp"></size>
這行代碼意思是定義一個寬高比例為6:1的矩形(寬高比例視需求而定),這個時候你可能看不到任何效果,因為背景色是沒有的,這個時候就需要使用另外一個特性了—solid,我們使用這個特性來為我們繪制的圖形填充顏色,代碼如下:
<!--填充-->
<solid android:color="@color/colorPrimary"></solid>
如此一來我們就實現了這樣的效果:
我們看最終效果發現矩形的四個角都是圓形的,這就要使用shape的coeners了,我們設置代碼如下:
<!--圓角-->
<corners android:radius="50dp"></corners>
以上代碼是給我們要繪制的圖形的四個角設置一個統一的圓角半徑,我們看效果
好了,這里我們要實現的最終效果越來越近了,現在就是顏色的問題,我們使用solid只能給圖形填充純色背景,要想達到最終效果的漸變,我們需要使用到shape的gradient特性了,這個特性可以設定的屬性值較多,我們先從簡單的設置漸變色來開始學習。
<!--漸變-->
<gradient android:startColor="#6fd99d" android:centerColor="#63cfc3" android:endColor="#57c5e9"></gradient>
以上代碼用到了gradient的三個屬性值:startColor,centerColor,endColor。這三個屬性很好理解,分別是漸變開始,中間和結束的顏色,我們來看效果。
為了讓你更加清楚startColor,centerColor,endColor這三個屬性的作用,我們采取開始顏色為黑色,中間顏色為紅色以及結束顏色為藍色的漸變。
<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10909" android:endColor="#067fe2"></gradient>
如此一來你對這個漸變三種夜色的過度應該很清楚了吧!接下來我們看看如何引用我們繪制好的shape吧!
<Button android:layout_width="match_parent" android:layout_height="50dp"
android:layout_marginTop="20dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:background="@drawable/tv_bg"
android:text="一個自學的程序員"
android:textColor="#efebeb"
/>
此處的tv_bg就是我們繪制的shape文件的名稱。效果如下
shape六種特性的詳解
現在我們來稍微小結一下,在實現上述效果的過程中,我們使用到了shape的size,solid,corners以及gradient特性,我們在之前也說過,shape一共有六個特性需要我們學習,這里只使用到了其中的四個,為了方便大家學習,我將六種特性的含義解釋分類如下:
size—-定義形狀的寬高
solid—-定義形狀的背景填充色
corners—-設置形狀四個角的圓角大小
注意:如果使用radius屬性會統一設置四個角的圓角大小,單獨設置會覆蓋radius的效果。
gradient—-設置形狀背景色的漸變(一共有九個屬性)
在學習這個特性之前,我們要清楚這個漸變包含三種類型,一種是linear表示線性漸變,一種是放射性漸變還一種是掃描性漸變,由于這塊比較復雜,我將gradient特性的各個漸變類型對應的屬性值用導圖整理了一下。
下面看各個漸變類型的效果圖(我們畫的依然是矩形)
線性漸變
放射性漸變
stroke—-給形狀設置描邊
padding—-設置以此形狀為背景的內容距形狀四周的內邊距。
以上以畫矩形為例借助圖例的形式詳細的將shape的六種特性的使用演示了一遍,現在我們來做個總結:
首先shape可以畫三種類型的圖形,分別是rectangle–矩形,oval–橢圓(一般用來畫圓),ring–環形.
無論是畫哪一種形狀,都是要使用到我們上訴說的六種特性,分別是size,solid,corners,gradient,stroke,padding。只不過畫某一種形狀可能只用到六種特性中的部分特性,只要我們掌握了這六種特性,無論畫哪一種形狀應該都是毫無壓力的。
橢圓
以上我們都是以畫矩形為例詳細介紹了六種特性的使用方式,對于橢圓和環形都是大同小異,非要說不同的話,環形有一些特殊的屬性值需要我們學習,接下來,我們以畫橢圓為例,介紹如何使用shape。
首先更改shape的根元素將shape的值改為oval。
android:shape="oval"
我們之前也說了,使用shape畫oval我們一般就是用來畫正圓比較多,所以我們可以將size特性的屬性值寬高比例設為1:1即可。
<!--大小-->
<size android:width="1dp" android:height="1dp"></size>
我們看下效果
在繪制圓形的時候漸變用到的是比較多的,這里我們就主要介紹下在畫圓中關于漸變的使用。
首先我們看第一種漸變類型–線性漸變且傾斜角度為0
我們首先看下效果。
代碼如下
<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:angle="0" android:type="linear"
></gradient>
這里如果你不指定漸變的類型,則其默認的漸變方式就是線性漸變且傾斜角度為0.
我們再來看下傾斜角度為90的線性漸變
你們要與傾斜角度為0的進行對比以屬性angle屬性的使用,下面我們再來看下另外一種漸變類型,那就是放射性漸變。
這里需要注意一點,有的人可能得不到這樣的效果,為什么呢?我們先來看下我的代碼
<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:angle="0" android:type="radial" android:gradientRadius="0.5dp" android:centerX="0.5"
android:centerY="0.5"
></gradient>
知道你們注意到沒我這里的gradientRadius設置的是0.5dp,你們一不小心設置成大于1的話就會出現這樣的效果。
這是為什么呢?其實我這里為了說明一個問題給大家挖了一個坑,我們在之前設置圓形的size的時候還記得是怎么設置的嗎?我當時說只要寬高比例為1:1就會得到一個正圓,于是我是這樣寫的代碼。
<!--大小-->
<size android:width="1dp" android:height="1dp"></size>
看到沒,我將寬和高都設置成了1dp,這樣導致什么結果呢?我們要知道gradientRadius是用來設置放射的半徑的,如果我們設置的參數大于1dp(要注意我們的正圓寬高才1dp)就會超過我們的正圓大小,這樣就得不到我們想要的放射性漸變的效果了,所以這點要注意gradientRadius的屬性值要根據設置的size的大小來設定。
我們子啊之前介紹畫矩形的時候說到過,漸變的類型是有三種的,除了以上說的還有一種掃描型漸變,為什么在畫矩形的時候沒有介紹呢?因為我覺得在畫圓形的時候看掃描型漸變才會更加直觀,我們來做個測試,在矩形中的掃描型漸變是這個樣子的。
第一次看可能你對什么是掃描型漸變可能還不太理解,下面我們看在圓形中的掃描型漸變。
怎么樣,是不是有點明白了,其實掃描型漸變就是以圖形中心為點從右側水平線開始逆時針旋轉依次歷經開始的顏色,中間的顏色和結束的顏色。代碼如下。
<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:type="sweep" android:centerX="0.5"
android:centerY="0.5"
></gradient>
好了,以上介紹了畫橢圓的一些使用方法,這里你可能會發現,我并沒有想之前介紹畫矩形的時候那么詳細把每一個特性的屬性值什么意思怎么用都說了一遍,因為無論畫什么這些屬性表達的都是一個意思,關鍵在于適不適合在當前你繪制的圖形中使用。
line–線
我們說了shape可以繪制四種形狀,我們以上講了矩形和橢圓,接下來講解下一個line–線型。
畫線的時候主要用到了size和stroke,也就是靠這兩個特性才會顯示線,而且要注意使用size的時候只能畫高,不要畫寬。
我們看下代碼。
<!--大小-->
<size android:height="20dp"></size>
<!--描邊-->
<stroke android:color="#ef0b0b" android:width="1dp" android:dashGap="20dp" android:dashWidth="32dp"
></stroke>
以上代碼實現的效果如下。
ring–環
畫線的時候沒有像畫矩形或者圓的時候那么麻煩,用到的屬性也沒那么多,相對而言還是比較簡單的,下面讓我們繼續,繼續學習最后一個形狀ring–環型。
為什么要最后一個來將ring呢?因為它還是有點特殊的,我們在之前寫代碼的時候對于shape的根元素我們只寫了這么一個屬性。
<shape xmlns:android="http://schemas.android.com/apk/res/android";
android:shape="ring"
>
就是指定我們要畫的圖形的類型的,但是對于shape的根元素還是可以設置一些特殊元素的,而這些元素只適用于ring,下面一起來看下吧!
* android:innerRadius 設置內環的半徑
* android:innerRadiusRatio 以環的寬度比率來表示內環的半徑,這個值默認為3,表示內環半徑為環的寬度除以3,但是這個值會被android:innerRadius給覆蓋
* android:thickness 環的厚度
* android:thicknessRatio 以環的寬度比率來表示環的厚度,這個值默認為9,表示環的厚度為環的寬度除以9,同樣這個值會被android:thickness覆蓋
* android:useLevel 一般為false,否則可能環形無法顯示,只有作為LevelListDrawable使用時才設為true
我們先來看下效果圖吧。
代碼如下。
<?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"
>
<!--一共有六個屬性-->
<!--大小-->
<size android:height="10dp"></size>
<!--漸變-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:type="sweep" android:centerX="0.5"
android:centerY="0.5"
></gradient>
<!--描邊-->
<stroke android:color="#151515" android:width="1dp" android:dashGap="20dp" android:dashWidth="32dp"
></stroke>
</shape>
大家在使用ring畫圓環的時候可能對那幾個特有的元素不是太清楚,這里重點說下這幾個屬性。
* android:innerRadius 設置內環的半徑
* android:innerRadiusRatio 以環的寬度比率來表示內環的半徑,這個值默認為3,表示內環半徑為環的寬度除以3,但是這個值會被android:innerRadius給覆蓋
* android:thickness 環的厚度
* android:thicknessRatio 以環的寬度比率來表示環的厚度,這個值默認為9,表示環的厚度為環的寬度除以9,同樣這個值會被android:thickness覆蓋
* android:useLevel 一般為false,否則可能環形無法顯示,只有作為LevelListDrawable使用時才設為true
大家在使用ring的這些特殊屬性的時候參照我給的這個圖(雖然有點丑)可能有助于你理解,尤其是innerRadiusRatio和thicknessRatio這兩個屬性。
到此我們已經將Android中關于shape的使用全部講解完成了,現在來個大總結吧!首先shape是用來進行xml繪制圖形的,可以給一些控件設置背景來達到我們想要的效果,shape其實就是一個xml文件,一般放在我們項目中的drawable文件目錄下,使用shape可以畫四種圖形分別是矩形(常用),橢圓(一般用來畫正圓),直線和環形。無論是畫哪一種圖形都離不開shape的六種特性,只要掌握這六種特性的使用方法就可以掌握各種圖形的繪制,區別就在于不同的特性適不適合當前所繪制的圖形(這句話是重點,圈起來要考),關于ring-畫環形這塊它有一些特殊的屬性,結合文中我給出的圖掌握起來難度也不大,好了,再放出這非常重要的六種特性吧!
文章很短,路還漫長,大家好,我是i小灰,一個帥氣與才華并存的男人,我們下期再見