前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角,渐变实现)

Android GradientDrawable(shape标签定义) 静态使用和动态使用(圆角,渐变实现)

作者头像
用户1155943
发布于 2018-01-04 07:32:20
发布于 2018-01-04 07:32:20
3.7K00
代码可运行
举报
文章被收录于专栏:Android点滴积累Android点滴积累
运行总次数:0
代码可运行

Android GradientDrawable使用优势:

  1. 快速实现一些基本图形(线,矩形,圆,椭圆,圆环)

  2. 快速实现一些圆角,渐变,阴影等效果

  3. 代替图片设置为View的背景

  4. 可以减少apk大小,提升用户下载意愿

  5. 还可以减少内存占用

  6. 方便修改与维护

  基于上面几种优势,我们很多时候都会选择使用android的shape,下面分别介绍shape的静态使用和动态使用

1. GradientDrawable的静态使用(xml中使用shape标签定义)

  在drawable中创建一个xml文件,在布局文件中直接引用这个xml文件即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<?xml version="1.0" encoding="utf-8"?>

 <!-- 
    android:shape=["rectangle" | "oval" | "line" | "ring"]
    shape的形状,默认为矩形,可以设置为矩形(rectangle)、椭圆形(oval)、线(line)、环形(ring)

    下面的属性只有在android:shape="ring时可用:
    android:innerRadius           内环的半径。
    android:innerRadiusRatio    浮点型,以环的宽度比率来表示内环的半径,
    例如,如果android:innerRadiusRatio,表示内环半径等于环的宽度除以5,这个值是可以被覆盖的,默认为9.

    android:thickness              环的厚度
    android:thicknessRatio      浮点型,以环的宽度比率来表示环的厚度,例如,如果android:thicknessRatio="2",
    那么环的厚度就等于环的宽度除以2。这个值是可以被android:thickness覆盖的,默认值是3.
    
    android:useLevel            boolean值,如果当做是LevelListDrawable使用时值为true,否则为false.
  -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle" >
    <!--宽度和高度 
        android:width   整型 宽度
        android:height  整型 高度
    -->
    <size
        android:width="50dp"
        android:height="50dp"/>

    <!--圆角
        android:radius                    整型 半径
        android:topLeftRadius           整型 左上角半径
        android:topRightRadius               整型 右上角半径
        android:bottomLeftRadius           整型 左下角半径
        android:bottomRightRadius         整型 右下角半径
    -->
    <corners
        android:radius="10dp"/><!-- 设置圆角半径,可以分别设置4个角 -->
    
    <!--渐变,这个设置之后一般就不要设置solid填充色了
        android:startColor  颜色值     起始颜色
        android:endColor    颜色值     结束颜色
        android:centerColor 整型       渐变中间颜色,即开始颜色与结束颜色之间的颜色
        android:angle       整型            渐变角度(PS:当angle=0时,渐变色是从左向右。 然后逆时针方向转,当angle=90时为从下往上。angle必须为45的整数倍)

        android:type        ["linear" | "radial" | "sweep"] 渐变类型(取值:linear、radial、sweep)
                            linear 线性渐变,这是默认设置
                            radial 放射性渐变,以开始色为中心。
                            sweep 扫描线式的渐变。

        android:useLevel     ["true" | "false"]                   如果要使用LevelListDrawable对象,就要设置为true。设置为true无渐变。false有渐变色

        android:gradientRadius 整型   
        渐变色半径.当 android:type="radial" 时才使用。单独使用 android:type="radial"会报错。

        android:centerX      整型     渐变中心X点坐标的相对位置
        android:centerY      整型     渐变中心Y点坐标的相对位置
    -->
    <gradient
        android:startColor="@android:color/white"
        android:centerColor="@android:color/black"
        android:endColor="@android:color/black"
        android:useLevel="true"
        android:angle="45"
        android:type="radial"
        android:centerX="0"
        android:centerY="0"
        android:gradientRadius="90"/>
    
    <!-- 间隔
        内边距,即内容与边的距离 
        android:left        整型 左内边距
        android:top        整型 上内边距
        android:right      整型 右内边距
        android:bottom   整型 下内边距
    -->
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"/>
    
    <!--填充 
        android:color   颜色值 填充颜色
    -->
    <solid
        android:color="@android:color/white"/><!-- 填充的颜色 -->
    
    <!--描边 
        android:width          整型      描边的宽度
        android:color           颜色值    描边的颜色
        android:dashWidth   整型      表示描边的样式是虚线的宽度, 值为0时,表示为实线。值大于0则为虚线。
        android:dashGap     整型      表示描边为虚线时,虚线之间的间隔 即“ - - - --->
    <stroke
        android:width="1dp" <!-- 边框宽度 -->
        android:color="@android:color/black"
        android:dashWidth="1dp"
        android:dashGap="2dp"/>
    
