推广

Android Shape的使用(自定义绘制)

iseeyu3年前 (2024-02-22)推广172

image

1·rectangle–矩形,总觉得这个用的比较多
2·line—线,这个只能是水平的,不能定义竖直的。
3·oval—椭圆,我们一般是定义一个正圆。
4·ring—圆环,可以定义加载控件。

这是shape可以定义的几种形状,而且他们都离不开如下几种特性(我用导图整理了一下,方便查看)

image

以上就是shape的六种特性了,可以说,学习shape就是学习以上六种特性。下面我将一步一步的讲解以上六种特性的使用以及实现效果,我开篇也说了,这篇文章不仅教大家如何使用shape,更会告诉初学者如何学习shape,那学习shape的关键在哪呢?那就是你一定要动手实践,自己写代码看看效果。

首先,我们以最常用的rectangle为例来讲解以上特性的使用,这个时候你就需要在shape的根元素指定你要绘制的shape类型,如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android";
android:shape="rectangle"
>

</shape>

我们这里就以开篇提到的那个button按钮的效果来实例操作一下,首先你要明确我们是利用shape来给button按钮绘制一个背景,所以我们先要定义这个背景的宽和高,这用到shape的哪个特性呢?(如果忘记都有哪些特性,可以浏览之前给的那张导图,建议下载下来,对照查看),我们可以看到在shape的特性当中有一个size,对这就是用来定义我们所要绘制图形的大小了,那我们来实际操作一下吧!

<!--大小-->
<size android:width="600dp" android:height="100dp"></size>

这行代码意思是定义一个宽高比例为6:1的矩形(宽高比例视需求而定),这个时候你可能看不到任何效果,因为背景色是没有的,这个时候就需要使用另外一个特性了—solid,我们使用这个特性来为我们绘制的图形填充颜色,代码如下:

<!--填充-->
<solid android:color="@color/colorPrimary"></solid>

如此一来我们就实现了这样的效果:

image

我们看最终效果发现矩形的四个角都是圆形的,这就要使用shape的coeners了,我们设置代码如下:

<!--圆角-->
<corners android:radius="50dp"></corners>

以上代码是给我们要绘制的图形的四个角设置一个统一的圆角半径,我们看效果

image

好了,这里我们要实现的最终效果越来越近了,现在就是颜色的问题,我们使用solid只能给图形填充纯色背景,要想达到最终效果的渐变,我们需要使用到shape的gradient特性了,这个特性可以设定的属性值较多,我们先从简单的设置渐变色来开始学习。

<!--渐变-->
<gradient android:startColor="#6fd99d" android:centerColor="#63cfc3" android:endColor="#57c5e9"></gradient>

以上代码用到了gradient的三个属性值:startColor,centerColor,endColor。这三个属性很好理解,分别是渐变开始,中间和结束的颜色,我们来看效果。

image

为了让你更加清楚startColor,centerColor,endColor这三个属性的作用,我们采取开始颜色为黑色,中间颜色为红色以及结束颜色为蓝色的渐变。

<!--渐变-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10909" android:endColor="#067fe2"></gradient>

image

如此一来你对这个渐变三种夜色的过度应该很清楚了吧!接下来我们看看如何引用我们绘制好的shape吧!

<Button android:layout_width="match_parent" android:layout_height="50dp"
android:layout_marginTop="20dp"
android:layout_marginLeft="12dp"
android:layout_marginRight="12dp"
android:background="@drawable/tv_bg"
android:text="一个自学的程序员"
android:textColor="#efebeb"
/>

此处的tv_bg就是我们绘制的shape文件的名称。效果如下

image

shape六种特性的详解

现在我们来稍微小结一下,在实现上述效果的过程中,我们使用到了shape的size,solid,corners以及gradient特性,我们在之前也说过,shape一共有六个特性需要我们学习,这里只使用到了其中的四个,为了方便大家学习,我将六种特性的含义解释分类如下:

