說明
在Android開發(fā)中弹渔,使用shape可以很方便的幫我們畫出想要的背景扎即,相對于png圖片來說花沉,使用shape可以減少安裝包的大小,而且能夠更好的適配不同的手機进鸠。
使用
先貼出官網(wǎng)上的說明:
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape=["rectangle" | "oval" | "line" | "ring"] >
<corners
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer" />
<gradient
android:angle="integer"
android:centerX="integer"
android:centerY="integer"
android:centerColor="integer"
android:endColor="color"
android:gradientRadius="integer"
android:startColor="color"
android:type=["linear" | "radial" | "sweep"]
android:useLevel=["true" | "false"] />
<padding
android:left="integer"
android:top="integer"
android:right="integer"
android:bottom="integer" />
<size
android:width="integer"
android:height="integer" />
<solid
android:color="color" />
<stroke
android:width="integer"
android:color="color"
android:dashWidth="integer"
android:dashGap="integer" />
</shape>
這里面已經(jīng)列出了所有的shape屬性稠曼。
從 android:shape=["rectangle" | "oval" | "line" | "ring"]
這里可以看出,shape可以畫四種圖形堤如,分別是:矩形(rectangle)蒲列、橢圓(oval)、線(line)搀罢、圓環(huán)(ring)蝗岖。
先上效果圖:
矩形(rectangle)
直角矩形:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorPrimary"></solid>
</shape>
solid:填充顏色
圓角矩形:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"></corners>
<solid android:color="@color/colorPrimary"></solid>
<padding android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"></padding>
</shape>
corners:圓角大小。
android:radius="integer"
android:topLeftRadius="integer"
android:topRightRadius="integer"
android:bottomLeftRadius="integer"
android:bottomRightRadius="integer"
android:radius:表示4個角的圓角大欣浦痢抵赢;
還可以分別設(shè)置四個角的,使用下面四個屬性:android:topLeftRadius唧取、android:topRightRadius铅鲤、android:bottomLeftRadius、android:bottomRightRadius分別表示:左上枫弟、右上邢享、左下、右下淡诗。
<padding android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"></padding>
padding:設(shè)置內(nèi)邊距骇塘。
無填充帶邊框:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="10dp"></corners>
<padding android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"></padding>
<stroke android:width="5dp"
android:color="@color/colorAccent"></stroke>
</shape>
stroke
android:width:邊框大小
android:color:邊框顏色
漸變:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/colorPrimary"></solid>
<padding android:bottom="12dp"
android:left="12dp"
android:right="12dp"
android:top="12dp"></padding>
<!--angle 漸變角度,0:左到右;90:下到上;180:右到左;270:上到下-->
<gradient android:startColor="@android:color/white"
android:endColor="@android:color/black"
android:angle="0"></gradient>
</shape>
gradient:
android:startColor:漸變起始顏色
android:endColor:漸變結(jié)束顏色
android:angle:漸變角度:0:左到右;90:下到上;180:右到左;270:上到下
橢圓(oval)
一般用來畫圓。
純色的圓:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorPrimary"></solid>
<size android:height="100dp"
android:width="100dp"></size>
</shape>
size的height和width設(shè)置為一樣大小就是一個圓了韩容。
然后直接使用solid填充顏色即可款违。
漸變效果:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:height="100dp"
android:width="100dp"></size>
<gradient android:centerX="0.5"
android:centerY="0.5"
android:type="sweep"
android:startColor="@color/colorPrimary"
android:endColor="@color/colorAccent"></gradient>
</shape>
android:centerX:表示漸變的X軸起始位置,范圍0-1群凶,0.5表示圓心插爹。
android:centerY:表示漸變的Y軸起始位置,范圍0-1请梢,0.5表示圓心赠尾。
android:type:漸變類型,有三種
分別是:
linear 線性漸變毅弧,默認(rèn)的漸變類型
radial 放射漸變萍虽,設(shè)置該項時,android:gradientRadius也必須設(shè)置
sweep 掃描性漸變
線(line)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke
android:width="1dp"
android:color="@color/colorAccent"
android:dashGap="3dp"
android:dashWidth="4dp"></stroke>
<size android:height="3dp"></size>
</shape>
線是居中顯示的形真。
android:width:填充顏色的高度
android:dashGap:虛線間距寬度
android:dashWidth:虛線寬度
<size android:height="3dp"></size>
:line的高度杉编,size大小必須大于android:width
圓環(huán)(ring)
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:thickness="10dp">
<!--useLevel需要設(shè)置為false-->
<solid android:color="@color/colorAccent"></solid>
</shape>
android:thickness:圓環(huán)寬度
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:useLevel="false"
android:thickness="10dp">
<!--useLevel需要設(shè)置為false-->
<solid android:color="@color/colorAccent"></solid>
<gradient android:startColor="@color/colorAccent"
android:endColor="@color/colorPrimary"
android:type="sweep"></gradient>
</shape>
以上只是簡單的介紹了一下shape的用戶超全,里面有很多屬性還沒有用到,需要大家自己去實踐一下邓馒,寫出來看到效果才能更好的理解嘶朱。
完整代碼地址:https://github.com/fccaikai/ShapeDemo
以上如果有什么不對的地方希望大家能提出來。