Android 自定义样式之 shape

shape标签

1. 首先,先在res/drawable文件夹下新建button_shape xml文件,要在res目录下创建
在这里插入图片描述
在这里插入图片描述

2. shape的子标签(corners、gradient、padding、size、solid、stroke)

corners属性

<corners    //定义圆角  
    android:radius="dimension"      //全部的圆角半径  
    android:topLeftRadius="dimension"   //左上角的圆角半径  
    android:topRightRadius="dimension"  //右上角的圆角半径  
    android:bottomLeftRadius="dimension"    //左下角的圆角半径  
    android:bottomRightRadius="dimension" />    //右下角的圆角半径  

corners是用来定义圆角的,但是radius与其他四个角的属性不能同时使用

那定义完圆角后要怎么使用呢?
是要使用android:background属性即可,然后将drawable下的button_shape.xml设置为控件的背景

   <Button
        android:id="@+id/btn_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableTop="@drawable/right"
        android:background="@drawable/button_shape"
        android:text="aaa"
        />

效果图如下,这里我设置了左上角和右上角的圆角半径为20dp:
在这里插入图片描述
在这里你不难看出,刚刚我们设置的corners 标签只是设置了圆角,并没有设置颜色,那怎么黑色边框是怎么出现的呢?接下来需要使用到另外一个属性标签了,stroke标签

stroke属性

stroke是一个描边属性,可以定义描边的宽度,颜色,虚实线等

<stroke        
    android:width="dimension"   //描边的宽度   
    android:color="color"   //描边的颜色   
    // 以下两个属性设置虚线   
    android:dashWidth="dimension"   //虚线的宽度,可理解为一根根虚线的长度,值为0时是实线 
    android:dashGap="dimension" />      //虚线的间隔  

solid属性

solid属性可以为内部填充指定颜色,它只有一个属性

<solid  android:color="color" />  

gradient属性

gradient属性用于设置渐变色,可以设置两种、三种颜色渐变以及渐变样式,属性如下

<gradient  
    android:type=["linear" | "radial" | "sweep"]    //共有3中渐变类型,线性渐变(默认)/放射渐变/扫描式渐变   
    android:angle="integer"     //渐变角度,必须为45的倍数,0为从左到右,90为从上到下   
    android:centerX="float"     //渐变中心X的相当位置,范围为0~1   
    android:centerY="float"     //渐变中心Y的相当位置,范围为0~1   
    android:startColor="color"   //渐变开始点的颜色   
    android:centerColor="color"  //渐变中间点的颜色,在开始与结束点之间   
    android:endColor="color"    //渐变结束点的颜色   
    android:gradientRadius="float"  //渐变的半径,只有当渐变类型为radial时才能使用   
    android:useLevel=["true" | "false"] />  //使用LevelListDrawable时就要设置为true。设为false时才有渐变效果   

1.注意:当使用放射性渐变时(radial),必须使用android:gradientRadius=“float” 属性才能正常显示
2.android:angle属性(仅对线性渐变有效),并且输入的值必须为45的倍数,默认是90(垂直)
3.android:centerX与android:centerY,当使用扫描式渐变时才能生效,在线性渐变也能改变颜色位置,这两个属性是用来设置渐变中心点的位置的,值为0.0~1。
4.android:useLevel,useLevel属性通常不使用。该属性用于指定是否将该shape当成一个LevelListDrawable来使用,默认值为false。

设置效果如下:
在这里插入图片描述

padding和size属性

这两个基本上不怎么用,因为他们所具有的功能,控件本身也能实现。 size:是用来定义图形的大小的。

3. 上面是shape的全部子标签,shape自身的一些属性

shape属性(rectangle、oval、line、ring)

android:shape=["rectangle" | "oval" | "line" | "ring"]   
shape的形状,默认为矩形,可以设置为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring)   
下面的属性只有在android:shape="ring时可用:   
android:innerRadius         尺寸,内环的半径。   
android:innerRadiusRatio    浮点型,以环的宽度比率来表示内环的半径,   
android:thickness           尺寸,环的厚度   
android:thicknessRatio      浮点型,以环的宽度比率来表示环的厚度,例如,如果android:thicknessRatio="2",   
android:useLevel            boolean值,如果当做是LevelListDrawable使用时值为true,否则为false.  

shape在设置样式的时候,有4种样式可以选择,分别是矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring) ,但是除了环形(ring),其他就只有这个shape属性

矩形(rectangle)

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

    <solid android:color="#81cbea"/>

</shape>

效果图:
在这里插入图片描述

椭圆形(oval)
注意:当使用oval样式时,corners(圆角)子标签就不能使用了

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    
    <solid android:color="#81cbea"/>

</shape>

效果图如下:
在这里插入图片描述

线性形状(line)

貌似没啥用处

环形(ring)
注意:使用ring属性时,必须使用 android:useLevel="false"属性才能正常显示环形样式

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadius="20dp"
    android:thickness="50dp"
    android:useLevel="false"
    >
    <solid android:color="#000"/>
</shape>

效果图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_41545435/article/details/84838512
今日推荐