size—-定义形状的宽高

image

solid—-定义形状的背景填充色

image

corners—-设置形状四个角的圆角大小

image

注意:如果使用radius属性会统一设置四个角的圆角大小,单独设置会覆盖radius的效果。

gradient—-设置形状背景色的渐变(一共有九个属性)

在学习这个特性之前,我们要清楚这个渐变包含三种类型,一种是linear表示线性渐变,一种是放射性渐变还一种是扫描性渐变,由于这块比较复杂,我将gradient特性的各个渐变类型对应的属性值用导图整理了一下。

image

下面看各个渐变类型的效果图(我们画的依然是矩形)

线性渐变

image

放射性渐变

image

stroke—-给形状设置描边

image

padding—-设置以此形状为背景的内容距形状四周的内边距。

image

以上以画矩形为例借助图例的形式详细的将shape的六种特性的使用演示了一遍,现在我们来做个总结:

首先shape可以画三种类型的图形,分别是rectangle–矩形,oval–椭圆(一般用来画圆),ring–环形.

无论是画哪一种形状,都是要使用到我们上诉说的六种特性,分别是size,solid,corners,gradient,stroke,padding。只不过画某一种形状可能只用到六种特性中的部分特性,只要我们掌握了这六种特性,无论画哪一种形状应该都是毫无压力的。

椭圆

以上我们都是以画矩形为例详细介绍了六种特性的使用方式,对于椭圆和环形都是大同小异,非要说不同的话,环形有一些特殊的属性值需要我们学习,接下来,我们以画椭圆为例,介绍如何使用shape。

首先更改shape的根元素将shape的值改为oval。

android:shape="oval"

我们之前也说了,使用shape画oval我们一般就是用来画正圆比较多,所以我们可以将size特性的属性值宽高比例设为1:1即可。

<!--大小-->
<size android:width="1dp" android:height="1dp"></size>

我们看下效果

image

在绘制圆形的时候渐变用到的是比较多的,这里我们就主要介绍下在画圆中关于渐变的使用。

首先我们看第一种渐变类型–线性渐变且倾斜角度为0

我们首先看下效果。

image

代码如下

<!--渐变-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:angle="0" android:type="linear"
></gradient>

这里如果你不指定渐变的类型,则其默认的渐变方式就是线性渐变且倾斜角度为0.

我们再来看下倾斜角度为90的线性渐变

image

你们要与倾斜角度为0的进行对比以属性angle属性的使用,下面我们再来看下另外一种渐变类型,那就是放射性渐变。

image

这里需要注意一点,有的人可能得不到这样的效果,为什么呢?我们先来看下我的代码

<!--渐变-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:angle="0" android:type="radial" android:gradientRadius="0.5dp" android:centerX="0.5"
android:centerY="0.5"
></gradient>

知道你们注意到没我这里的gradientRadius设置的是0.5dp,你们一不小心设置成大于1的话就会出现这样的效果。

image

这是为什么呢?其实我这里为了说明一个问题给大家挖了一个坑,我们在之前设置圆形的size的时候还记得是怎么设置的吗?我当时说只要宽高比例为1:1就会得到一个正圆,于是我是这样写的代码。

<!--大小-->
<size android:width="1dp" android:height="1dp"></size>

看到没,我将宽和高都设置成了1dp,这样导致什么结果呢?我们要知道gradientRadius是用来设置放射的半径的,如果我们设置的参数大于1dp(要注意我们的正圆宽高才1dp)就会超过我们的正圆大小,这样就得不到我们想要的放射性渐变的效果了,所以这点要注意gradientRadius的属性值要根据设置的size的大小来设定。

我们子啊之前介绍画矩形的时候说到过,渐变的类型是有三种的,除了以上说的还有一种扫描型渐变,为什么在画矩形的时候没有介绍呢?因为我觉得在画圆形的时候看扫描型渐变才会更加直观,我们来做个测试,在矩形中的扫描型渐变是这个样子的。

