Android GradientDrawable的XML实现

﹏ヽ暗。殇╰゛Y 2023-10-17 08:10 27阅读 0赞

**Android GradientDrawable的XML实现**

Android GradientDrawable与附录文章1类似，这次以XML而非Java代码形式实现。比如写好一个shape文件放在res/drawable目录下，名字比如可以命名为gradient.xml。  
然后在上层Java代码里面就可以使用这个shape文件，比如是一个ImageView文件，把这个shape文件加载：

ImageView image= (ImageView) findViewById(R.id.imageView);
    image.setImageDrawable(getResources().getDrawable(R.drawable.gradient));

下面是GradientDrawable以不同xml代码实现的不同结果。

（一）线性渐变的GradientDrawable。

shape代码：

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    
        <gradient
            android:angle="45"
            android:centerColor="@android:color/holo_orange_dark"
            android:endColor="@android:color/holo_blue_dark"
            android:startColor="@android:color/holo_red_dark" />
    
        <stroke
            android:width="20dip"
            android:color="@android:color/black"
            android:dashGap="2dip"
            android:dashWidth="10dip" />
    </shape>

结果：

![Center][]

没有dash间断分割的xml代码：

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    
        <gradient
            android:angle="135"
            android:centerColor="@android:color/holo_orange_dark"
            android:endColor="@android:color/holo_blue_dark"
            android:startColor="@android:color/holo_red_dark" />
    
        <stroke
            android:width="20dip"
            android:color="@android:color/black" />
    </shape>

结果：

![Center 1][]

以上是GradientDrawable的线性渐变。

（二）ring环形的GradientDrawable。

设定Android shape=ring，制作一个圆环。如代码：

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="ring"
        android:thickness="20dp"
        android:useLevel="false">
    
        <gradient
            android:angle="90"
            android:centerColor="@android:color/holo_orange_dark"
            android:endColor="@android:color/holo_blue_dark"
            android:startColor="@android:color/holo_red_dark" />
    
    </shape>

结果：

![Center 2][]

这句代码：

android:thickness="20dp"

圆环的厚度。

给圆环描边（假设是5dp）：

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="ring"
        android:thickness="30dp"
        android:useLevel="false">
    
        <gradient
            android:angle="90"
            android:centerColor="@android:color/holo_orange_dark"
            android:endColor="@android:color/holo_blue_dark"
            android:startColor="@android:color/holo_red_dark" />
    
        <stroke android:width="5dp"
            android:color="@android:color/black" />
    
    </shape>

结果：

![Center 3][]

（三）渐变矩形。

代码：

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <gradient
            android:angle="90"
            android:endColor="@android:color/holo_green_light"
            android:startColor="@android:color/transparent" />
    
    </shape>

结果：

![Center 4][]

（四）渐变线。

用andriod的shape直接设置属性为line即可画一个实现，同时设定size的高度值为1px或者1dp，这很简单就实现了。但是如果要画一个渐变的线，直接使用line就复杂难办了。解决这个问题可以转化一下，我们画一个矩形，但是这个矩形的高度只有1px或1dip，这样就把一个矩形变矮成一条线，矩形的渐变很容易实现。比如实现一个从两边到中间逐渐变黑的高度仅仅为1px的线条，那么可以画一个矩形，设置这个矩形的开始、中间、结束渐变颜色值，同时设定它的高度值是1px，从而就实现了一个渐变线，代码例子：

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
    
        <gradient
            android:angle="0"
            android:centerColor="@android:color/black"
            android:endColor="@android:color/transparent"
            android:startColor="@android:color/transparent" />
    
        <size android:height="1px" />
    
    </shape>

结果：

![Center 5][]

附录：  
1，《Android渲染器Shader：LinearGradient（一）》链接：[http://blog.csdn.net/zhangphil/article/details/52004027][http_blog.csdn.net_zhangphil_article_details_52004027]  
2，《Android渲染器Shader：梯度渐变扫描渲染器SweepGradient（二）》链接：[http://blog.csdn.net/zhangphil/article/details/52021677][http_blog.csdn.net_zhangphil_article_details_52021677]  
3，《Android渲染器Shader：环状放射渐变渲染器RadialGradient（三）》链接：[http://blog.csdn.net/zhangphil/article/details/52023723][http_blog.csdn.net_zhangphil_article_details_52023723]  
4，《Android ShapeDrawable之OvalShape、RectShape、PaintDrawable、ArcShape》链接：[http://blog.csdn.net/zhangphil/article/details/52025152][http_blog.csdn.net_zhangphil_article_details_52025152]  
5，《Android View加载圆形图片且同时绘制圆形图片的外部边缘边线及边框：LayerDrawable实现》链接：[http://blog.csdn.net/zhangphil/article/details/52035255][http_blog.csdn.net_zhangphil_article_details_52035255]

[Center]: https://img-blog.csdn.net/20160728144510033?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20160728144744302?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20160729092214935?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20160729092911110?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: https://img-blog.csdn.net/20160729095046291?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 5]: https://img-blog.csdn.net/20160729101235324?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[http_blog.csdn.net_zhangphil_article_details_52004027]: http://blog.csdn.net/zhangphil/article/details/52004027
[http_blog.csdn.net_zhangphil_article_details_52021677]: http://blog.csdn.net/zhangphil/article/details/52021677
[http_blog.csdn.net_zhangphil_article_details_52023723]: http://blog.csdn.net/zhangphil/article/details/52023723
[http_blog.csdn.net_zhangphil_article_details_52025152]: http://blog.csdn.net/zhangphil/article/details/52025152
[http_blog.csdn.net_zhangphil_article_details_52035255]: http://blog.csdn.net/zhangphil/article/details/52035255