像素化边框作为 android 样式 xml答案

【问题标题】：Pixelated border as an android style xml像素化边框作为 android 样式 xml
【发布时间】：2022-01-26 22:41:18
【问题描述】：

我正在尝试为我的 android 布局中的按钮创建主题/样式。我想创建一个角是弯曲的但也是像素化的样式（以适应我的应用程序的主题），但也通过将文本保持在其边框内来尊重内部的文本。

我能够在 javascript/css 中创建这种类型的像素化边框。

.pixelated {
    position: relative;
    display: inline-block;
    padding: 1rem 1.25rem;
    border-radius: 20px;
    border-style: solid;
    border-width: 4px;
    border-color: black;
    border-image-slice: 4;
    border-image-width: 2;
    border-image-outset: 0;
    border-image-source: url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2712%27%20height%3D%2712%27%3E%0A%20%20%3Cpath%20d%3D%27M2%202h2v2H2zM4%200h2v2H4zM10%204h2v2h-2zM0%204h2v2H0zM6%200h2v2H6zM8%202h2v2H8zM8%208h2v2H8zM6%2010h2v2H6zM0%206h2v2H0zM10%206h2v2h-2zM4%2010h2v2H4zM2%208h2v2H2z%27%20fill%3D%27%23000%27%20%2F%3E%0A%3C%2Fsvg%3E');
    // The SVG:
    // <svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'>
    //   <path d='M2 2h2v2H2zM4 0h2v2H4zM10 4h2v2h-2zM0 4h2v2H0zM6 0h2v2H6zM8 2h2v2H8zM8 8h2v2H8zM6 10h2v2H6zM0 6h2v2H0zM10 6h2v2h-2zM4 10h2v2H4zM2 8h2v2H2z' fill='#000' />
    // </svg>
}

<div class="pixelated">A Button</div>
<div class="pixelated">A Longer Button</div>
<div class="pixelated">An Even Longer Button</div>

我想知道是否可以将类似于此 javascript/css 的内容重新创建为 xml 样式/主题以用于 android 布局。如果不能将其重新创建为 android 样式，是否可以使用 java 以编程方式制作？

谢谢！

【问题讨论】：

不确定如何使用 xml 创建它，但也许您可以将这种类型的边框创建为 svg，然后将其用作按钮的边框
@a_local_nobody 中的 css 边框图像源只是一个小 svg，这就是我在它下面评论的原因。我将如何使用它？借助 Android Studio，我可以将 svg 转换为 Vector 资源，但是如何将其用作边框？

标签： android xml android-layout svg

【解决方案1】：

Android 有类似的 CSS 边框。

他们被称为NinePatch images。

你应该能够很容易地转换它们。

【讨论】：

非常感谢。我不知道 NinePatch 图像存在。我能够使用它们来实现类似的按钮样式。