Android 资源之drawable下shape的使用...


提姆:我好想射点什么,

biu。。。什么情况。。。

锤石:我说结束了,那就结束了



在开发过程中,很多情况下都会给view 添加背景而这个背景不仅仅是单纯的背景色,有一些圆角呀。圆形呀。亦或者其他的形状。这时候有的人就是 。。。美工快过来这里给我切一个这样的背景图。。然后美工就切了一个背景图给他。。。然后你一看。咦。。不对呀。这是png的图,不能做很好的图片拉伸。于是又叫美工去做成。9.png的图。有的美工知道这是什么。但是有的人不知道什么事.9.png是什么东东。然后你被逼无赖,只好自己动手做.9.png的图。.9.png的图有虽然可以指定区域拉伸和在自定区域输入文字,但是。这里只有拉伸,没有缩小的功能。如果.9.png的尺寸稍微比你预想的尺寸打了那么点点。。。那就别具了。我曾经就受过这样的伤害。。美工就说图没有问题。不改图。。。最后。,,

其实很多的背景图我们并不需要找UI给我们切图。我们自己就可以通过shape来绘制自己的图形。下面就进入正题。毕竟吹牛冲壳子的事。。少点。。。浪费口水

下面来介绍一些shape的使用  


首先设置shape的样式=

line 横线 

 oval 椭圆  

rectangle 矩形 (默认)

ring 环形 (貌似目前已经 废弃,使用它不会有任何效果)


shape 的属性有stroke(描边框) ,corners(圆角),gradient(渐变色),size(大小),solid(填充色),padding(边距)


首先 使用shape  绘制横线(line ): 高度为5dp的横线。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke android:width="5dp" android:color="@color/colorPrimary"/>
</shape>

   直接设置背景色。

 <TextView
        android:layout_width="50dp"
        android:text="丫X1"
        android:layout_marginTop="50dp"
        android:background="@drawable/shape_normal"
        android:layout_height="50dp" />


画虚线:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke android:width="5dp"
        android:color="@color/colorPrimary"
        android:dashWidth="10dp" ---> 虚线的线条宽度
        android:dashGap="5dp"/>  -->  虚线间隙宽度
</shape>

画出来的样式。

接下来是椭圆(oval 


<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke android:width="5dp"
        android:color="@color/colorPrimary"
        android:dashWidth="10dp"
        android:dashGap="5dp"/>
</shape>


默认情况下这里椭圆行的。目前因为ring(环形)是不能够使用那么我们要怎么再画圆形。这里就可以用过设置size是实现圆形,当size的width和height一样的时候就是圆形了。



这里只有一个环形,并不是。中间是没有颜色的,这里通过solid 给其填充颜色



有没有看去来很炫酷的样子。然后还有这样的 




装逼到此结束。是不是看起来很不错的呀。不过这个只是在shape里面写好了控件的大小在view中使用

  <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:background="@drawable/shape_normal"
        android:gravity="center" />

可以按照原样显示。但是 以最后一图的显示为例,如果我在控件中的大小不是shape中的一致。那么显示效果就完全变形了

比如这样

亦或者


所以在使用shape的时候尽量绘制比较规则的图形。或者就view的宽高和shape的一致。当然以上的效果都是添加了绘制虚线产生的图形。如果我们去掉 stroke 的 android:dashWidth="10dp    android:dashGap="5dp" 这两个属性。那就是一个带有边框的的原型或者椭圆形了。


当然你不断的修改stroke 的 android:width="5dp"当超过了 宽高的 1/2之后又会发小不少奇特的现象这里我就不一一介绍了。还是用一些常规的为好。



不好意思本人手贱。还是去改了一下。当 描边 大于 宽度的 1/2切远大于,小于宽度(大于宽度将不会显示任何效果)就会出现宇哥圆环和圆,切圆环的宽度几乎和内部圆的大小一样。究其原因。。。我也没有去深究了。我就是手贱了。如果你们想要的是这样的图形。那么久必须保证view的大小和size的宽高一样。否者就。。。不可描述了。

上面所讲的填充色都是纯色,但是有的时候我们所需要的是一个渐变的颜色。不是单一的纯色。这里就要使用到了gradient

比如说一个这样的


<gradient
        android:angle="270"    旋转角度,如果不设置这个颜色,android:startColor是从最左边开始的,钟表9点钟方向,然后次角度是逆时针旋转的
        android:centerColor="@color/colorAccent"   渐变色中间颜色
        android:centerX="0.5"   可以理解为渐变色的中心的相对位置 0.5 表示在中间,小于0.5表示偏向startColor。大于0.5就相反
        android:centerY="0.5"   这个值只有在centerX = 0.5的时候才有效,其效果和centerX一样
        android:endColor="@color/colorPrimary"  渐变色结束颜色
        android:gradientRadius="25dp"      这个值只有在android:type="radial"的时候才有效
        android:startColor="@android:color/white" 渐变色开始颜色
        android:type="linear" />    

  android:type有3中状态  

linear 线性变化,如上图 ;

radial 放射性变化,如下图:


sweep 字面意思扫描:



如果将上面的几个图稍微改一下他的渐变色相对位置:









有没有很神奇呀,然后还有很多神奇的地方自己慢慢探索去。


接下来给讲讲shape 的corners,圆角。对于圆形 和线条是没有圆角这么一个说法的。就只有对矩形有用:



当然这里只写了一个bottomLeftRadius 这表示左下角 圆角 角度10dp

bottomRightRadius  右下角圆角

topLeftRadius   左上角圆角

topRightRadius 右上角 圆角



当 四个角都有圆角 切圆角角度一样的时候可以直接使用 android:radius="10dp"  代替 这四个

当然这5种属性都可以同时出现,最终显示效果以 非 android:radius的为准,如果其他四种属性没有。就是按照android:radius的为准,例如:



如果既没有android:radius,也没有那四种中的一种,那么这个角将会是直角。就如从这往前数第二张图

圆角的大概差不多了。还剩下一种就是padding


设置了值,但是并没有看到什么效果呀。其实这个只有在真的用到了view上才会显示出效果。如下图,在没有设置padding的情况下有了paddingleft 和 paddingtop 的距离,这里就是在shape中设置的,显示效果


这里就出现了paddingleft  和top 的距离。


shape 的使用有没有很神奇呀

哎哟,写了这么多。中途还去开了一个会。上了一趟厕所。累死了。。。

shape 还可以结合selector 和layer-list等使用。然后会出现更多新奇的效果。这个将在后续给大家讲解。

我这个其实对那些大神级别的都是没有什么可用的地方。不过重在分享精神嘛,总有那么几个初学者不知道了。可以来观摩一下下。万有有点用呢。不是嘛。


哎。不写了。。。累。。。困。。。如有错别字。不准确的地方见谅。毕竟本人才开始写博客,有点紧张。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值