Android Button drawable消息样式 数字提示

153 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

效果图

在这里插入图片描述

shape : 首先在res/drawable文件夹下,新建一个文件,命名为:tv_red_dot.xml。剩下三个就不列举了;用的时候直接调用android:background="@drawable/tv_red_dot即可" shape 的参数有:android:shape="rectangle" , "oval" , "line" , "ring" 分别是 为矩形(rectangle)、椭圆形(oval)、线性形状(line)、环形(ring)

属性:

  • solid:实心,就是填充的意思
  • gradient:渐变
  • corners: 圆角
  • padding:间隔
  • stroke: 描边

提示样式一

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="false">
    <solid android:color="#f33d3d" />
    <size
        android:width="5dp"
        android:height="5dp" />
</shape>

提示样式二

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomRightRadius="300dp"
        android:topRightRadius="300dp"
        android:topLeftRadius="300dp"
        />
    <solid android:color="#f33d3d" />
    <size
        android:width="4dp"
        android:height="4dp" />
</shape>

提示样式三

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <gradient
        android:startColor="@color/purple_500"
        android:endColor="@color/purple_200"/>
    <size
        android:width="100dp"
        android:height="100dp"/>
</shape>

提示样式四

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

    <stroke
        android:width="1dp"
        android:color="@color/purple_200"/>
    <size
        android:width="100dp"
        android:height="100dp"/>
</shape>

顺便讲讲shape的属性详情

属性:solid、gradient、corner、size、padding、stroke

  • ==solid:== 用以指定内部填充色;只有一个属性:(实心,就是填充的意思)
<solid  android:color="color" />  
  • ==gradient==:用以定义渐变色,可以定义两色渐变和三色渐变,及渐变样式,它的属性有下面几个:

有三种渐变类型,分别是:linear(线性渐变)、radial(放射性渐变)、sweep(扫描式渐变)

1.linear(线性渐变)

在这里插入图片描述

代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:type="linear"
        android:startColor="@color/black"
        android:centerColor="@color/purple_500"
        android:endColor="@color/white"/>
</shape>

2.radial(放射性渐变)

在构造放射性渐变时,要加上android:gradientRadius属性(渐变半径),即必须指定渐变半径的大小才会起作用。在这里插入图片描述

代码:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:type="radial"
        android:startColor="@color/black"
        android:centerColor="@color/white"
        android:endColor="@color/purple_500"
        android:gradientRadius="100"/>
</shape>

3.sweep(扫描式渐变)

在这里插入图片描述

代码:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <gradient
        android:type="sweep"
        android:startColor="@color/black"
        android:centerColor="@color/purple_500"
        android:endColor="@color/white"/>
</shape>
  • ==corners== : 圆角:字义圆角的,其中radius与其它四个并不能共同使用 圆角属性:

在这里插入图片描述

  <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="@color/purple_200"/>
        <corners
            android:topLeftRadius="20dp"//左上角的圆角半径   
            android:topRightRadius="20dp" //右上角的圆角半径   
            android:bottomLeftRadius="20dp" //左下角的圆角半径   
            />
        <gradient android:centerColor="@color/white"
                android:startColor="@color/black"
                android:endColor="@color/purple_500"
                />
    </shape>
  • ==padding==:间隔:用来定义内部边距
<padding    
    android:left="dimension"   
    android:top="dimension"   
    android:right="dimension"   
    android:bottom="dimension" /> 
  • ==size==:是用来定义图形的大小的。
<size   
    android:width="dimension"   
    android:height="dimension" /> 

size和padding他们 两个很少用到

  • ==stroke==: 描边:可以定义描边的宽度,颜色,虚实线等 在这里插入图片描述
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <solid android:color="@color/purple_200"/>
    <stroke
        android:width="5dp" //描边的宽度  
        android:color="@color/teal_200" //描边的颜色   
        // 以下两个属性设置虚线   
        android:dashWidth="10dp"//虚线的宽度值为0时是实线   
        android:dashGap="10dp" />
</shape>
  • 阴影 在这里插入图片描述
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 边 -->
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#00CCCCCC" /><!--00CCCCCC-->
            <corners android:radius="8dp" />
            <size
                android:width="200dp"
                android:height="200dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#10CCCCCC" /><!--10CCCCCC-->
            <corners android:radius="8dp" />
            <size
                android:width="200dp"
                android:height="200dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#20CCCCCC" /><!--20CCCCCC-->
            <corners android:radius="8dp" />
            <size
                android:width="200dp"
                android:height="200dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#30CCCCCC" /><!--30CCCCCC-->
            <corners android:radius="8dp" />
            <size
                android:width="200dp"
                android:height="200dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <padding
                android:bottom="2dp"
                android:left="2dp"
                android:right="2dp"
                android:top="2dp" />
            <solid android:color="#50CCCCCC" /><!--50CCCCCC-->
            <corners android:radius="8dp" />
            <size
                android:width="200dp"
                android:height="200dp"/>
        </shape>
    </item>

    <!-- 中心背景 -->
    <item>
        <shape android:shape="rectangle"
            android:useLevel="false">
            <!-- 实心 -->
            <solid android:color="#ffffff" />
            <corners android:radius="10dp" />
            <padding android:left="10dp"
                android:right="10dp"
                android:top="10dp"
                android:bottom="10dp"/>
            <size
                android:width="200dp"
                android:height="200dp"/>
        </shape>
    </item>
</layer-list>

以上是一些drawable中shape的属性