Android Shape 使用詳解(附圖)

shape圖形 –簡單介紹 shape圖形 –如何畫?shape圖形 –參數詳細解析shape圖形 –如何用?shape圖形 –實際開發應用場景

shape圖形簡單介紹

用xml實現一些形狀圖形, 或則顏色漸變效果, 相比PNG圖片, 佔用空間更小; 相比自定義View, 實現起來更加簡單


怎麼畫?

在res/drawable/目錄下建一個XML資源文件 
Shape圖片語法相對複雜, 下面是一個總結性的註釋, 涵蓋了大部分的參數,屬性, 建議先跳過這段, 回頭再看

[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--rectangle 長方形 /默認-->  
  3. <!--oval 橢圓-->  
  4. <!--line 線-->  
  5. <!--ring 環形-->  
  6. <shape  
  7.     xmlns:android="http://schemas.android.com/apk/res/android"  
  8.     android:shape="rectangle">  
  9.   
  10.     <!--corners標籤: 圓角-->  
  11.     <!--bottomLeftRadius 左下角-->  
  12.     <!--bottomRightRadius 右下角-->  
  13.     <!--topLeftRadius 左上角-->  
  14.     <!--topRightRadius 右上角-->  
  15.     <!--radius 是四個角, 設置了這個就不需要設置上面的四個了, PS:它的優先級比較低, 會被其他參數覆蓋-->  
  16.     <corners  
  17.         android:bottomLeftRadius="5dip"  
  18.         android:bottomRightRadius="5dip"  
  19.         android:radius="5dip"  
  20.         android:topLeftRadius="5dip"  
  21.         android:topRightRadius="5dip"/>  
  22.   
  23.     <!--gradient標籤: 簡單的說: 讓圖形變成一個有顏色梯度的-->  
  24.     <!--angle 是顏色變換的角度, 默認是0, 取值必須是45的 倍數. 0: 是顏色從左邊到右邊, 90: 是顏色從底部到頂部, -->  
  25.     <!--startColor centerColor endColor 一起使用: 開始的顏色, 中間的顏色, 結束的顏色-->  
  26.     <!--centerX centerY是指定位置座標, 取值是0.0f ~ 1.0f 之間, 例如: android:centerX="0.5f"  表示X方向的中間位置-->  
  27.     <!--type 顏色漸變的類型, 取值類型有三種: linear/radial/sweep  -->  
  28.     <!--linear 線性變化, 就是顏色從左往右, 從下往上-->  
  29.     <!--radial 放射變化, 例如: 從一個圓中心到圓的邊緣變化-->  
  30.     <!--sweep 掃描式漸變, 類似雷達掃描的那種圖形-->  
  31.     <!--gradientRadius 和android:type="radial"一起連用, 半徑-->  
  32.     <gradient  
  33.         android:angle="0"  
  34.         android:centerColor="#000"  
  35.         android:centerX="0.5"  
  36.         android:centerY="0.5"  
  37.         android:endColor="#FFF"  
  38.         android:gradientRadius="20dip"  
  39.         android:startColor="#000"  
  40.         android:type="linear"  
  41.         android:useLevel="true"/>  
  42.   
  43.     <!--padding標籤: 這裏的padding是控件中間內容與shape圖形圖片的距離-->  
  44.     <padding  
  45.         android:bottom="5dip"  
  46.         android:left="5dip"  
  47.         android:right="5dip"  
  48.         android:top="15dip"/>  
  49.   
  50.     <!--size標籤 shape圖形的寬度和高度  這裏一般不用設置, 它的優先級沒有控件的優先級大, 他指定控件的寬高就好, shape圖形會隨控件拉伸-->  
  51.     <size  
  52.         android:width="50dip"  
  53.         android:height="10dip"/>  
  54.   
  55.     <!--solid標籤: shape圖形背景色-->  
  56.     <!--PS: 這個和上面的gradient標籤會互斥, 一個是設置背景色, 一個是設置漸變色, 你懂得-->  
  57.     <solid  
  58.         android:color="@android:color/white"/>  
  59.   
  60.     <!--stroke標籤: 邊框-->  
  61.     <!--width 邊框的寬度-->  
  62.     <!--color 邊框的顏色-->  
  63.     <!--下面兩個參數是 把邊框變成虛線用-->  
  64.     <!--dashGap 虛線中空格的長度-->  
  65.     <!--dashWidth 虛線中實線的長度-->  
  66.     <stroke  
  67.         android:width="5dip"  
  68.         android:color="#0000FF"  
  69.         android:dashGap="2dip"  
  70.         android:dashWidth="1dip"/>  
  71. </shape>  

shape圖形參數詳細解析

  • shape 圖形形狀
  • corners 圓角標籤
  • gradient 階梯漸變標籤
  • padding 邊距標籤
  • size 大小標籤
  • solid 背景標籤
  • stroke 邊框標籤

shape圖形的形狀, 一共四種形狀.

  • 1.rectangle 長方形/默認是長方形
  • 2.oval 橢圓
  • 3.line 線
  • 4.ring 環形
  • 這裏寫圖片描述
  佈局代碼如下:


[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="@android:color/white"  
  6.               android:orientation="vertical">  
  7.   
  8.     <!--rectangle長方形-->  
  9.     <TextView  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="100dip"  
  12.         android:background="@drawable/shape_rectangle"  
  13.         android:text="Hello Shape"/>  
  14.   
  15.     <!--oval橢圓形-->  
  16.     <TextView  
  17.         android:layout_width="match_parent"  
  18.         android:layout_height="100dip"  
  19.         android:background="@drawable/shape_oval"  
  20.         android:text="Hello Shape"/>  
  21.   
  22.     <!--line線性  background-->  
  23.     <TextView  
  24.         android:layout_width="match_parent"  
  25.         android:layout_height="100dip"  
  26.         android:background="@drawable/shape_line"  
  27.         android:text="Hello Shape"/>  
  28.   
  29.     <!--line線性 src-->  
  30.     <ImageView  
  31.         android:layout_width="match_parent"  
  32.         android:layout_height="100dip"  
  33.         android:src="@drawable/shape_line"/>  
  34.   
  35.     <!--ring環形-->  
  36.     <TextView  
  37.         android:layout_width="match_parent"  
  38.         android:layout_height="100dip"  
  39.         android:background="@drawable/shape_ring"  
  40.         android:text="Hello Shape"/>  
  41. </LinearLayout>  
shape_rectangle.xml
[java] view plain
  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.        <!--這裏shape如果不指定是那種類型, 就會是默認的rectangle長方形.-->  
  5.     <solid android:color="#33000000"/>  
  6.        <!--solid標籤:指定背景色-->  
  7. </shape></span>  

shape_oval.xml
[java] view plain
  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="oval">  
  4.     <solid android:color="#00ffff"/>  
  5. </shape></span>  

shape_line.xml
[java] view plain
  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="line">  
  4.     <!--line模式下solid標籤無效-->  
  5.     <solid android:color="#33000000"/>  
  6.     <stroke  
  7.         android:width="99dip"  
  8.         android:color="#ff0000"/>  
  9.     <size  
  10.         android:width="500dip"  
  11.         android:height="300dip"/>  
  12. </shape></span>  
line形狀下, solid標籤下的color會無效, 
需要爲它設置stroke標籤, stroke標籤中: stroke標籤中如果不指定color的顏色, 則默認是黑色, 
需要指定width, 如果width如果大於控件的layout_height還無法顯示? 背景也無法拉伸值整個控件? 
用在background的時候, shape圖片會被拉伸, 
用在src的時候會按你指定的size大小去顯示, 如果爲指定size, 會和background一樣效果. 
還有上述幾個疑問, 但沒打算深究, 如果你知道, 請告訴我。
shape_ring.xml
[java] view plain
  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:innerRadius="10dip"  
  4.        android:innerRadiusRatio="2"  
  5.        android:shape="ring"  
  6.        android:thickness="50dip"  
  7.        android:thicknessRatio="3"  
  8.        android:useLevel="false">  
  9.     <solid android:color="#FF4081"/>  
  10. </shape></span>  

ring形狀下, 有幾個特殊的屬性:

  • innerRadius 中間圓圈的半徑;
  • innerRadiusRatio 如果和innerRadius同時存在是, innerRadiusRatio無效, 是一個比率: shape圖片寬度/內半徑, 默認是9;
  • thickness 圓環的厚度, 整的shape圖片的半徑減去內圓的半徑;
  • thicknessRatio 同樣如果和thickness同時存在是, thicknessRatio無效, 也是一個比率: shape圖片寬度/圓環厚度, 默認值是3;
  • useLevel 一般使用false, 否則無法顯示之類

可能看到這裏還是不會用, 下面就用最常用的rectangle長方形做詳細的講解:

corners標籤:

作用: 指定長方形四角的圓滑度, 圓角矩形就是用這個corners標籤辦到

  • bottomLeftRadius 左下角
  • bottomRightRadius 右下角
  • topLeftRadius 左上角
  • topRightRadius 右上角
  • radius 是四個角, 設置了這個就不需要設置上面的四個了, 但是它的優先級比較低, 會被上面的設置所覆蓋
這裏寫圖片描述

shape_rectangle.xml文件

 

 

[java] view plain
  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     <corners  
  5.         android:bottomLeftRadius="20dip"  
  6.         android:bottomRightRadius="20dip"  
  7.         android:radius="20dip"  
  8.         android:topLeftRadius="20dip"  
  9.         android:topRightRadius="20dip"/>  
  10.     <solid android:color="#FF4081"/>  
  11. </shape></span>  

 


gradient標籤:

作用: 讓圖形有顏色的漸變效果

  • angle 是顏色變換的角度, 默認是0, 取值必須是45的倍數. 0: 是顏色從左邊到右邊, 90: 是顏色從底部到頂部,
  • startColor centerColor endColor : 開始的顏色, 中間的顏色, 結束的顏色
  • centerX centerY是指定位置座標, 取值是0.0f ~ 1.0f 之間, 例如: android:centerX=”0.5f” 表示X方向的中間位置
  • type 顏色漸變的類型, 取值類型有三種: linear/radial/sweep 
    • linear 線性漸變, 就是顏色從左往右, 從下往上
    • radial 放射漸變, 例如: 從一個圓中心到圓的邊緣變化
    • sweep 掃描式漸變, 類似雷達掃描的那種圖形
  • gradientRadius 和android:type=”radial”一起連用, shape圖片的半徑

這裏寫圖片描述

XML佈局代碼

[java] view plain
  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="@android:color/white"  
  6.               android:orientation="vertical">  
  7.   
  8.     <!--rectangle長方形 linear 線性漸變-->  
  9.     <TextView  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="100dip"  
  12.         android:background="@drawable/shape_rectangle_linear"  
  13.         android:text="linear"/>  
  14.   
  15.     <!--rectangle長方形 radial 放射式漸變-->  
  16.     <TextView  
  17.         android:layout_width="match_parent"  
  18.         android:layout_height="100dip"  
  19.         android:background="@drawable/shape_rectangle_radial"  
  20.         android:text="radial"/>  
  21.   
  22.     <!--rectangle長方形 sweep 掃描式漸變-->  
  23.     <TextView  
  24.         android:layout_width="match_parent"  
  25.         android:layout_height="100dip"  
  26.         android:background="@drawable/shape_rectangle_sweep"  
  27.         android:text="sweep"/>  
  28. </LinearLayout></span>  


shape_rectangle_linear.xml文件

 

[java] view plain
  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     <corners android:radius="20dip"/>  
  5.     <gradient  
  6.         android:angle="0"  
  7.         android:centerColor="#FF4081"  
  8.         android:centerX="0.5"  
  9.         android:centerY="0.5"  
  10.         android:endColor="#000000"  
  11.         android:startColor="#FFFFFF"  
  12.         android:type="linear"  
  13.         android:useLevel="false"/>  
  14.     <!--    <solid android:color="#FF4081"/>-->  
  15.     <!--android:gradientRadius="150dip"-->  
  16. </shape></span>  


shape_rectangle_radial.xml文件

 

 

[java] view plain
  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     <corners android:radius="20dip"/>  
  5.     <gradient  
  6.         android:angle="0"  
  7.         android:centerColor="#FF4081"  
  8.         android:centerX="0.5"  
  9.         android:centerY="0.5"  
  10.         android:endColor="#FFFFFF"  
  11.         android:gradientRadius="150dip"  
  12.         android:startColor="#000000"  
  13.         android:type="radial"  
  14.         android:useLevel="false"/>  
  15.     <!--    <solid android:color="#FF4081"/>-->  
  16. </shape></span>  

shape_rectangle_sweep.xml文件

 

 

[java] view plain
  1. <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     <corners android:radius="20dip"/>  
  5.     <gradient  
  6.         android:angle="0"  
  7.         android:centerColor="#FF4081"  
  8.         android:centerX="0.5"  
  9.         android:centerY="0.5"  
  10.         android:endColor="#FFFFFF"  
  11.         android:startColor="#000000"  
  12.         android:type="sweep"  
  13.         android:useLevel="false"/>  
  14.     <!--<solid android:color="#FF4081"/>-->  
  15.     <!--android:gradientRadius="150dip"-->  
  16. </shape></span>  

 

PS: 
- solid標籤會和gradient標籤衝突, 會覆蓋gradient配置的顏色; 
- gradient標籤中的android:gradientRadius屬性和android:type=”radial”一起連用, 配置shape圖片的半徑 
- centerX centerY是指定位置座標, 取值是0.0f ~ 1.0f 之間, 例如: android:centerX=”0.5f” 表示X方向的中間位置, 這裏就不做演示了

padding標籤

作用: 設置控件中(文字)內容與shape圖片邊框的距離

  • bottom 底部距離
  • left 左邊距離
  • right 右邊距離
  • top 聽不距離

這裏寫圖片描述 
XML佈局代碼:

 

[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="@android:color/white"  
  6.               android:orientation="vertical">  
  7.     <!--這裏是沒有設置padding大小的shape的圖片-->  
  8.     <TextView  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_marginTop="30dip"  
  12.         android:background="@drawable/shape_rectangle"  
  13.         android:text="這裏是沒有設置padding大小的shape的圖片"/>  
  14.   
  15.     <!--這裏是設置padding大小爲30dip的shape的圖片-->  
  16.     <TextView  
  17.         android:layout_width="match_parent"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_marginTop="30dip"  
  20.         android:background="@drawable/shape_rectangle_padding"  
  21.         android:text="這裏是設置padding大小爲30dip的shape的圖片"/>  
  22. </LinearLayout>  
  23.   
  24. shape_rectangle.xml文件  
  25.   
  26. <?xml version="1.0" encoding="utf-8"?>  
  27. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  28.        android:shape="rectangle">  
  29.     <corners android:radius="20dip"/>  
  30.     <solid android:color="#00ff00"/>  
  31. </shape>  
  32.   
  33. shape_rectangle_padding.xml文件  
  34.   
  35. <?xml version="1.0" encoding="utf-8"?>  
  36. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  37.        android:shape="rectangle">  
  38.     <corners android:radius="20dip"/>  
  39.     <solid android:color="#FF4081"/>  
  40.     <padding  
  41.         android:bottom="30dip"  
  42.         android:left="30dip"  
  43.         android:right="30dip"  
  44.         android:top="30dip"/>  
  45. </shape>  
  46.   
  47. size標籤  
  48.   
  49. 作用: 指定圖片的大小   
  50. 使用drawable有兩種方式, 一種是控件的background屬性; 一種是控件的src屬性;   
  51. 兩種方式在使用size方式的時候出現了不同的結果  
  52.   
  53. 當用background屬性去使用drawable的時候, size標籤無效, shape圖片大小會隨着控件的大小去放大或縮小  
  54. 當用src屬性去使用drawable的時候. 有兩種情況:   
  55. 一, 如果shape圖片大小比控件指定大小小, shape圖片會顯示在控件的中間;  
  56. 二, 如果shape圖片大小比控件的大小大時, shape圖片的寬高會等比例縮放, 一直壓縮到寬或者高能放進控件內, 並放置在控件的中間, 如下圖所示:  
  57. 這裏寫圖片描述   
  58. XML佈局代碼:  
  59.   
  60. <?xml version="1.0" encoding="utf-8"?>  
  61. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  62.               android:layout_width="match_parent"  
  63.               android:layout_height="match_parent"  
  64.               android:background="@android:color/white"  
  65.               android:orientation="vertical">  
  66.   
  67.     <!--這裏是用background屬性去設置圖片-->  
  68.     <TextView  
  69.         android:layout_width="match_parent"  
  70.         android:layout_height="100dip"  
  71.         android:background="@drawable/shape_rectangle_size"  
  72.         android:text="這裏是用background屬性去設置圖片"/>  
  73.   
  74.     <TextView  
  75.         android:layout_width="match_parent"  
  76.         android:layout_height="wrap_content"  
  77.         android:layout_marginTop="30dip"  
  78.         android:text="這裏是用src屬性去設置圖片  寬度是200dip 高度是100dip"/>  
  79.   
  80.     <!--這裏是用src屬性去設置shape圖片 寬度是200dip-->  
  81.     <ImageView  
  82.         android:layout_width="match_parent"  
  83.         android:layout_height="100dip"  
  84.         android:background="#33000000"  
  85.         android:src="@drawable/shape_rectangle_size"/>  
  86.   
  87.     <TextView  
  88.         android:layout_width="match_parent"  
  89.         android:layout_height="wrap_content"  
  90.         android:layout_marginTop="30dip"  
  91.         android:text="這裏是用src屬性去設置圖片  寬度是500dip 高度是100dip"/>  
  92.   
  93.     <!--這裏是用src屬性去設置shape圖片 寬度是500dip-->  
  94.     <ImageView  
  95.         android:layout_width="match_parent"  
  96.         android:layout_height="100dip"  
  97.         android:background="#33000000"  
  98.         android:src="@drawable/shape_rectangle_size_long"/>  
  99. </LinearLayout>  
  100.   
  101. shape_rectangle_size.xml文件  
  102.   
  103. <?xml version="1.0" encoding="utf-8"?>  
  104. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  105.        android:shape="rectangle">  
  106.     <corners android:radius="20dip"/>  
  107.     <solid android:color="#00ff00"/>  
  108.     <size  
  109.         android:width="200dip"  
  110.         android:height="100dp"/>  
  111. </shape>  
  112.   
  113. shape_rectangle_size_long.xml文件  
  114.   
  115. <?xml version="1.0" encoding="utf-8"?>  
  116. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  117.        android:shape="rectangle">  
  118.     <corners android:radius="20dip"/>  
  119.     <solid android:color="#00ff00"/>  
  120.     <size  
  121.         android:width="500dip"  
  122.         android:height="100dp"/>  
  123. </shape>  

 

 

PS: 用src去設置drawable處理起來會比較麻煩, 實際開發中其實也很少有人這麼用

solid標籤

給圖片設置背景色. 上面已經用到了, 就不多說了, 
PS: 它和gradient標籤是衝突的, solid標籤會覆蓋gradient標籤配置的顏色 
我常用的用法, 在solid標籤中的color屬性配置顏色選擇器selector.xml, 實現點擊換色的點擊效果

stroke標籤

作用: 給shape圖形設置邊框, 設置邊框的寬度, 顏色, 實現還是虛線, 以及虛線的間隔大小

  • width 邊框線的寬度
  • color 邊框線的顏色
  • 下面兩個參數是設置虛線是需要用到的
  • dashGap 虛線間隔的長度
  • dashWidth 虛線中實線的長度

這裏寫圖片描述 
XML佈局代碼

[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="@android:color/white"  
  6.               android:orientation="vertical">  
  7.   
  8.     <TextView  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="100dip"  
  11.         android:layout_marginTop="30dip"  
  12.         android:background="@drawable/shape_rectangle_stroke"  
  13.         android:gravity="center"  
  14.         android:text="stroke標籤"/>  
  15. </LinearLayout>  


shape_rectangle_stroke.xml佈局文件

 

[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.        android:shape="rectangle">  
  4.     <corners android:radius="20dip"/>  
  5.     <solid android:color="#00ff00"/>  
  6.     <stroke  
  7.         android:width="5dip"  
  8.         android:color="#FF4081"  
  9.         android:dashGap="5dip"  
  10.         android:dashWidth="10dip"/>  
  11. </shape>  

 

現在在去看那個總結圖是不是不一樣呢?

shape圖形實際開發應用場景

我想說, shape圖形真的非常非常常見

場景一: 顯示圓角的圖形

這裏寫圖片描述

用shape圖片設置background實現起來非常簡單 
只需要設置形狀,背景色,四個角的圓角度數,邊框的寬度, 以及邊框的顏色

這裏寫圖片描述

佈局XML文件

[java] view plain
  1. <pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="#22000000"  
  6.               android:orientation="vertical">  
  7.   
  8.     <View  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="48dip"  
  11.         android:layout_marginLeft="10dip"  
  12.         android:layout_marginRight="10dip"  
  13.         android:layout_marginTop="10dip"  
  14.         android:background="@drawable/shape_test_top"/>  
  15.   
  16.     <View  
  17.         android:layout_width="match_parent"  
  18.         android:layout_height="48dip"  
  19.         android:layout_marginLeft="10dip"  
  20.         android:layout_marginRight="10dip"  
  21.         android:background="@drawable/shape_test_middle"/>  
  22.   
  23.     <View  
  24.         android:layout_width="match_parent"  
  25.         android:layout_height="48dip"  
  26.         android:layout_marginLeft="10dip"  
  27.         android:layout_marginRight="10dip"  
  28.         android:background="@drawable/shape_test_bottom"/>  
  29.   
  30.     <View  
  31.         android:layout_width="match_parent"  
  32.         android:layout_height="48dip"  
  33.         android:layout_marginLeft="10dip"  
  34.         android:layout_marginRight="10dip"  
  35.         android:layout_marginTop="10dip"  
  36.         android:background="@drawable/shape_test_single"/>  
  37. </LinearLayout>  




 

shape_test_top.xml

[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:shape="rectangle">  
  5.   
  6.     <corners  
  7.         android:topLeftRadius="10dip"  
  8.         android:topRightRadius="10dip"/>  
  9.   
  10.     <!--背景色-->  
  11.     <solid android:color="@android:color/white"/>  
  12.   
  13.     <!--邊框的寬度以及顏色-->  
  14.     <stroke  
  15.         android:width="0.5dip"  
  16.         android:color="#44000000"/>  
  17. </shape>  

shape_test_middle.xml

[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:shape="rectangle">  
  5.   
  6.     <!--背景色-->  
  7.     <solid android:color="@android:color/white"/>  
  8.   
  9.     <!--邊框的寬度以及顏色-->  
  10.     <stroke  
  11.         android:width="0.5dip"  
  12.         android:color="#44000000"/>  
  13. </shape>  


shape_test_bottom.xml

 

 

 

[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape  
  3.     xmlns:android="http://schemas.android.com/apk/res/android"  
  4.     android:shape="rectangle">  
  5.   
  6.     <corners  
  7.         android:bottomLeftRadius="10dip"  
  8.         android:bottomRightRadius="10dip"/>  
  9.   
  10.     <!--背景色-->  
  11.     <solid android:color="@android:color/white"/>  
  12.   
  13.     <!--邊框的寬度以及顏色-->  
  14.     <stroke  
  15.         android:width="0.5dip"  
  16.         android:color="#44000000"/>  
  17. </shape>  



場景二:顯示消息的數目

 

這裏寫圖片描述

直接上圖: 
這裏寫圖片描述

佈局XML代碼

[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.               android:layout_width="match_parent"  
  4.               android:layout_height="match_parent"  
  5.               android:background="#22000000"  
  6.               android:orientation="vertical">  
  7.   
  8.     <TextView  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_margin="20dip"  
  12.         android:background="@drawable/shape_test_circle"  
  13.         android:text="1"  
  14.         android:textColor="@android:color/white"/>  
  15.   
  16.     <TextView  
  17.         android:layout_width="wrap_content"  
  18.         android:layout_height="wrap_content"  
  19.         android:layout_margin="20dip"  
  20.         android:background="@drawable/shape_test_circle"  
  21.         android:text="99+"  
  22.         android:textColor="@android:color/white"/>  
  23. </LinearLayout>  


shape_test_circle.xml

 

[java] view plain
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="rectangle">  
  4.   
  5.     <!--圓角大小-->  
  6.     <corners android:radius="10dip"/>  
  7.   
  8.     <!--文字到shape圖片邊緣的距離-->  
  9.     <padding  
  10.         android:bottom="1dip"  
  11.         android:left="3dip"  
  12.         android:right="3dip"  
  13.         android:top="1dip"/>  
  14.   
  15.     <!--背景色-->  
  16.     <solid android:color="@android:color/holo_red_light"/>  
  17. </shape>  

 

最後這種樣式是開發中用到比較多的情況,就是給按鈕設置背景

 

 

下面是樣式代碼:

 

[java] view plain
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:shape="rectangle">  
    4.      <corners  
    5.         android:bottomLeftRadius="15dip"  
    6.         android:bottomRightRadius="15dip"  
    7.         android:topLeftRadius="15dip"  
    8.         android:topRightRadius="15dip"/>  
    9.      <solid  
    10.         android:color="#01BAFD"/>  //這個是底色顏色<span style="white-space:pre"> </span>  
    11.      
    12.    <stroke android:color="@color/white"  
    13.        android:width="1dip"  
    14.        />  
    15.      
    16.   
    17. </shape>  
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章