渐变和圆角风格

圆角

 

下面的布局文件实现了有颜色填充的圆角矩形

<?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”rectangle”>
<solid
android:color=”#f0600000”/>
<stroke
android:width=”10dp”
android:color=”#00FF00”/>
<corners
android:radius=”15dp” />
<padding
android:left=”10dp”
android:top=”10dp”
android:right=”10dp”
android:bottom=”10dp”
/>
</shape>

 

下面是效果：

详细解释：

<shape>标签支持的属性：

Line——直线

Oval——椭圆

Rectangle——矩形

Ring——圆环

 

<solid>标签：颜色填充

<corners>标签：实现圆角。Radius属性定义了圆角的弧度。

 

 

 

 

 

渐变

 

GradientDrawables提供三种渐变类型linear,radial,sweep

Linear——线性渐变，默认的渐变类型，从startColor开始渐变到endColor结束，angle定义了渐变的角度

Radial——从startColor开始到endColor,对应由图形边缘到中心的圆形渐变

Sweep——沿着图形的外边缘从startColor到endColor的渐变

 

下面的布局片段对上述三种风格进行了实现，效果如下：

<!-- Rectangle with linear gradient -->
<?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”rectangle”
android:useLevel=”false”>
<gradient
android:startColor=”#ffffff”
android:endColor=”#ffffff”
android:centerColor=”#000000”
android:useLevel=”false”
android:type=”linear”
android:angle=”45”
/>
</shape>
<!-- Oval with radial gradient -->
<?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”oval”
android:useLevel=”false”>
<gradient
android:type=”radial”
android:startColor=”#ffffff”
android:endColor=”#ffffff”
android:centerColor=”#000000”
android:useLevel=”false”
android:gradientRadius=”300”
/>
</shape>
<!-- Ring with sweep gradient -->
<?xml version=”1.0” encoding=”utf-8”?>
<shape xmlns:android=”http://schemas.android.com/apk/res/android”
android:shape=”ring”
android:useLevel=”false”
android:innerRadiusRatio=”3”
android:thicknessRatio=”8”>
<gradient
android:startColor=”#ffffff”
android:endColor=”#ffffff”
android:centerColor=”#000000”
android:useLevel=”false”
android:type=”sweep”
/>
</shape>

 

详细解释：

startColor——起始颜色

endColor——结束颜色

centerColor——过度颜色

angle——渐变角度，逆时针旋转。0度表示从左到右，90度表示从下到上，180表示从右到左，270表示从上到下

gradientRadius——渐变半径

corner——圆角半径