Android shape使用總結(jié)

<!-- 作者區(qū)域 --><div class="author"><a class="avatar" href="/u/1ce8d36848b3"><img src="//upload.jianshu.io/users/upload_avatars/4751442/0a1fa39d-2a16-45f7-926e-8096e481dc7c?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96" alt="96"> 復(fù)制代碼

安卓程序猿 關(guān)注 2017.02.25 22:04* 字?jǐn)?shù) 423 閱讀 1240評(píng)論 2喜歡 30贊賞 1

<!-- 文章內(nèi)容 --><div data-note-content="" class="show-content"><h2>安卓開發(fā)寶典文章列表：</h2> 復(fù)制代碼

• 比ExpandableListView更強(qiáng)大的分組列表實(shí)現(xiàn)
• 約束布局實(shí)戰(zhàn)
• shape使用總結(jié)

源碼地址（喜歡的話請(qǐng)給顆star）

前言

近年來(lái)手機(jī)配置是越來(lái)越高，我依稀記得我第一臺(tái)安卓手機(jī)只有512內(nèi)存，但是那時(shí)候用著還是那么流暢。然而今天我們的手機(jī)動(dòng)輒就是3G/4G內(nèi)存，盡管配置變高了，但是應(yīng)用對(duì)手機(jī)配置要求也越來(lái)越高，現(xiàn)在的應(yīng)用都是二十幾M，甚至一百M(fèi)。安裝包太大的弊端不多贅述，我們今天就來(lái)聊聊如何利用shape減少圖片資源占比。

shape屬性總結(jié)

• 填充

<solidandroid:color="@android:color/white"/><!-- 填充的顏色 --> 復(fù)制代碼

復(fù)制代碼

• 間隔：設(shè)置四個(gè)方向上的間隔

<!-- 間隔 --><paddingandroid:left="2dp"android:top="2dp"android:right="2dp"android:bottom="2dp"/><!-- 各方向的間隔 --> 復(fù)制代碼

• 大小

<!-- 大小 --><sizeandroid:width="50dp"android:height="50dp"/><!-- 寬度和高度 --> 復(fù)制代碼

• 圓角：同時(shí)設(shè)置五個(gè)屬性，則Radius屬性無(wú)效

android:Radius="20dp" <!-- 設(shè)置四個(gè)角的半徑--> android:topLeftRadius="20dp" <!-- 設(shè)置左上角的半徑 --> android:topRightRadius="20dp" <!-- 設(shè)置右上角的半徑 --> android:bottomLeftRadius="20dp" <!-- 設(shè)置右下角的半徑 --> android:bottomRightRadius="20dp" <!-- 設(shè)置左下角的半徑--> 復(fù)制代碼

• 描邊：dashWidth和dashGap屬性，只要其中一個(gè)設(shè)置為0dp，則邊框?yàn)閷?shí)現(xiàn)邊框

android:width="20dp" <!-- 設(shè)置邊邊的寬度 --> android:color="@android:color/black" <!-- 設(shè)置邊邊的顏色 --> android:dashWidth="2dp" <!-- 設(shè)置虛線的寬度 --> android:dashGap="20dp" <!-- 設(shè)置虛線的間隔寬度--> 復(fù)制代碼

• 漸變：gradient用以定義漸變色，可以定義兩色漸變和三色漸變，及漸變樣式。

<gradient android:type=["linear" | "radial" | "sweep"] //共有3中漸變類型，線性漸變（默認(rèn)）/放射漸變/掃描式漸變 android:angle="integer" //漸變角度，必須為45的倍數(shù)，0為從左到右，90為從上到下 android:centerX="float" //漸變中心X的相當(dāng)位置，范圍為0～1 android:centerY="float" //漸變中心Y的相當(dāng)位置，范圍為0～1 android:startColor="color" //漸變開始點(diǎn)的顏色 android:centerColor="color" //漸變中間點(diǎn)的顏色，在開始與結(jié)束點(diǎn)之間 android:endColor="color" //漸變結(jié)束點(diǎn)的顏色 android:gradientRadius="float" //漸變的半徑，只有當(dāng)漸變類型為radial時(shí)才能使用 android:useLevel=["true" | "false"] /> //使用LevelListDrawable時(shí)就要設(shè)置為true。設(shè)為false時(shí)才有漸變效果 復(fù)制代碼

