Android常用shape指南

最新推荐文章于 2025-08-14 13:53:44 发布

石博

最新推荐文章于 2025-08-14 13:53:44 发布

阅读量254

点赞数

分类专栏： Android

Android 专栏收录该内容

284 篇文章

订阅专栏

本文详细介绍了Android中Shape属性的使用方法，包括填充颜色、间隔、大小、圆角、描边及渐变等特性，并提供了多种形状的示例代码，如圆形背景、圆角矩形、环形等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：http://www.jianshu.com/p/aa6c9b377cb0

shape属性总结

填充

<solid
      android:color="@android:color/white"/><!-- 填充的颜色 -->

间隔：设置四个方向上的间隔

<!-- 间隔 -->
  <padding
      android:left="2dp"
      android:top="2dp"
      android:right="2dp"
      android:bottom="2dp"/><!-- 各方向的间隔 -->

大小

<!-- 大小 -->
  <size
      android:width="50dp"
      android:height="50dp"/><!-- 宽度和高度 -->

圆角：同时设置五个属性，则Radius属性无效

android:Radius="20dp"                           <!-- 设置四个角的半径-->
android:topLeftRadius="20dp"              <!-- 设置左上角的半径 -->
android:topRightRadius="20dp"           <!-- 设置右上角的半径 -->
android:bottomLeftRadius="20dp"      <!-- 设置右下角的半径 -->
android:bottomRightRadius="20dp"    <!-- 设置左下角的半径-->

描边：dashWidth和dashGap属性，只要其中一个设置为0dp，则边框为实现边框

android:width="20dp"                     <!-- 设置边边的宽度 -->
android:color="@android:color/black"  <!-- 设置边边的颜色 -->
android:dashWidth="2dp"                      <!-- 设置虚线的宽度 -->
android:dashGap="20dp"                      <!-- 设置虚线的间隔宽度-->

渐变：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时才有渐变效果

实例(后续会不断更新)

实例

圆形背景

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <size
      android:width="@dimen/shape_height"
      android:height="@dimen/shape_height" />
  <solid android:color="@color/colorAccent" />
</shape>

圆角矩形

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <corners android:radius="8dp" />
  <size
      android:width="@dimen/shape_width"
      android:height="@dimen/shape_height" />
  <solid android:color="@color/colorAccent" />
</shape>

圆柱

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="@color/colorAccent" />
  <size
      android:width="@dimen/shape_width"
      android:height="@dimen/shape_height" />
  <corners android:radius="40dp" />
</shape>

环形

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <size
      android:width="@dimen/shape_height"
      android:height="@dimen/shape_height" />
  <stroke
      android:width="10dp"
      android:color="@color/colorAccent" />
</shape>

矩形边框

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

  <size
      android:width="@dimen/shape_height"
      android:height="@dimen/shape_height" />
  <stroke
      android:width="10dp"
      android:color="@color/colorAccent" />
</shape>

线性渐变

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
      android:endColor="#ff4081"
      android:startColor="#00ff4081"
      android:type="linear" />
</shape>

放射渐变（亲测在5.0设备以下无效果）

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
      android:endColor="#ff4081"
      android:startColor="#00ff4081"
      android:type="linear" />
</shape>

渐变（三色）

<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <gradient
      android:centerColor="#00ff00"
      android:endColor="#0000ff"
      android:startColor="#ff0000"
      android:type="linear" />
</shape>

扫描渐变

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <gradient
      android:centerColor="#00ff00"
      android:endColor="#0000ff"
      android:startColor="#ff0000"
      android:type="sweep" />
</shape>

发光边框

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
      <shape>
          <stroke
              android:width="4dp"
              android:color="#0C00F9" />
          <corners android:radius="2dp" />
      </shape>
  </item>
  <item
      android:bottom="4dp"
      android:left="4dp"
      android:right="4dp"
      android:top="4dp">
      <shape>
          <stroke
              android:width="4dp"
              android:color="#FFF" />
          <corners android:radius="2dp" />
      </shape>
  </item>
  <item
      android:bottom="6dp"
      android:left="6dp"
      android:right="6dp"
      android:top="6dp">
      <shape>
          <stroke
              android:width="3dp"
              android:color="#0C00F9" />
          <corners android:radius="2dp" />
      </shape>
  </item>
</layer-list>