shape圖形簡單介紹
用xml實現一些形狀圖形, 或則顏色漸變效果, 相比PNG圖片, 佔用空間更小; 相比自定義View, 實現起來更加簡單
怎麼畫?
在res/drawable/目錄下建一個XML資源文件
Shape圖片語法相對複雜, 下面是一個總結性的註釋, 涵蓋了大部分的參數,屬性, 建議先跳過這段, 回頭再看
- <?xml version="1.0" encoding="utf-8"?>
- <!--rectangle 長方形 /默認-->
- <!--oval 橢圓-->
- <!--line 線-->
- <!--ring 環形-->
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <!--corners標籤: 圓角-->
- <!--bottomLeftRadius 左下角-->
- <!--bottomRightRadius 右下角-->
- <!--topLeftRadius 左上角-->
- <!--topRightRadius 右上角-->
- <!--radius 是四個角, 設置了這個就不需要設置上面的四個了, PS:它的優先級比較低, 會被其他參數覆蓋-->
- <corners
- android:bottomLeftRadius="5dip"
- android:bottomRightRadius="5dip"
- android:radius="5dip"
- android:topLeftRadius="5dip"
- android:topRightRadius="5dip"/>
- <!--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"一起連用, 半徑-->
- <gradient
- android:angle="0"
- android:centerColor="#000"
- android:centerX="0.5"
- android:centerY="0.5"
- android:endColor="#FFF"
- android:gradientRadius="20dip"
- android:startColor="#000"
- android:type="linear"
- android:useLevel="true"/>
- <!--padding標籤: 這裏的padding是控件中間內容與shape圖形圖片的距離-->
- <padding
- android:bottom="5dip"
- android:left="5dip"
- android:right="5dip"
- android:top="15dip"/>
- <!--size標籤 shape圖形的寬度和高度 這裏一般不用設置, 它的優先級沒有控件的優先級大, 他指定控件的寬高就好, shape圖形會隨控件拉伸-->
- <size
- android:width="50dip"
- android:height="10dip"/>
- <!--solid標籤: shape圖形背景色-->
- <!--PS: 這個和上面的gradient標籤會互斥, 一個是設置背景色, 一個是設置漸變色, 你懂得-->
- <solid
- android:color="@android:color/white"/>
- <!--stroke標籤: 邊框-->
- <!--width 邊框的寬度-->
- <!--color 邊框的顏色-->
- <!--下面兩個參數是 把邊框變成虛線用-->
- <!--dashGap 虛線中空格的長度-->
- <!--dashWidth 虛線中實線的長度-->
- <stroke
- android:width="5dip"
- android:color="#0000FF"
- android:dashGap="2dip"
- android:dashWidth="1dip"/>
- </shape>
shape圖形參數詳細解析
- shape 圖形形狀
- corners 圓角標籤
- gradient 階梯漸變標籤
- padding 邊距標籤
- size 大小標籤
- solid 背景標籤
- stroke 邊框標籤
shape圖形的形狀, 一共四種形狀.
- 1.rectangle 長方形/默認是長方形
- 2.oval 橢圓
- 3.line 線
- 4.ring 環形
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@android:color/white"
- android:orientation="vertical">
- <!--rectangle長方形-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="@drawable/shape_rectangle"
- android:text="Hello Shape"/>
- <!--oval橢圓形-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="@drawable/shape_oval"
- android:text="Hello Shape"/>
- <!--line線性 background-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="@drawable/shape_line"
- android:text="Hello Shape"/>
- <!--line線性 src-->
- <ImageView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:src="@drawable/shape_line"/>
- <!--ring環形-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="@drawable/shape_ring"
- android:text="Hello Shape"/>
- </LinearLayout>
- <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <!--這裏shape如果不指定是那種類型, 就會是默認的rectangle長方形.-->
- <solid android:color="#33000000"/>
- <!--solid標籤:指定背景色-->
- </shape></span>
shape_oval.xml
- <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="oval">
- <solid android:color="#00ffff"/>
- </shape></span>
shape_line.xml
- <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="line">
- <!--line模式下solid標籤無效-->
- <solid android:color="#33000000"/>
- <stroke
- android:width="99dip"
- android:color="#ff0000"/>
- <size
- android:width="500dip"
- android:height="300dip"/>
- </shape></span>
需要爲它設置stroke標籤, stroke標籤中: stroke標籤中如果不指定color的顏色, 則默認是黑色,
需要指定width, 如果width如果大於控件的layout_height還無法顯示? 背景也無法拉伸值整個控件?
用在background的時候, shape圖片會被拉伸,
用在src的時候會按你指定的size大小去顯示, 如果爲指定size, 會和background一樣效果.
還有上述幾個疑問, 但沒打算深究, 如果你知道, 請告訴我。
- <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:innerRadius="10dip"
- android:innerRadiusRatio="2"
- android:shape="ring"
- android:thickness="50dip"
- android:thicknessRatio="3"
- android:useLevel="false">
- <solid android:color="#FF4081"/>
- </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文件
- <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners
- android:bottomLeftRadius="20dip"
- android:bottomRightRadius="20dip"
- android:radius="20dip"
- android:topLeftRadius="20dip"
- android:topRightRadius="20dip"/>
- <solid android:color="#FF4081"/>
- </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佈局代碼
- <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@android:color/white"
- android:orientation="vertical">
- <!--rectangle長方形 linear 線性漸變-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="@drawable/shape_rectangle_linear"
- android:text="linear"/>
- <!--rectangle長方形 radial 放射式漸變-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="@drawable/shape_rectangle_radial"
- android:text="radial"/>
- <!--rectangle長方形 sweep 掃描式漸變-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="@drawable/shape_rectangle_sweep"
- android:text="sweep"/>
- </LinearLayout></span>
shape_rectangle_linear.xml文件
- <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="20dip"/>
- <gradient
- android:angle="0"
- android:centerColor="#FF4081"
- android:centerX="0.5"
- android:centerY="0.5"
- android:endColor="#000000"
- android:startColor="#FFFFFF"
- android:type="linear"
- android:useLevel="false"/>
- <!-- <solid android:color="#FF4081"/>-->
- <!--android:gradientRadius="150dip"-->
- </shape></span>
shape_rectangle_radial.xml文件
- <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="20dip"/>
- <gradient
- android:angle="0"
- android:centerColor="#FF4081"
- android:centerX="0.5"
- android:centerY="0.5"
- android:endColor="#FFFFFF"
- android:gradientRadius="150dip"
- android:startColor="#000000"
- android:type="radial"
- android:useLevel="false"/>
- <!-- <solid android:color="#FF4081"/>-->
- </shape></span>
shape_rectangle_sweep.xml文件
- <span style="color:#666666;"><?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="20dip"/>
- <gradient
- android:angle="0"
- android:centerColor="#FF4081"
- android:centerX="0.5"
- android:centerY="0.5"
- android:endColor="#FFFFFF"
- android:startColor="#000000"
- android:type="sweep"
- android:useLevel="false"/>
- <!--<solid android:color="#FF4081"/>-->
- <!--android:gradientRadius="150dip"-->
- </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佈局代碼:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@android:color/white"
- android:orientation="vertical">
- <!--這裏是沒有設置padding大小的shape的圖片-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="30dip"
- android:background="@drawable/shape_rectangle"
- android:text="這裏是沒有設置padding大小的shape的圖片"/>
- <!--這裏是設置padding大小爲30dip的shape的圖片-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="30dip"
- android:background="@drawable/shape_rectangle_padding"
- android:text="這裏是設置padding大小爲30dip的shape的圖片"/>
- </LinearLayout>
- shape_rectangle.xml文件
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="20dip"/>
- <solid android:color="#00ff00"/>
- </shape>
- shape_rectangle_padding.xml文件
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="20dip"/>
- <solid android:color="#FF4081"/>
- <padding
- android:bottom="30dip"
- android:left="30dip"
- android:right="30dip"
- android:top="30dip"/>
- </shape>
- size標籤
- 作用: 指定圖片的大小
- 使用drawable有兩種方式, 一種是控件的background屬性; 一種是控件的src屬性;
- 兩種方式在使用size方式的時候出現了不同的結果
- 當用background屬性去使用drawable的時候, size標籤無效, shape圖片大小會隨着控件的大小去放大或縮小
- 當用src屬性去使用drawable的時候. 有兩種情況:
- 一, 如果shape圖片大小比控件指定大小小, shape圖片會顯示在控件的中間;
- 二, 如果shape圖片大小比控件的大小大時, shape圖片的寬高會等比例縮放, 一直壓縮到寬或者高能放進控件內, 並放置在控件的中間, 如下圖所示:
- 這裏寫圖片描述
- XML佈局代碼:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@android:color/white"
- android:orientation="vertical">
- <!--這裏是用background屬性去設置圖片-->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="@drawable/shape_rectangle_size"
- android:text="這裏是用background屬性去設置圖片"/>
- <TextView
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="30dip"
- android:text="這裏是用src屬性去設置圖片 寬度是200dip 高度是100dip"/>
- <!--這裏是用src屬性去設置shape圖片 寬度是200dip-->
- <ImageView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="#33000000"
- android:src="@drawable/shape_rectangle_size"/>
- <TextView
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="30dip"
- android:text="這裏是用src屬性去設置圖片 寬度是500dip 高度是100dip"/>
- <!--這裏是用src屬性去設置shape圖片 寬度是500dip-->
- <ImageView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:background="#33000000"
- android:src="@drawable/shape_rectangle_size_long"/>
- </LinearLayout>
- shape_rectangle_size.xml文件
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="20dip"/>
- <solid android:color="#00ff00"/>
- <size
- android:width="200dip"
- android:height="100dp"/>
- </shape>
- shape_rectangle_size_long.xml文件
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="20dip"/>
- <solid android:color="#00ff00"/>
- <size
- android:width="500dip"
- android:height="100dp"/>
- </shape>
PS: 用src去設置drawable處理起來會比較麻煩, 實際開發中其實也很少有人這麼用
solid標籤
給圖片設置背景色. 上面已經用到了, 就不多說了,
PS: 它和gradient標籤是衝突的, solid標籤會覆蓋gradient標籤配置的顏色
我常用的用法, 在solid標籤中的color屬性配置顏色選擇器selector.xml, 實現點擊換色的點擊效果
stroke標籤
作用: 給shape圖形設置邊框, 設置邊框的寬度, 顏色, 實現還是虛線, 以及虛線的間隔大小
- width 邊框線的寬度
- color 邊框線的顏色
- 下面兩個參數是設置虛線是需要用到的
- dashGap 虛線間隔的長度
- dashWidth 虛線中實線的長度
XML佈局代碼
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@android:color/white"
- android:orientation="vertical">
- <TextView
- android:layout_width="match_parent"
- android:layout_height="100dip"
- android:layout_marginTop="30dip"
- android:background="@drawable/shape_rectangle_stroke"
- android:gravity="center"
- android:text="stroke標籤"/>
- </LinearLayout>
shape_rectangle_stroke.xml佈局文件
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners android:radius="20dip"/>
- <solid android:color="#00ff00"/>
- <stroke
- android:width="5dip"
- android:color="#FF4081"
- android:dashGap="5dip"
- android:dashWidth="10dip"/>
- </shape>
現在在去看那個總結圖是不是不一樣呢?
shape圖形實際開發應用場景
我想說, shape圖形真的非常非常常見
場景一: 顯示圓角的圖形
用shape圖片設置background實現起來非常簡單
只需要設置形狀,背景色,四個角的圓角度數,邊框的寬度, 以及邊框的顏色
佈局XML文件
- <pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="#22000000"
- android:orientation="vertical">
- <View
- android:layout_width="match_parent"
- android:layout_height="48dip"
- android:layout_marginLeft="10dip"
- android:layout_marginRight="10dip"
- android:layout_marginTop="10dip"
- android:background="@drawable/shape_test_top"/>
- <View
- android:layout_width="match_parent"
- android:layout_height="48dip"
- android:layout_marginLeft="10dip"
- android:layout_marginRight="10dip"
- android:background="@drawable/shape_test_middle"/>
- <View
- android:layout_width="match_parent"
- android:layout_height="48dip"
- android:layout_marginLeft="10dip"
- android:layout_marginRight="10dip"
- android:background="@drawable/shape_test_bottom"/>
- <View
- android:layout_width="match_parent"
- android:layout_height="48dip"
- android:layout_marginLeft="10dip"
- android:layout_marginRight="10dip"
- android:layout_marginTop="10dip"
- android:background="@drawable/shape_test_single"/>
- </LinearLayout>
shape_test_top.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners
- android:topLeftRadius="10dip"
- android:topRightRadius="10dip"/>
- <!--背景色-->
- <solid android:color="@android:color/white"/>
- <!--邊框的寬度以及顏色-->
- <stroke
- android:width="0.5dip"
- android:color="#44000000"/>
- </shape>
shape_test_middle.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <!--背景色-->
- <solid android:color="@android:color/white"/>
- <!--邊框的寬度以及顏色-->
- <stroke
- android:width="0.5dip"
- android:color="#44000000"/>
- </shape>
shape_test_bottom.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners
- android:bottomLeftRadius="10dip"
- android:bottomRightRadius="10dip"/>
- <!--背景色-->
- <solid android:color="@android:color/white"/>
- <!--邊框的寬度以及顏色-->
- <stroke
- android:width="0.5dip"
- android:color="#44000000"/>
- </shape>
場景二:顯示消息的數目
直接上圖:
佈局XML代碼
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="#22000000"
- android:orientation="vertical">
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_margin="20dip"
- android:background="@drawable/shape_test_circle"
- android:text="1"
- android:textColor="@android:color/white"/>
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_margin="20dip"
- android:background="@drawable/shape_test_circle"
- android:text="99+"
- android:textColor="@android:color/white"/>
- </LinearLayout>
shape_test_circle.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <!--圓角大小-->
- <corners android:radius="10dip"/>
- <!--文字到shape圖片邊緣的距離-->
- <padding
- android:bottom="1dip"
- android:left="3dip"
- android:right="3dip"
- android:top="1dip"/>
- <!--背景色-->
- <solid android:color="@android:color/holo_red_light"/>
- </shape>
最後這種樣式是開發中用到比較多的情況,就是給按鈕設置背景
下面是樣式代碼:
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <corners
- android:bottomLeftRadius="15dip"
- android:bottomRightRadius="15dip"
- android:topLeftRadius="15dip"
- android:topRightRadius="15dip"/>
- <solid
- android:color="#01BAFD"/> //這個是底色顏色<span style="white-space:pre"> </span>
- <stroke android:color="@color/white"
- android:width="1dip"
- />
- </shape>