如何在XML中重现左、上、右边界切平的渐变圆形Drawable背景？

嘿，我完全懂你要做的效果——一个超大的渐变圆形，顶部、左右两侧呈现方正的切平样式，只保留底部弧形对吧？这种用XML Drawable就能轻松实现，比Bitmap高效多了，还能完美适配所有屏幕。

核心思路 #

原理其实很简单：用一个足够大的圆形（oval形状），通过负margin让它的顶部、左右两侧超出父容器范围，容器里显示的部分就刚好是底部弧形，顶部和左右则被容器边缘截断成平边，完全符合你的需求。

完整实现代码 #

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 超大渐变圆形，通过负margin隐藏顶部和左右超出部分 -->
    <item
        android:left="-100dp"
        android:right="-100dp"
        android:top="-200dp">
        <shape android:shape="oval">
            <!-- 自定义渐变颜色和方向，这里是从上到下的粉紫渐变 -->
            <gradient
                android:startColor="#FF4081"
                android:endColor="#3F51B5"
                android:angle="90"/>
        </shape>
    </item>
</layer-list>

代码细节解释 #

• 负margin的作用：left和right设为-100dp，让圆形左右方向远超容器，容器左右边缘看到的圆形局部几乎是直线，呈现切平效果；top设为-200dp，让圆形顶部远远超出容器，只露出底部弧形部分。
• 渐变方向调整：android:angle控制渐变方向，90是从上到下，0是从左到右，180是从右到左，270是从下到上，你可以根据需求修改。
• 固定高度适配：如果需要背景有固定高度（比如你之前尝试的20dp），可以给oval添加size属性，同时调整top的负margin值：

  <item
      android:left="-100dp"
      android:right="-100dp"
      android:top="-80dp"> <!-- 计算公式：圆形半径 - 背景高度，比如圆形直径200dp（半径100dp），背景高度20dp，就是100-20=80 -->
      <shape android:shape="oval">
          <gradient
              android:startColor="#FF4081"
              android:endColor="#3F51B5"
              android:angle="90"/>
          <size android:height="200dp"/> <!-- 设置圆形的直径 -->
      </shape>
  </item>
  

这种方式是纯矢量Drawable，不会出现拉伸模糊的问题，性能比Bitmap背景好很多，直接用在任何View的android:background属性里就行。

内容的提问来源于stack exchange，提问作者Max