</shape>

2. 动态创建GradientDrawable并使用

  用shape标签定义的xml,最终都是转化为GradientDrawable对象,而不是ShapeDrawable, 也不是起类型对应的 OvalShape,RoundRectShape等。

  GradientDrawable可以动态设置类型如下图所示,跟xml文件中类型android:shape的值一一对应。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
View view = null;    // 这个view是你需要设置背景的view
int strokeWidth = 1;     // 1dp 边框宽度
int roundRadius = 5;     // 5dp 圆角半径
int strokeColor = Color.parseColor("#FFFF0000");//边框颜色
int fillColor = Color.parseColor("#FF00FF00"); //内部填充颜色

GradientDrawable gd = new GradientDrawable();//创建drawable
gd.setColor(fillColor);
gd.setCornerRadius(roundRadius);
gd.setStroke(strokeWidth, strokeColor);gd.setGradientType(GradientDrawable.RECTANGLE);
view.setBackgroundDrawable(gd);
        
// 创建渐变的shape drawable
int colors[] = { 0xff255779 , 0xff3e7492, 0xffa6c0cd };//分别为开始颜色,中间夜色,结束颜色
GradientDrawable gradientDrawable = new GradientDrawable(GradientDrawable.Orientation.TOP_BOTTOM, colors);
view.setBackgroundDrawable(gd);

3. 动态改变GradientDrawable的属性

  既然GradientDrawable都能动态创建,那么肯定能过动态修改,我们可以通过先获取view上设置的background drawable

  如果是GradientDrawable则强制转换为GradientDrawable,这个时候就可以修改里面的属性,像动态创建时一样设置,设置好之后重新设置给view.

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
GradientDrawable drawable =(GradientDrawable)view.getBackground();
drawable.setColor(fillColor); // 设置填充色   
drawable.gd.setStroke(strokeWidth, strokeColor); // 设置边框宽度和颜色
gd.setColors(colors);    // 设置渐变颜色数组

总结:

