如何创建自定义的环形可绘制android [英] How To Create A Custom Ring shaped drawable android

问题描述

如何实现这样的曲线:

推荐答案

最简单的解决方案是使用VectorDrawable.创建一个新的可绘制对象

The easiest solution would be to use a VectorDrawable. Create a new drawable

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>

然后将其添加为所需视图的背景

And then add it as the background for the required view

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/custom_ring" />

VectorDrawables的详细信息

VectorDrawables很容易理解，并且有可能在Android Studio本身中创建简单的形状.对于更复杂的形状，您必须借助其他工具来生成SVG文件，然后可以在AS中将其转换为VectorDrawables.

Details on VectorDrawables

VectorDrawables are easy enough to understand and it is possible to get simple shapes created within Android Studio itself. For more complex shapes you'd have to resort to other tools to generate SVG files which can later be converted to VectorDrawables in AS.

有关详细信息，请参阅此帖子了解如何使用VectorDrawables.

For details refer to this post to get an idea on how to work with VectorDrawables.

我将尝试对我使用的custom_ring.xml文件逐行进行解释.据我所知，这是正确的，尽管我愿意提出建议和更正.

I'll try to give a line by line explanation for the custom_ring.xml file I have used. It is correct to the best of my knowledge though I am open to suggestions and corrections.

高度和宽度

矢量可绘制对象对结垢免疫.唯一的条件是需要保持宽高比(我在这里可能是错误的).

Vector drawables are immune to scaling as far as I have observed. The only condition is that the aspect ratio needs to be maintained (I could be wrong here).

当我第一次熟悉绘画时，我曾经想知道为什么高度和宽度是必填字段.我曾经将值更改为不同的值，但从未在预览中观察到任何更改.我花了比真正必要更长的时间来认识到，需要此值才能为包含它的视图提供正确的尺寸.例如，如果您有一个ImageView并将其高度和宽度设置为wrap_content，则ImageView将假定其高度和宽度分别等于在Vector height和width属性中设置的值.

When familiarising myself with drawables for the first time, I used to wonder why height and width were required fields. I used to change the values to different values and never observed any change in the preview. It took me longer than truly necessary to realise that this value is required to give the correct dimensions to the view which contains it. For example, if you have an ImageView and set its height and width to wrap_content the ImageView will assume a height and width equal to the value set in the Vector height and width property respectively.

视口高度和宽度

我无法比这张图片更好地解释

I cannot explain better than this image

按照我在帖子中设置的视口，可以进行实际绘制(几乎就像您使用

Setting the viewport as I have in the post makes it possible to actually draw (almost like you'd do with Logo) on a coordinate plane with it's coordinates ranging from (0,0) in the top left corner to (700,700) at the bottom right.

路径

笔划宽度:指定轮廓的宽度.

填充颜色:用颜色填充路径数据中第一个点和最后一个点之间的区域.

Fill color: Fills the area between the first and last point in the path data with color.

路径数据:可能是最重要的元素，了解得最少.请阅读我上面链接的帖子.它给出了很好的解释.

Path data: Probably the most important element and least understood. Please read the post I had linked above. It gives a pretty good explanation.

M0,0(移动指令)将光标移动到坐标0,0，而无需绘制.

M0,0 (Moveto instruction) moves the cursor to the coordinate 0,0 without drawing.

Q350,150,700,0从当前光标位置创建一个二次曲线 (我们由(M0,0)得到)到(700,0)，这是Q指令的最后两个参数. Q指令的前两个参数(350,150)决定了曲线的形状和大小.例如，

Q350,150,700,0 creates a quadratic curve from the current cursor location (which we got by (M0,0)) to (700,0) which is the last 2 parameters of the Q instruction. The first 2 parameters of the Q instruction (350,150) dictate the shape and size of the curve. For example,

<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

would render the curve like this. Notice the change caused by changing Q350,700,700,0 to Q50,750,700,0

更改第二个参数将定义曲线的振幅.

Changing the 2nd parameter will define the amplitude of the curve.

<path
    android:pathData="M0,0Q350,350,700,0"
    android:strokeColor="#FF0000"
    android:strokeWidth="10"/>

将给出

L350,350(Lineto指令)将从当前光标位置到坐标(350,350)画一条线

L350,350 (Lineto instruction) would draw a line from the current cursor position to the coordinates (350,350)

<path
    android:pathData="M0,0L350,350"
    android:strokeColor="#FF0000"
    android:strokeWidth="10"/>

将绘制下面的线

这就是您需要弄清楚如何为问题中的曲线编写路径数据的所有信息.

That's about all the info you need to figure out how I've written the path data for the curve in the question.

这篇关于如何创建自定义的环形可绘制android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！