因?yàn)樵趇OS中視圖的切角是很容易的,包括邊框的顏色,圓角的弧度等等很容易設(shè)置,但是在HS2.0中Android開發(fā)中多是用的圖片作為背景,所以就百度了一番,是通過子在drawable目錄下創(chuàng)建xml文件,通過不同的標(biāo)簽對邊框,形狀,填充顏色及漸變等等進(jìn)行設(shè)置,再次做一下記錄總結(jié)
shape
xml文件中頂層的標(biāo)簽時(shí)shape標(biāo)簽,
-
shape屬性
是控制形狀的,其中可選值為 - line --> 線
- rectangle --> 矩形(圓角矩形)
- oval --> 橢圓,圓
- ring --> 圓環(huán)
-
userLevel
在環(huán)形的時(shí)候要設(shè)置為false,其他情況下設(shè)置為true - ** innerRadiusRatio和 thicknessRatio**控制環(huán)形半徑和環(huán)形寬度
stroke
stroke標(biāo)簽 用于控制變寬的顏色,寬度,以及連續(xù)性,即虛線和實(shí)線,其中屬性值為
- width --> 邊框?qū)挾?/li>
- dashGap --> 虛線間隔寬度
- dashWidth --> 虛線的實(shí)線寬度
- color --> 顏色
warn :當(dāng)使用虛線的時(shí)候,引用此配置文件的布局,需要設(shè)置屬性
android:layerType="software"
,官方的解釋要繪制虛線的時(shí)候,需要關(guān)閉硬件加速
solid
solid標(biāo)簽 主要是控制控件內(nèi)部的填空顏色,主要屬性為color
來設(shè)置
corner
corner控制四個角的切角半徑,主要通過以下屬性進(jìn)行設(shè)置
- bottomLeftRadius -->左下角
- bottomRightRadius --> 右下角
- topLeftRadius --> 左上角
- topRightRadius --> 右上角
- 如果四角全切,且弧度一直,則可以將四個屬性變?yōu)橐粋€屬性
<corners android:radius="20dp" />
- 半圓角:
水平的半圓角
只要半徑等于高度的一半
,垂直的半圓角
是半徑等于寬度的一半
gradient
** gradient標(biāo)簽**是改變顏色的漸變過程,其中以下幾類
- 線性漸變
-
type屬性
設(shè)置為linear
- 通過改變
angle 屬性
改變線性漸變的方向- -45 垂直漸變
- 0 水平漸變
- 45 對角漸變
-
- 徑向漸變
-
type屬性
設(shè)置為radial
-
angle 屬性
不再起作用,設(shè)置為0 - 務(wù)必要設(shè)置
gradientRadius屬性
,徑向類似于圓形中心向外邊輻射
-
- 掃描漸變
-
type屬性
設(shè)置為sweep
-
angle 屬性
不再起作用,不能改變角度設(shè)置為0, -
gradientRadius屬性
不起作用 - 通過設(shè)置
centerX屬性
和centerY屬性
來改變角度, centerX,centerY是中心點(diǎn)的位置,這里用的是百分比值(0-1)
-
實(shí)例
** 實(shí)線:line_solid.xml **
<?xml version="1.0" encoding="utf-8"?>
<!-- 實(shí)線 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000" />
</shape>
** 虛線:line_dashed.xml **
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line"
android:useLevel="true">
<stroke
android:width="2dp"
android:dashGap="5dp"
android:dashWidth="10dp"
android:color="#ffff0000" />
</shape>
** 矩形實(shí)線邊框內(nèi)部無填充:rect_solid_border.xml**
<?xml version="1.0" encoding="utf-8"?>
<!-- 實(shí)線邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000" />
</shape>
**矩形虛線邊框內(nèi)部無填充:rect_dashed_border.xml **
<?xml version="1.0" encoding="utf-8"?>
<!-- 虛線邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000"
android:dashGap="5dp"
android:dashWidth="10dp" />
</shape>
矩形實(shí)線邊框-內(nèi)部填充:rect_solid_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 實(shí)線邊框+內(nèi)部填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000" />
<solid android:color="#ff00ffff" />
</shape>
矩形虛線邊框-內(nèi)部填充:rect_dashed_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 虛線邊框+內(nèi)部填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<stroke
android:width="2dp"
android:color="#ffff0000"
android:dashGap="5dp"
android:dashWidth="10dp" />
<solid android:color="#ff00ffff" />
</shape>
圓角矩形-只有邊框:rect_rounded_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形邊框圓角 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size android:height="100dp"
android:width="100dp"/>
<stroke
android:width="2dp"
android:color="#ffff0000" />
<corners android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
圓角矩形-只有內(nèi)部填充:rect_rounded_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓角矩形 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size android:height="100dp"
android:width="100dp"/>
<solid android:color="#8000ff00" />
<corners android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
圓角矩形-有邊框有填充:rect_rounded_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形邊框+填充 圓角 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size android:height="100dp"
android:width="100dp"/>
<stroke
android:width="2dp"
android:color="#ffff0000" />
<solid android:color="#8000ff00" />
<corners android:bottomLeftRadius="2dp"
android:bottomRightRadius="2dp"
android:topLeftRadius="2dp"
android:topRightRadius="2dp" />
</shape>
圓角矩形-左邊圓角為一個半圓弧:rect_rounded_left_arc.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="10dp" />
<solid android:color="#8000ff00" />
<!-- 圓角半徑是高度的一般就是一個圓弧了 -->
<corners
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp" />
</shape>
圓角矩形-左右兩邊都是半圓弧:rect_rounded_left_right_arc.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="10dp" />
<solid android:color="#8000ff00" />
<!-- 圓角半徑是高度的一般就是一個圓弧了 -->
<corners android:radius="20dp" />
</shape>
圓角矩形-左右兩邊都是半圓弧-帶邊框:rect_rounded_left_right_arc_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="10dp" />
<stroke android:color="#ffff0000"
android:width="2dp"/>
<solid android:color="#8000ff00" />
<!-- 圓角半徑是高度的一般就是一個圓弧了 -->
<corners android:radius="20dp" />
</shape>
圓角矩形-圓:rect_rounded_arc.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+圓出一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size android:height="10dp"
android:width="10dp"/>
<solid android:color="#8000ff00" />
<corners android:radius="20dp" />
</shape>
圓角矩形-上下兩邊半圓弧:rect_rounded_top_bottom_arc.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形圓角+左右兩邊為一個圓弧 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="10dp"
android:height="60dp" />
<solid android:color="#8000ff00" />
<!-- 圓角半徑是高度的一般就是一個圓弧了 -->
<corners android:radius="10dp" />
</shape>
** 垂直線性漸變:rect_gradient_linear_vertical.xml**
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-線性垂直漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 調(diào)整angle實(shí)現(xiàn)水平漸變,垂直漸變或者對角漸變 -->
<gradient
android:angle="-45"
android:centerX="0.5"
android:centerY="0.4"
android:centerColor="#8000ff00"
android:endColor="#1000ff00"
android:startColor="#ff00ff00"
android:type="linear" />
</shape>
水平線性漸變:rect_gradient_linear_horizon.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-線性水平漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 調(diào)整angle實(shí)現(xiàn)水平漸變,垂直漸變或者對角漸變 -->
<gradient
android:angle="0"
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#8000ff00"
android:endColor="#ff00ff00"
android:startColor="#1000ff00"
android:type="linear" />
</shape>
** 對角線線性漸變:rect_gradient_linear_diagonal.xml **
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-線性對角線漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 調(diào)整angle實(shí)現(xiàn)水平漸變,垂直漸變或者對角漸變 -->
<gradient
android:angle="45"
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#8000ff00"
android:endColor="#1000ff00"
android:startColor="#ff00ff00"
android:type="linear" />
</shape>
徑向漸變:rect_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-徑向漸變,一般不用在rect上,用到圓或者橢圓上 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<size
android:width="50dp"
android:height="100dp" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!-- 徑向漸變angle無效 -->
<gradient
android:angle="0"
android:centerX="0.5"
android:centerY="0.5"
android:startColor="#ffff00ff"
android:endColor="#ff00ff00"
android:gradientRadius="40dp"
android:type="radial" />
</shape>
** 掃描漸變:rect_gradient_sweep.xml**
<?xml version="1.0" encoding="utf-8"?>
<!-- 矩形內(nèi)部填充-掃描漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"
android:useLevel="true">
<!--如果布局中沒有設(shè)置View的大小,會size設(shè)置的大小為默認(rèn)值-->
<size
android:width="20dp"
android:height="20dp" />
<stroke
android:width="1px"
android:color="#ffff00ff" />
<!--調(diào)整angle不能實(shí)現(xiàn)角度變化
centerX,centerY是中心點(diǎn)的位置,這里用的是百分比值(0-1)
在rect中g(shù)radientRadius無效-->
<gradient
android:angle="0"
android:centerX="0.5"
android:centerY="0.5"
android:startColor="#ff00ff00"
android:endColor="#ffff00ff"
android:gradientRadius="20dp"
android:type="sweep" />
</shape>
圓-邊框:circle_border.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="80dp"
android:height="80dp" />
<stroke
android:width="2dp"
android:color="#ffff0000" />
</shape>
圓-填充:circle_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形邊框 + 填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="80dp"
android:height="80dp" />
<solid android:color="#800000ff" />
</shape>
圓-邊框填充:circle_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形邊框 + 填充 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="80dp"
android:height="80dp" />
<stroke
android:width="2dp"
android:color="#ffff0000" />
<solid android:color="#800000ff" />
</shape>
線性漸變:circle_gradient_linear.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形內(nèi)部填充-線性漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<!-- angle調(diào)整漸變角度,只能是45的倍數(shù),centerX, centerY是百分百(0-1) -->
<gradient
android:angle="-90"
android:centerX="0.5"
android:centerY="0.8"
android:centerColor="#80ff0000"
android:endColor="#ffff0000"
android:startColor="#00ff0000"
android:type="linear" />
</shape>
徑向漸變:circle_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形內(nèi)部填充-徑向漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="40dp"
android:height="40dp" />
<!-- centerX, centerY是百分百(0-1) -->
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:startColor="#ffff0000"
android:centerColor="#80ff0000"
android:endColor="#10ff0000"
android:gradientRadius="30dp"
android:type="radial" />
</shape>
掃描漸變:circle_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓形內(nèi)部填充-掃描漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="true">
<size
android:width="@dimen/shape_size"
android:height="@dimen/shape_size" />
<!-- sweep類型angle,gradientRadius無效,centerX, centerY是百分百(0-1) -->
<gradient
android:centerX="0.5"
android:centerY="0.6"
android:startColor="#ffff0000"
android:centerColor="#80ff0000"
android:endColor="#20ff0000"
android:gradientRadius="20dp"
android:type="sweep" />
</shape>
橢圓的不在贅述,只要修改shape標(biāo)簽的shape屬性為oval
重點(diǎn)看一下環(huán)形
環(huán)內(nèi)填充:ring_fill.xml
<?xml version="1.0" encoding="utf-8"?><!-- 圓環(huán) -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadiusRatio="4"
android:shape="ring"
android:thicknessRatio="4"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<solid android:color="#80ff0000" />
</shape>
** 圓環(huán)邊框:ring_border.xml **
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán)-僅有邊框 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:shape="ring"
android:thickness="16dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<stroke
android:width="2dp"
android:color="#ffff00ff" />
</shape>
邊框+填充:ring_border_and_fill.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán) -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:innerRadius="20dp"
android:shape="ring"
android:thickness="16dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<solid android:color="#80ff0000" />
<stroke
android:width="2dp"
android:color="#ffff00ff" />
</shape>
線性漸變:ring_gradient_linear.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán)-線性漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="10dp"
android:thickness="30dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<gradient
android:angle="45"
android:centerColor="#80ff0000"
android:endColor="#ffff0000"
android:startColor="#00ff0000"
android:type="linear" />
</shape>
徑向漸變:ring_gradient_radial.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán)-徑向漸變漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="10dp"
android:thickness="30dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<!--設(shè)置徑向漸變半徑,漸變從圓心開始-->
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:centerColor="#80ff0000"
android:endColor="#00ff0000"
android:startColor="#ffff0000"
android:gradientRadius="40dp"
android:type="radial" />
</shape>
掃描漸變:ring_gradient_sweep.xml
<?xml version="1.0" encoding="utf-8"?>
<!-- 圓環(huán)-線性漸變 -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="10dp"
android:thickness="30dp"
android:useLevel="false">
<!--android:useLevel="false"必須是false-->
<size
android:width="80dp"
android:height="80dp" />
<!--掃描漸變shape不能設(shè)置角度-->
<gradient
android:centerColor="#80ff0000"
android:endColor="#ffff0000"
android:startColor="#00ff0000"
android:type="sweep" />
</shape>
后記
本文參考以及部分引用自文章Android XML shape 標(biāo)簽使用詳解