image

第一次看可能你对什么是扫描型渐变可能还不太理解,下面我们看在圆形中的扫描型渐变。

image

怎么样,是不是有点明白了,其实扫描型渐变就是以图形中心为点从右侧水平线开始逆时针旋转依次历经开始的颜色,中间的颜色和结束的颜色。代码如下。

<!--渐变-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:type="sweep" android:centerX="0.5"
android:centerY="0.5"
></gradient>

好了,以上介绍了画椭圆的一些使用方法,这里你可能会发现,我并没有想之前介绍画矩形的时候那么详细把每一个特性的属性值什么意思怎么用都说了一遍,因为无论画什么这些属性表达的都是一个意思,关键在于适不适合在当前你绘制的图形中使用。

line–线

我们说了shape可以绘制四种形状,我们以上讲了矩形和椭圆,接下来讲解下一个line–线型。

画线的时候主要用到了size和stroke,也就是靠这两个特性才会显示线,而且要注意使用size的时候只能画高,不要画宽。

我们看下代码。

<!--大小-->
<size android:height="20dp"></size>

<!--描边-->
<stroke android:color="#ef0b0b" android:width="1dp" android:dashGap="20dp" android:dashWidth="32dp"

></stroke>

以上代码实现的效果如下。

image

ring–环

画线的时候没有像画矩形或者圆的时候那么麻烦,用到的属性也没那么多,相对而言还是比较简单的,下面让我们继续,继续学习最后一个形状ring–环型。

为什么要最后一个来将ring呢?因为它还是有点特殊的,我们在之前写代码的时候对于shape的根元素我们只写了这么一个属性。

<shape xmlns:android="http://schemas.android.com/apk/res/android";
android:shape="ring"
>

就是指定我们要画的图形的类型的,但是对于shape的根元素还是可以设置一些特殊元素的,而这些元素只适用于ring,下面一起来看下吧!

* android:innerRadius 设置内环的半径
* android:innerRadiusRatio 以环的宽度比率来表示内环的半径,这个值默认为3,表示内环半径为环的宽度除以3,但是这个值会被android:innerRadius给覆盖
* android:thickness 环的厚度
* android:thicknessRatio 以环的宽度比率来表示环的厚度,这个值默认为9,表示环的厚度为环的宽度除以9,同样这个值会被android:thickness覆盖
* android:useLevel 一般为false,否则可能环形无法显示,只有作为LevelListDrawable使用时才设为true

我们先来看下效果图吧。

image

代码如下。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android";
android:shape="ring"
android:innerRadiusRatio="3"
android:thicknessRatio="9"
android:useLevel="false"
>

<!--一共有六个属性-->

<!--大小-->
<size android:height="10dp"></size>

<!--渐变-->
<gradient android:startColor="#0b0b0b" android:centerColor="#f10918" android:endColor="#067fe2"
android:type="sweep" android:centerX="0.5"
android:centerY="0.5"
></gradient>

<!--描边-->
<stroke android:color="#151515" android:width="1dp" android:dashGap="20dp" android:dashWidth="32dp"

></stroke>

</shape>

大家在使用ring画圆环的时候可能对那几个特有的元素不是太清楚,这里重点说下这几个属性。

* android:innerRadius 设置内环的半径
* android:innerRadiusRatio 以环的宽度比率来表示内环的半径,这个值默认为3,表示内环半径为环的宽度除以3,但是这个值会被android:innerRadius给覆盖
* android:thickness 环的厚度
* android:thicknessRatio 以环的宽度比率来表示环的厚度,这个值默认为9,表示环的厚度为环的宽度除以9,同样这个值会被android:thickness覆盖
* android:useLevel 一般为false,否则可能环形无法显示,只有作为LevelListDrawable使用时才设为true

image

大家在使用ring的这些特殊属性的时候参照我给的这个图(虽然有点丑)可能有助于你理解,尤其是innerRadiusRatio和thicknessRatio这两个属性。