请注意区分 GradientDrawable 和 ShapeDrawable,这两个 Drawable 官方文档解释都是可以使用 shape 标签来定义,但实际使用过程却发现使用 shape 标签定义的 Drawable 属于 GradientDrawabl。使用 shape 标签能定义多种多样的 Drawable,能够方便实现圆角,渐变等效果,更多 shape 标签定义请参考 Drawable实战解析:Android XML shape 标签使用详解 。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016-06-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)
用户1155943
2018/01/04
2.6K0
Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)
Android学习第一弹:Android通过用代码画虚线椭圆边框背景来学习一下shape的用法
学习Shape的用法 非著名程序员 在Android程序开发中,我们经常会去用到Shape这个东西去定义各种各样的形状,shape可以绘制矩形环形以及椭圆,所以只需要用椭圆即可,在使用的时候将控件
非著名程序员
2018/02/01
2.3K0
Android学习第一弹:Android通过用代码画虚线椭圆边框背景来学习一下shape的用法
Android开发笔记(八)神奇的shape
shape意即形状,是Android中描述规则几何图形的定义,ShapeDrawable其实就是Drawable的一个子类。用好shape,可以让APP页面不再呆板;用好shape,可以节省不小的美工工作量。 shape的定义文件是xml,以shape元素为根节点。根节点下定义了六个节点:corners(圆角)、gradien(渐变)、padding(间隔)、size(尺寸)、solid(填充)、stroke(描边),各节点的属性值主要是各种长宽、半径、角度,以及颜色。这些定义很简单,多用几遍就记住了,不过网上的介绍大多不全,所以博主在下面就详细介绍各节点的属性用法。   shape(根节点) android:shape: 字符串类型,图形的形状。为rectangle表示矩形(默认),为oval表示椭圆(此时corners节点将失效),为line表示直线(此时必须设置stroke节点,不然会报错),为ring表示圆环。 下面的属性只有在android:shape="ring"时可用: android:innerRadius: 像素类型,内圆的半径。 android:innerRadiusRatio: 浮点型,以环的宽度比率来表示内圆的半径。例如,如果android:innerRadiusRatio="3",表示内圆半径等于环的宽度(即外圆直径)除以3。如已设置android:innerRadius则不需设置本属性 android:thickness: 像素类型,环的厚度 android:thicknessRatio: 浮点型,以环的宽度比率来表示环的厚度。例如,如果android:thicknessRatio="2",那么环的厚度就等于环的宽度除以2。如已设置android:thickness则不需设置本属性 android:useLevel: 布尔类型,如果当做是LevelListDrawable使用时值为true,否则为false(一般情况必须设置为false,不然ring无法显示)。   corners(圆角) android:bottomLeftRadius: 像素类型,左下圆角的半径 android:bottomRightRadius: 像素类型,右下圆角的半径 android:topLeftRadius: 像素类型,左上圆角的半径 android:topRightRadius: 像素类型,右上圆角的半径 android:radius: 像素类型,圆角半径(若有上面四个圆角半径的定义,则不需要radius定义)   无corners节点表示没有圆角   gradien(渐变) android:angle: 整型,渐变的起始角度。0值时表示时钟的九点位置,其值增大表示往逆时针方向旋转。例如值为90表示时钟六点位置,值为180表示时钟三点位置,值为270表示时钟零点/十二点位置 android:centerX: 浮点型,圆心的X坐标。当android:type="linear"时不可用 android:centerY: 浮点型,圆心的Y坐标。当android:type="linear"时不可用 android:gradientRadius: 整型,渐变的半径。当android:type="radial"时才需要设置该属性 android:centerColor: 颜色类型,渐变的中间颜色 android:startColor: 颜色类型,渐变的起始颜色 android:endColor: 颜色类型,渐变的终止颜色 android:type: 字符串类型,渐变类型。为linear表示线性渐变(默认值),为radial表示放射渐变(起始颜色就是圆心颜色),为sweep表示滚动渐变(即一个线段以某个端点为圆心做360度旋转) android:useLevel: 布尔类型,设置为true无渐变,false有渐变色。如果要使用LevelListDrawable对象,就要设置为true   无gradien节点表示没有渐变效果   padding(间隔) android:bottom: 像素类型,与下边的间隔 android:left: 像素类型,与左边的间隔 android:right: 像素类型,与右边的间隔 android:top: 像素类型,与上边的间隔   无padding节点表示四周不设间隔   size(尺寸) android:height: 像素类型,图形高度 android:width: 像素类型,图形宽度   无size节点表示长宽自适应   solid(填充) android:color: 颜色类型,内部填充的颜色   无solid节点表示无填充颜色   
aqi00
2019/01/18
1.6K0
Android入门教程 | res资源目录简介与shape的绘制和使用
把资源放进对应的目录后,可使用在项目 R 类中生成的资源 ID 来访问这些资源。形如 R.drawable.icon,R.layout.main_activity。 R类是自动生成的。代表resources。
Android_anzi
2021/10/29
1.5K0
Android – Drawable 详解
很早看过这篇文章,并做了笔记,后来看到群里的小伙伴有问相关Drawable的问题,就把这篇翻译过来的文章给放出来了。大家一起学习,一起进步。想看原文的小伙伴可以点击下面的链接。 原文地址 前言 Drawable是可以绘制到屏幕上的图形。 Drawable用于定义形状,颜色,边界,渐变等,然后将其应用于Activity中的View。 这通常用于自定义显示在特定View。 Drawable倾向于在XML中定义,然后可以通过XML或Java代码应用于View。 有关Android的每个版本的默认Drawab
code_horse
2018/07/02
5.5K0
Art of Android Development Reading Notes 6
《Android开发艺术探索》读书笔记 (6) 第6章 Android的Drawable
宅男潇涧
2018/08/01
4710
Android MaterialButton使用详解,告别shape、selector
由上图可以看到MaterialButton也没有什么神秘的,不过是Button的一个子类而已,但是经过谷歌的封装之后,在符合Material Design的基础上,使用起来更加方便了,且容易实现预期效果。
yechaoa
2022/06/10
1.2K0
Android MaterialButton使用详解,告别shape、selector
实习杂记(20)---Android里面shape定义图形相关属性
xmlns:android String. Required. Defines the XML namespace, which must be "http://schemas.android.com/apk/res/android". 这个是必须的,申明Android的命名空间 android:shape Keyword. Defines the type of shape. Valid values are:(定义这个类型的形状,变量值是:) 这个也是必须的,表示你定义的图形是什么类型,圆,环,直线,长方形
wust小吴
2019/07/08
4050
Android MaterialButton使用详解,告别shape、selector
由上图可以看到MaterialButton也没有什么神秘的,不过是Button的一个子类而已,但是经过谷歌的封装之后,在符合Material Design的基础上,使用起来更加方便了,且容易实现预期效果。
Rouse
2021/07/08
1.5K0
Android MaterialButton使用详解,告别shape、selector
你都知道么?Android中21种drawable标签大全
我们在drawable目录下可以创建很多自定义的资源,其中用的最多的应该就是selector和shape。目前在Android中有21种drawable标签,了解和利用这些标签对我们的开发有很大的帮助。这个文章我们对这21种标签做一个介绍,让大家有一个印象。
BennuCTech
2021/12/24
2.6K0
Android各种各样的Drawable-更新中
通常情况下,我们很少直接使用Drawable的实现类,大部分的情况下还是使用xml的方式进行开发。只有在程序中需要动态的修改drawable的属性时,才需要使用具体的drawable类型提供的方法。
小小工匠
2021/08/16
1.1K0
Android ShapeableImageView使用详解,告别shape、三方库
由上图可以看到ShapeableImageView也没有什么神秘的,不过是ImageView的一个子类而已,但是从效果图来看,在不写shape、不引入三方库的情况下,还是挺容易实现预期效果的,而且扩展性良好。
yechaoa
2022/06/10
2K0
Android ShapeableImageView使用详解,告别shape、三方库
在TextView前面(或后面)添加文本(或者图片)标签
大家都知道,前几年在TextView文本前添加自定义标签文本或标签图片还是比较火的,特别是一些电商项目。不过这几年,UI设计基本很少见到这种设计了,不过还是有些时候,还是会遇到一些在文本前加标签需求。如果使用TextView自带的drawableLeft属性,虽然可以满足一些常规需求,但是可定制化太低,而且文本换行时图片和文本会分离,达不到想要的效果。当然,我这里也只是提供了一种方法,实现一个需求是有千千万万种方法的!
前端小tips
2021/11/30
2.8K0
在TextView前面(或后面)添加文本(或者图片)标签
相关推荐
Android XML shape 标签使用详解(apk瘦身,减少内存好帮手)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验