Android开发中如何让按钮拉伸时保持侧边形状不变？

我们在布局文件app/res/layout/activity_main.xml中定义了如下按钮：

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="50dp"
    android:background="@drawable/test"
    android:text="ok" />

其中@drawable/test是一个SVG矢量图，按钮原始形状如下：

当按钮文本为较长内容（如android:text="sadfsdafsadfsadfsadfsdfsdafsdf"）时，按钮形状会被整体拉伸变形，效果如下：

希望实现的效果是：按钮水平拉伸时仅中间部分被拉伸，侧边形状保持不变，预期效果如下：

已知9-patch文件可实现类似效果，但仅适用于位图，请问针对矢量图文件，如何实现拉伸时保持按钮侧边形状不变？

针对矢量图实现“仅中间拉伸、侧边固定”的效果，有三种实用方案：

方案1：用Android Studio的Vector Asset Studio添加切片规则 #

这是最省心的可视化操作方式：

1. 右键点击res/drawable目录 → New → Vector Asset，导入你的SVG文件
2. 在Vector Asset Studio界面，点击Edit进入矢量图编辑器
3. 选中按钮左右两侧的固定形状，点击顶部工具栏的Slice按钮，选择Fixed（标记为固定尺寸，不参与拉伸）
4. 选中中间需要拉伸的区域，点击Slice按钮，选择Stretch（标记为可拉伸区域）
5. 保存修改后，生成的矢量图会自动遵循切片规则，作为按钮背景时，就只会拉伸标记为Stretch的部分

方案2：手动拆分矢量图路径 #

如果习惯手动编辑代码，可以把SVG拆成左、中、右三个独立路径：

1. 打开矢量图对应的XML文件（res/drawable/test.xml）
2. 将原有的单个path拆分为三个独立路径：
   • 左侧固定形状：定义固定的路径和尺寸，不设置拉伸属性
   • 中间拉伸区域：用矩形路径，设置自适应宽度，确保颜色与侧边一致
   • 右侧固定形状：与左侧对称，保持固定尺寸
3. 用group标签组合三个路径，确保中间路径在水平方向可自适应拉伸

示例代码参考：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="wrap_content"
    android:height="50dp"
    android:viewportWidth="200"
    android:viewportHeight="50">

    <!-- 左侧固定形状 -->
    <path
        android:pathData="M0,0 L20,0 L25,5 L25,45 L20,50 L0,50 Z"
        android:fillColor="#your_button_color"/>

    <!-- 中间拉伸区域 -->
    <path
        android:pathData="M25,0 L175,0 L175,50 L25,50 Z"
        android:fillColor="#your_button_color"/>

    <!-- 右侧固定形状 -->
    <path
        android:pathData="M175,0 L190,0 L200,5 L200,45 L190,50 L175,50 Z"
        android:fillColor="#your_button_color"/>
</vector>

这样设置后，按钮宽度变化时，只有中间的矩形路径会被拉伸，左右两侧的固定形状保持原样。

方案3：用layer-list组合固定与拉伸元素 #

如果侧边形状和中间区域可以分离，也可以用layer-list来实现：

1. 把按钮左右两侧的固定形状分别做成独立的矢量图（button_left.xml和button_right.xml）
2. 中间用shape定义一个可拉伸的矩形，颜色与侧边一致
3. 在layer-list中按左、中、右的顺序排列，中间矩形通过left和right属性预留出侧边的位置，自动填充剩余宽度

示例代码：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 左侧固定形状 -->
    <item android:drawable="@drawable/button_left" />
    <!-- 中间拉伸区域：左右预留20dp给侧边 -->
    <item android:left="20dp" android:right="20dp">
        <shape android:shape="rectangle">
            <solid android:color="#your_button_color"/>
        </shape>
    </item>
    <!-- 右侧固定形状 -->
    <item android:drawable="@drawable/button_right" />
</layer-list>

将这个layer-list文件设置为按钮的android:background，即可实现侧边固定、中间拉伸的效果。

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