ToB企服应用市场:ToB评测及商务社交产业平台

标题: Android使用shape属性绘制边框内渐变色 [打印本页]
作者: 小秦哥    时间: 2024-8-8 20:51
标题: Android使用shape属性绘制边框内渐变色
先上效果图

这是使用AndroidStudio绘制的带有渐变色的边框背景致

实现方法

项目中由于UI设计需求，必要给按钮、控件设置带有背景致效果的。以下是UI效果图。

这里我们使用shape属性来绘制背景效果。
shape属性介绍

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <shape
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:shape=["rectangle" | "oval" | "line" | "ring"] > // 定义形状
  5.     <corners //圆角属性
  6.         android:radius="integer"
  7.         android:topLeftRadius="integer"
  8.         android:topRightRadius="integer"
  9.         android:bottomLeftRadius="integer"
  10.         android:bottomRightRadius="integer" />
  11.     <gradient //渐变属性
  12.         android:angle="integer"
  13.         android:centerX="integer"
  14.         android:centerY="integer"
  15.         android:centerColor="integer"
  16.         android:endColor="color"
  17.         android:gradientRadius="integer"
  18.         android:startColor="color"
  19.         android:type=["linear" | "radial" | "sweep"]
  20.         android:useLevel=["true" | "false"] />
  21.     <padding //边距属性
  22.         android:left="integer"
  23.         android:top="integer"
  24.         android:right="integer"
  25.         android:bottom="integer" />
  26.     <size //大小属性
  27.         android:width="integer"
  28.         android:height="integer" />
  29.     <solid //填充属性
  30.         android:color="color" />
  31.     <stroke //描边属性
  32.         android:width="integer"
  33.         android:color="color"
  34.         android:dashWidth="integer"
  35.         android:dashGap="integer" />
  36. </shape>
复制代码
Shape可以定义控件的一些展示效果，比方圆角，渐变，添补，描边，大小，边距；shape子标签就可以实现这些效果，shape子标签有下面几个属性：
corners，
gradient，
padding，
size，
solid，
stroke：
corners（圆角）
代码

layer-list 是用来创建 图层列表的，通过它能创建出一些特殊的 drawable
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3.     <!--顶部的渐变色-->
  4.     <item
  5.         android:gravity="top">
  6.         <shape
  7.             xmlns:android="http://schemas.android.com/apk/res/android"
  8.             android:shape="rectangle">
  9.             <gradient
  10.                 android:type="linear"
  11.                 android:angle="90"
  12.                 android:startColor="#0077b3c7"
  13.                 android:endColor="#9077b3c7"
  14.                 android:useLevel="false"/>
  16.             <size
  17.                 android:width="100dp"
  18.                 android:height="10dp" />
  19.         </shape>
  20.     </item>
  22.     <!--左侧的渐变色-->
  23.     <item
  24.         android:gravity="left">
  25.         <shape
  26.             xmlns:android="http://schemas.android.com/apk/res/android"
  27.             android:shape="rectangle">
  28.             <gradient
  29.                 android:type="linear"
  30.                 android:angle="0"
  31.                 android:startColor="#9077b3c7"
  32.                 android:endColor="#0077b3c7"
  33.                 android:useLevel="false"/>
  34.             <size
  35.                 android:width="10dp"
  36.                 android:height="100dp" />
  37.         </shape>
  38.     </item>
  40.     <!--右侧的渐变色-->
  41.     <item
  42.         android:gravity="right">
  43.         <shape
  44.             xmlns:android="http://schemas.android.com/apk/res/android">
  45.             <gradient
  46.                 android:type="linear"
  47.                 android:angle="180"
  48.                 android:startColor="#9077b3c7"
  49.                 android:endColor="#0077b3c7"
  50.                 android:useLevel="false"/>
  52.             <size
  53.                 android:width="10dp"
  54.                 android:height="100dp"/>
  55.         </shape>
  56.     </item>
  58.     <!--底部的渐变色-->
  59.     <item
  60.         android:gravity="bottom">
  61.         <shape
  62.             xmlns:android="http://schemas.android.com/apk/res/android">
  63.             <gradient
  64.                 android:type="linear"
  65.                 android:angle="90"
  66.                 android:centerX="0"
  67.                 android:centerY="0"
  68.                 android:startColor="#9077b3c7"
  69.                 android:endColor="#0077b3c7"
  70.                 android:useLevel="false"/>
  72.             <size
  73.                 android:width="100dp"
  74.                 android:height="10dp" />
  75.         </shape>
  76.     </item>
  78.     <!--边框线-->
  79.     <item>
  80.         <shape
  81.             xmlns:android="http://schemas.android.com/apk/res/android"
  82.             android:shape="rectangle">
  83.             <stroke
  84.                 android:width="1dp"
  85.                 android:color="@color/button_text_color"/>
  86.         </shape>
  87.     </item>
  88. </layer-list>
复制代码
绘制完毕后，直接到代码中引用即可
效果



免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4