Android Shape使用

說明

在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
以上如果有什么不對的地方希望大家能提出來。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末光酣,一起剝皮案震驚了整個濱河市疏遏,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌救军,老刑警劉巖财异,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異唱遭,居然都是意外死亡戳寸,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門拷泽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來疫鹊,“玉大人,你說我怎么就攤上這事司致〔疬海” “怎么了?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵脂矫,是天一觀的道長枣耀。 經(jīng)常有香客問我,道長庭再,這世上最難降的妖魔是什么捞奕? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮佩微,結(jié)果婚禮上缝彬,老公的妹妹穿的比我還像新娘萌焰。我一直安慰自己哺眯,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布扒俯。 她就那樣靜靜地躺著奶卓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪撼玄。 梳的紋絲不亂的頭發(fā)上夺姑,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機與錄音掌猛,去河邊找鬼盏浙。 笑死眉睹,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的废膘。 我是一名探鬼主播竹海,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼丐黄!你這毒婦竟也來了斋配?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤灌闺,失蹤者是張志新(化名)和其女友劉穎艰争,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體桂对,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡甩卓,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了接校。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猛频。...
    茶點故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖蛛勉,靈堂內(nèi)的尸體忽然破棺而出鹿寻,到底是詐尸還是另有隱情,我是刑警寧澤诽凌,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布毡熏,位于F島的核電站,受9級特大地震影響侣诵,放射性物質(zhì)發(fā)生泄漏痢法。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一杜顺、第九天 我趴在偏房一處隱蔽的房頂上張望财搁。 院中可真熱鬧,春花似錦躬络、人聲如沸尖奔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽提茁。三九已至,卻和暖如春馁菜,著一層夾襖步出監(jiān)牢的瞬間茴扁,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工汪疮, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留峭火,地道東北人毁习。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像卖丸,于是被迫代替她去往敵國和親蜓洪。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android中常常使用shape來定義控件的一些顯示屬性坯苹,今天看了一些shape的使用隆檀,對shape有了大體的了...
    Viking_Den閱讀 276評論 0 2
  • 我心中一直有一個奇怪的想法:為什么,那些有了很多很多很多的錢的人粹湃,還要去干一些在常人看來恐仑,很苦的事情呢?今天看了笑...
    一片祥和閱讀 144評論 0 0
  • 不知從何時開始,變得善妒起來孤钦,不過歧斟,我妒忌的是別人比我好。我的勝負(fù)欲和爭勝心太強偏形。 我好像見不得別人比我努力静袖,成績...
    想過好每天的豆包閱讀 479評論 0 0
  • 前情介紹,今天無聊的時候翻看163郵箱俊扭,發(fā)現(xiàn)有個網(wǎng)易推廣-“網(wǎng)易有錢”队橙,用免費領(lǐng)手機吸引下載,然后就一步一步來操作...
    頑固的皮球閱讀 1,315評論 0 1