Android shape使用總結

<!-- 作者區域 --><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"> 復制代碼

安卓程序猿 關注 2017.02.25 22:04* 字數 423 閱讀 1240評論 2喜歡 30贊賞 1

<!-- 文章內容 --><div data-note-content="" class="show-content"><h2>安卓開發寶典文章列表：</h2> 復制代碼

• 比ExpandableListView更強大的分組列表實現
• 約束布局實戰
• shape使用總結

源碼地址（喜歡的話請給顆star）

前言

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

shape屬性總結

• 填充

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

復制代碼

• 間隔：設置四個方向上的間隔

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

• 大小

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

• 圓角：同時設置五個屬性，則Radius屬性無效

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

• 描邊：dashWidth和dashGap屬性，只要其中一個設置為0dp，則邊框為實現邊框

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

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

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

實例(后續會不斷更新)

實例

• 圓形背景

<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> 復制代碼

• 圓角矩形

<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> 復制代碼

• 圓柱

<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> 復制代碼

• 環形

<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> 復制代碼

• 矩形邊框

<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> 復制代碼 復制代碼

</shape> 復制代碼

• 線性漸變

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

• 放射漸變（親測在5.0設備以下無效果）

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

• 漸變（三色）

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

• 掃描漸變

<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> 復制代碼

• 發光邊框

<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> 復制代碼

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。