ADNROID XML图像资源文件详细讲解（五）

前言

本篇主要介绍Scale Drawable和Shape Drawable。在实际开发中，Shape Drawable使用的也是非常频繁的。还有一个使用比较频繁的是State List Drawable。

一、Scale Drawable

此对象可以修改Drawable对象的尺寸-----以百分比的形式。比如：ImageView作为Drawable的容器，ImageView大小视为100%，Scale Drawable可以让Drawable对象只占父容器ImageView的80%。

语法格式

<?xml version="1.0" encoding="utf-8"?>
<scale
xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/drawable_resource"
android:scaleGravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
"fill_vertical" | "center_horizontal" | "fill_horizontal" |
"center" | "fill" | "clip_vertical" | "clip_horizontal"]
android:scaleHeight="percentage"
android:scaleWidth="percentage" />

语法解析

android:scaleGravity  当尺寸大小改变后的Drawable，在容器中显示的位置。取值可以是top\left\bottom\center等等(如果有多个值，可以用"|"分隔)。
android:scaleHeight  取值为百分比，比如25%。如果取值为20%，则Drawable的大小为1-20%=80%。

android:scaleWidth   取值为百分比，比如25%。同上。

例子

res/drawable/scale.xml：

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/green"
android:scaleHeight="50%"
android:scaleWidth="50%"
android:scaleGravity="center">
</scale>

green.png



layout.xml中的代码:

<ImageView
android:id="@+id/image02"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/scale"<!--对应的scale.xml -->
android:background="@android:color/darker_gray"/>

activity中的使用代码:
下面代码中的SeekBar只是为了控制Level变化。为了辅助看效果而写的。主要代码还是在第7行、8行、13行。

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SeekBar seekBar = (SeekBar) findViewById(R.id.progressbar01);
ImageView imageView2 = (ImageView) findViewById(R.id.image02);
final  ScaleDrawable scaleDrawable = (ScaleDrawable) imageView2.getDrawable();
scaleDrawable.setLevel(1);//只有level赋值大于0时，Drawable才能显示出来。
for (int i=0;i<10000;i++) {
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
scaleDrawable.setLevel(progress);//level取值增加，Drawable的大小也随之变大。
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}
});
}
}

效果如下：

二、Shape Drawable

这是一个可以自定义形状的对象。比如圆角，颜色渐变等等效果。

语法格式

<?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>

语法解析

<shape>标签的属性：

android:shape  定义形状。分别有矩形rectangle、椭圆形oval、线形line、环形ring。

rectangle	默认值。矩形
oval	椭圆形
line	一条横线。需要<stroke>标签来控制线的属性
ring	环形

1、<corners>：设置4个角的弧度。此标签只是shape
2、<gradient> ：设置填充颜色的渐变效果
3、<padding>：边距
4、<size> shape的大小
5、<solid> 填充颜色
6、<stoke> 边线的颜色和宽度，实线或者虚线。

1、Ring--环形

以下关于<shape>的属性，仅仅适用于当android:shape为ring的情况。

android:innerRadius:内部半径。环形的内半径。

android:innerRadiusRatio  环形内部半径比例。比如：ImageView的width为200dp，innerRadiusRatio=2，则环形的内部半径为100dp。

android:thickness 环形厚度。
android:thicknessratio 环形厚度比例，相对于父容器的宽度而言。
如下图：



android:useLevel 取值true或者false。当想作为类似LevelListDrawable使用的时候，useLevel为true。反之为false。当shape为ring时，此属性最好给其一个值。因为在不同版本的手机系统中此属性的默认值可能不同。

useLevel为false的时候，效果如下(是一整个环形):



useLevel为true的时候,效果如下：

Ring的例子

res/drawable/shape.xml代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadius="80dp"
android:thicknessRatio="20"
android:useLevel="true">
<stroke android:width="1dp"  android:color="#ff0000" />
<solid  android:color="@color/yellow"  />
</shape>

res/layout/activity_main.xml:

<!-- 此SeekBar用户辅助完成Shape的效果-->
<SeekBar
android:id="@+id/progressbar01"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:max="10000"/>
<TextView
android:id="@+id/image03"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="shape drawable"
android:background="@drawable/shape"/>

activity的代码：

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SeekBar seekBar = (SeekBar) findViewById(R.id.progressbar01);
TextView ringImage = (TextView) findViewById(R.id.image03);
//Shape对应的Java类是GradientDrawable
final GradientDrawable levelListDrawable = (GradientDrawable) ringImage.getBackground();

seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
levelListDrawable.setLevel(progress);
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}
});
}

以上是shape为ring的图像的属性和用例。

2、line--直线

此对象，需要stroke标签协助完成其显示效果。
例如：



实线 厚度为4dp，颜色为红色：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="4dp"  android:color="#ff0000"/>
</shape>

虚线：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="line">
<stroke android:width="4dp"  android:color="#ff0000"
android:dashGap="10dp"
android:dashWidth="9dp"/>
</shape>

android:dashGap和android:dashWidth含义如下图：

3、ractangle--矩形

需要注意的是<corners>标签效果只在矩形状态下有效。
虚线直角矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="4dp"  android:color="#ff0000"
android:dashGap="10dp"
android:dashWidth="9dp"/>
<solid android:color="@android:color/transparent"/>
</shape>

圆角矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="4dp"  android:color="#ff0000" />
<solid android:color="@android:color/transparent"/>
<corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>

其中corners的四个角的取值必须是一致的。

4、Gradient标签---渐变

此标签特地拿出来单独说明一下，因为其中有些需要注意的点。

渐变有3种类型：Linear,radial,sweep。
radial类型：
此类型有一个特有的属性android:gradientRadius。渐变的半径。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="4dp"  android:color="#ff0000" />
<!-- <solid android:color="@android:color/transparent"/>-->
<corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<gradient android:startColor="@color/yellow"
android:endColor="@color/red"
android:type="radial"
android:gradientRadius="400dp"/>
</shape>

效果：



Linear类型：
此类为从左到右，或者从下到上的渐变。android:angle属性控制渐变方向。取值必须是45的倍数。比如0就是从左到右，90是从下到上。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="4dp" android:color="#ff0000" />
<!-- <solid android:color="@android:color/transparent"/>-->
<corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<gradient android:startColor="@color/yellow"
android:endColor="@color/red"
android:type="linear"
android:angle="90"/>

效果如下：从左到有分别是angle为0、45、90的效果。

3、Sweep类型

此类型也有2个为之服务的属性：android:centerY和android:centerX，此2个属性的取值是0-1。描述的扫描中心的相对位置。
代码：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="4dp"  android:color="#ff0000" />
<!-- <solid android:color="@android:color/transparent"/>-->
<corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<gradient android:startColor="@color/yellow"
android:endColor="@color/red"
android:type="sweep"
android:centerX="0.5"
android:centerY="0.5"/>

当centerX和centerY都是0.5时，效果如下：



当centerX=0.1和centerY=0.9时，效果如下：

4、oval--椭圆形

椭圆形的使用跟矩形有点类似。除了不能使用corners标签---当然也没有必要使用，毕竟这是椭圆。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<stroke android:width="4dp"  android:color="#ff0000" />
<!-- <solid android:color="@android:color/transparent"/>-->
<corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp"
android:topLeftRadius="10dp" android:topRightRadius="10dp"/>
<gradient android:startColor="@color/yellow"
android:endColor="@color/red"
android:type="sweep"
android:centerX="0.5"
android:centerY="0.5"/>
</shape>

效果：

总结

此篇讲述了Scale和shape。其中shape包含的主要属性或者标签都进行了说明。还有部分一看就懂的标签或者属性，由于篇幅的原因就没有详细说明。

此篇为止，android XML图像资源中的所有类型都介绍完了。后面将会写一些在实际开发中使用这些资源的案例。