关于xml自定义形状的一点发现

前端之家收集整理的这篇文章主要介绍了关于xml自定义形状的一点发现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

 

这篇文章应该是前天(2015-4-7)发表的,由于最近项目比较紧,晚上回去的比较晚,所以之前的文章在这里补上,也作为记录之用

PS:话说节后上班第一天就有这么神奇的发现,想想还真是令人兴奋哪

好了,言归正传。抛砖引玉,更多好玩的东西有待各位看官继续研究。

关于在xml文件自定义形状作为按钮背景的用法相信做过一两个正式的app的开发人员应该都是熟悉的,在此简单提下。

1.layer-list

顾名思义,就是层叠的意思,将多个颜色或者图片按照顺序叠加起来,使用方法和引用正常图片一样。具体的例子大家可以百度,有不会的或者不懂的可以留言。虽然我自己用的不多,不过原 理还是理解的。

基本语法:

<layer-listxmlns:android="http://schemas.android.com/apk/res/android">

<itemandroid:drawable="@android:color/white"/>

<itemandroid:drawable="@drawable/logo_overlay"/>

</layer-list>

2.shape

shape算是笔者在这段时间的工作中用的比较多的了,用法也比较灵活。

介绍下shape相关的属性

1.<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

通过shape属性设置形状,一共有四个选项rectangle(矩形)、oval(椭圆)、line(线)、ring(圆环)

2.<corners android:topLeftRadius="2dp android:topRightRadius="2dp"
android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp"/>

在corners标签中设置各个角的圆角半径值,如果都相等的话可以通过radius统一设置。

3. padding标签与corner类似 设置的是top/left/right/bottom 四个边的padding值。

4. stroke表示边线。可以通过color设置颜色,通过width设置宽度。

5. solid 表示填充颜色,相当于背景

6. gradient 表示渐变色,可以设置的属性相对较多,一般设置startColor起始颜色,endColor结束时候的颜色,angle表示角度。具体的效果大家可以自己尝试。

简单的介绍到此为止,有问题的可以留言继续讨论。

下面才是重点。

在开发中遇到这样一种情况:需要设置颜色为循环颜色,当然如果拿图片做背景进行循环也可以,这里提供另外一种思路----GradientDrawable

官方解释是:A Drawable with a color gradient for buttons,backgrounds,etc. 一张通过颜色渐变实现的图片用来作为按钮或者背景等。

It can be defined in an XML file with the<shape> element. 可以在xml中通过shape元素进行定义。(话说当时看到这句话真的是豁然开朗,犹如醍醐灌顶。)

没错就是它。在代码修改属性的也全是靠它完成的。

比如在drawable文件夹中通过shape标签定义了一个btn_bgxml文件作为按钮的背景,如果修改它的背景颜色的话,也就相当于修改xml中的solid属性,可以通过下面两行代码实现。

GradientDrawable drawable = context.getResources().getDrawable(R.drawable.btn_bg);

drawable.setColor(Color.parseColor(colorList.get(position%colorList.size())));

其中的colorList就是要循环的颜色列表啦,字符串类型的list。需要说明的是与shape标签对应的是GradientDrawable,与layerList标签对应的是LayerDrawable,不做赘述。

相信看到这里,大家应该能明白一二了。更多属性和好玩的东西希望大家能够亲自去尝试,去发现。

再举个例子,如果要实现三个角是圆角一个角是直角的矩形效果的话,也可以采用这种方式。这里留个悬念,大家可以自行尝试。下篇文章会进行解答和说明。

限于篇幅,本篇文章到此为止,多谢大家细心阅读完~











原文链接:https://www.f2er.com/xml/296950.html

猜你在找的XML相关文章