如何实现这样的曲线:
最佳答案
最简单的解决方案是使用 VectorDrawable 。创建一个新的可绘制对象
custom_ring.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportHeight="700"
android:viewportWidth="700">
<path
android:pathData="M0,0Q350,150,700,0L700,200Q400,300,0,200"
android:strokeColor="@color/colorPrimary"
android:strokeWidth="1"
android:fillColor="@color/colorYellow"/>
</vector>
然后将其添加为所需 View 的背景
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/custom_ring" />
VectorDrawable 的详细信息
VectorDrawables 很容易理解，并且可以在 Android Studio 本身中创建简单的形状。对于更复杂的形状，您必须求助于其他工具来生成 SVG 文件，这些文件稍后可以在 AS 中转换为 VectorDrawables。
有关详细信息，请参阅此 post 以了解如何使用 VectorDrawables。
我将尝试为我使用的 custom_ring.xml 文件逐行解释。尽管我愿意接受建议和更正，但据我所知，这是正确的。
高度和宽度
就我所观察到的，矢量可绘制对象不受缩放影响。唯一的条件是需要保持纵横比(我在这里可能是错的)。
当我第一次熟悉 drawable 时，我曾经想知道为什么高度和宽度是必填字段。我曾经将值更改为不同的值，但从未在预览中观察到任何变化。我花了比真正需要的时间更长的时间才意识到需要这个值来为包含它的 View 提供正确的尺寸。例如，如果您有一个
ImageView 并将其高度和宽度设置为 wrap_content，那么 ImageView 将假定高度和宽度分别等于矢量高度和宽度属性中设置的值。视口(viewport)高度和宽度
我无法解释比这张图片更好的
像我在帖子中那样设置视口(viewport)可以在坐标平面上实际绘制(几乎就像你对 Logo 所做的那样)，它的坐标范围从左上角的 (0,0) 到 (700,700) 在右下角。
路径
描边宽度:指定轮廓的宽度。
填充颜色:用颜色填充路径数据中第一个和最后一个点之间的区域。
路径数据:可能是最重要但最不为人所知的元素。请阅读我在上面链接的帖子。它给出了一个很好的解释。
M0,0(Moveto 指令)将光标移动到坐标 0,0 处，无需绘制。Q350,150,700,0 创建一个从当前光标位置(我们通过 (M0,0) 获得)到 (700,0) 的 quadratic curve，这是 Q 指令的最后 2 个参数。 Q 指令的前 2 个参数 (350,150) 指示曲线的形状和大小。例如，<path
android:pathData="M0,0Q350,750,700,0"
android:strokeColor="#FF0000"
android:strokeWidth="10"/>
会产生这条曲线
尽管
<path
android:pathData="M0,0Q50,750,700,0"
android:strokeColor="#FF0000"
android:strokeWidth="10"/>
会像这样渲染曲线。注意将 Q 350 ,700,700,0 更改为 Q 50 ,750,700,0 引起的变化
更改第二个参数将定义曲线的幅度。
<path
android:pathData="M0,0Q350,350,700,0"
android:strokeColor="#FF0000"
android:strokeWidth="10"/>
会给
L350,350(Lineto 指令)将从当前光标位置画一条线到坐标 (350,350)<path
android:pathData="M0,0L350,350"
android:strokeColor="#FF0000"
android:strokeWidth="10"/>
将绘制下面的线
这就是弄清楚我如何为问题中的曲线编写路径数据所需的所有信息。