到此我们已经将Android中关于shape的使用全部讲解完成了,现在来个大总结吧!首先shape是用来进行xml绘制图形的,可以给一些控件设置背景来达到我们想要的效果,shape其实就是一个xml文件,一般放在我们项目中的drawable文件目录下,使用shape可以画四种图形分别是矩形(常用),椭圆(一般用来画正圆),直线和环形。无论是画哪一种图形都离不开shape的六种特性,只要掌握这六种特性的使用方法就可以掌握各种图形的绘制,区别就在于不同的特性适不适合当前所绘制的图形(这句话是重点,圈起来要考),关于ring-画环形这块它有一些特殊的属性,结合文中我给出的图掌握起来难度也不大,好了,再放出这非常重要的六种特性吧!

image

文章很短,路还漫长,大家好,我是i小灰,一个帅气与才华并存的男人,我们下期再见

扫描二维码推送至手机访问。

版权声明:本文由西安泽虎代运营发布,如需转载请注明出处。

转载请注明出处https://www.0291.com.cn/post/56409.html

相关文章

西安企业做百度推广,一个月花三千和花三万到底差在哪?

4|最近跟几个西安的老板聊天,发现一个挺有意思的现象:同样做百度推广,有人一个月花三千块,询盘不断;有人一个月砸三万,水花都没见着。问他们区别在哪,大多数人说不清楚,只知道'钱花了,没效果'。 5| 6|百度推广这东西,说复杂也复杂,说简单也简单。核心就一件事:让你的潜在客户搜某个词的时候,你的信息...

我想当策划,大学应该选什么专业?

我想当策划,大学应该选什么专业?

学,广告,传播,公关,这些专业其实都可以。另外也可以学像汉语言文学,以及一些跟文学相关的一些专业,会对你找工作有帮助。但是,你想从事这个这份职业,除了专业的学习之外,更多的是,你要在上学的时候积极参与一些更营销策划相关的社会实践。比如说你可以做一些兼职,比如说帮别人去写稿,...

服装市场营销策略分析,“定位不慎满盘皆输”

服装市场营销策略分析,“定位不慎满盘皆输”

不同的区域需要不同的策略,而不同的营销策略需要不同的销售思路来配合。因此,在研究女装产品销售思路之前,最好先对于市场与营销策略做一次深入地了解。1.市场区域化(market segmentation):目标营销的第一步,是将整个市场拆分成若干个同性质的小市场。2.目标市场的...

晚间悦读丨你的思维方式,决定你的人生高度!

晚间悦读丨你的思维方式,决定你的人生高度!

越长大,越发现,能够决定你人生高度的,往往是你的认知层次。 你的认知在哪个层级,你的人生就处在什么状态。你认知的高度,决定了你人生的高度。 那如何才能升级方式、提升认知能力呢?可以从这三个方面做出改变。 NO. 1 改变态度 有人...

编写项目营销策划方案六大要点

编写项目营销策划方案六大要点

现在商业发展非常迅速,的需求非常的大,但是要做好营销策划是有一定难度的,我把自己做营销策划的一些体会在这里分享给朋友们。营销策划方案六大要点我们先说项目营销策划方案这个话题。大部分的营销策划人都是在企业里工作,大部分项目之初都是来源于一个想法,创始人、老板或者创始团队的一个...

【商场营销策划】如何进行商场营销策划?

【商场营销策划】如何进行商场营销策划?

商场是策划者们关注的永恒话题,那么究竟该如何作好商场营销策划呢?掌握以下这几点营销策略设计原则,至关重要!1.义利兼顾的原则。商场在获取利润的同时要充分考虑到消费者的合法利益和商场的长远利益。在作商场活动营销策略方案的时候应该将这一点作为首要的原则。对商场有利而对顾客不利的...

现在,非常期待与您的又一次邂逅

我们努力让每一部企业宣传片和抖音短视频成为商业大片