實(shí)例(后續(xù)會(huì)不斷更新)

實(shí)例

• 圓形背景

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><sizeandroid:width="@dimen/shape_height"android:height="@dimen/shape_height" /><solid android:color="@color/colorAccent" /> </shape> 復(fù)制代碼

• 圓角矩形

<shape xmlns:android="http://schemas.android.com/apk/res/android"><corners android:radius="8dp" /><sizeandroid:width="@dimen/shape_width"android:height="@dimen/shape_height" /><solid android:color="@color/colorAccent" /> </shape> 復(fù)制代碼

• 圓柱

<shape xmlns:android="http://schemas.android.com/apk/res/android"><solid android:color="@color/colorAccent" /><sizeandroid:width="@dimen/shape_width"android:height="@dimen/shape_height" /><corners android:radius="40dp" /> </shape> 復(fù)制代碼

• 環(huán)形

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><sizeandroid:width="@dimen/shape_height"android:height="@dimen/shape_height" /><strokeandroid:width="10dp"android:color="@color/colorAccent" /> </shape> 復(fù)制代碼

• 矩形邊框

<shape xmlns:android="http://schemas.android.com/apk/res/android"> <span class="hljs-tag">&lt;<span class="hljs-name">size</span><span class="hljs-attr">android:width</span>=<span class="hljs-string">"@dimen/shape_height"</span><span class="hljs-attr">android:height</span>=<span class="hljs-string">"@dimen/shape_height"</span> /&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">stroke</span><span class="hljs-attr">android:width</span>=<span class="hljs-string">"10dp"</span><span class="hljs-attr">android:color</span>=<span class="hljs-string">"@color/colorAccent"</span> /&gt;</span> 復(fù)制代碼 復(fù)制代碼

</shape> 復(fù)制代碼

• 線性漸變

<shape xmlns:android="http://schemas.android.com/apk/res/android"><gradientandroid:endColor="#ff4081"android:startColor="#00ff4081"android:type="linear" /> </shape> 復(fù)制代碼

• 放射漸變（親測(cè)在5.0設(shè)備以下無(wú)效果）

<shape xmlns:android="http://schemas.android.com/apk/res/android"><gradientandroid:endColor="#ff4081"android:startColor="#00ff4081"android:type="linear" /> </shape> 復(fù)制代碼

• 漸變（三色）

<shape xmlns:android="http://schemas.android.com/apk/res/android"><gradientandroid:centerColor="#00ff00"android:endColor="#0000ff"android:startColor="#ff0000"android:type="linear" /> </shape> 復(fù)制代碼

• 掃描漸變

<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><gradientandroid:centerColor="#00ff00"android:endColor="#0000ff"android:startColor="#ff0000"android:type="sweep" /> </shape> 復(fù)制代碼

• 發(fā)光邊框

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"><item><shape><strokeandroid:width="4dp"android:color="#0C00F9" /><corners android:radius="2dp" /></shape></item><itemandroid:bottom="4dp"android:left="4dp"android:right="4dp"android:top="4dp"><shape><strokeandroid:width="4dp"android:color="#FFF" /><corners android:radius="2dp" /></shape></item><itemandroid:bottom="6dp"android:left="6dp"android:right="6dp"android:top="6dp"><shape><strokeandroid:width="3dp"android:color="#0C00F9" /><corners android:radius="2dp" /></shape></item> </layer-list> 復(fù)制代碼

總結(jié)

以上是生活随笔為你收集整理的按钮框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。