ADNROID XML图像资源文件详细讲解(五)

前端之家收集整理的这篇文章主要介绍了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,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图像资源中的所有类型都介绍完了。后面将会写一些在实际开发中使用这些资源的案例。
原文链接:https://www.f2er.com/xml/296309.html

猜你在找的XML相关文章