如何在android中使用xml drawable创建半圆形填充形状？

Posted 2023-04-14

【中文标题】如何在android中使用xml drawable创建半圆形填充形状？

【英文标题】：How to create half circle filled shape using xml drawable in android?

【发布时间】：2019-07-28 23:05:43

【问题描述】：

我想使用 xml drawble 创建一个半实心圆形？

点赞

这是我迄今为止尝试过的努力

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FCD83500"/>
    <size
        android:
        android:/>
    <corners
        android:bottomLeftRadius="50dp"
        android:bottomRightRadius="50dp"/>
</shape>

使用上面的代码我可以创建半圆，但我不知道如何使半圆透明

我也访问过一些 SO 帖子，但找不到任何解决方案

Half circle shape not work how to draw a half circle in android How to define a circle shape in an Android xml drawable file?

如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。

【问题讨论】：

有必要使用xml drawable吗？否则，您也可以使用矢量图形。

@BalvinderSingh 随时使用vector graphics发布解决方案

【参考方案1】：

我已经从 Vector Graphics 创建了代码：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:
    android:
    android:viewportWidth="314.015"
    android:viewportHeight="314.015">
    <path
        android:fillColor="#FCD83500"
        android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
</vector>

输出将是：

现在如果你想按照你的角度显示：

你可以如下使用：

android:rotation="90"

在你的ImageView

TextView Drawable 的更新：

创建旋转drawable的自定义方法。

private Drawable rotate(Drawable drawable, int degree) 
    Bitmap iconBitmap = ((BitmapDrawable) drawable).getBitmap();

    Matrix matrix = new Matrix();
    matrix.postRotate(degree);
    Bitmap targetBitmap = Bitmap.createBitmap(iconBitmap, 0, 0, iconBitmap.getWidth(), iconBitmap.getHeight(), matrix, true);

    return new BitmapDrawable(getResources(), targetBitmap);

如下使用：

Drawable result = rotate(ContextCompat.getDrawable(mContext, R.drawable.ic_round), 90);
yourTextView.setCompoundDrawablesWithIntrinsicBounds(result, null, null, null);

注意：如果您能找到所需的 SVG 图像，那么您现在必须 做上面的代码。我试图找到图像但没有找到所以旋转 这里需要代码。

希望对你有帮助。

谢谢。

【讨论】：

这是个好主意，但我想在TextView 中使用它作为android:drawableEnd，所以我不能使用android:rotation="90"

@Goku 像上面那样试试。

嘿，感谢您抽出宝贵的时间，我已经找到了如何旋转 vector 检查我下面的答案 +1 以获得您的帮助

这里我发了question，得到了answer。

谢谢你我已经检查了你的问题，意思是你可以更新你的答案，谢谢你的帮助我会接受你的答案

【参考方案2】：

更新

使用这个

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="90">
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:
        android:
        android:viewportWidth="314.015"
        android:viewportHeight="314.015">
        <path
            android:fillColor="#FCD83500"
            android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />
    </vector>
</rotate>

输出

最后我得到了使用layer-list 的解决方案来实现这一目标

LayerDrawable 是一个 drawable 对象，用于管理其他 drawables 的数组。列表中的每个 drawable 都按列表的顺序绘制 - 列表中的最后一个 drawable 绘制在顶部。

我的代码

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="26px"
        android:right="26px">

        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="oval"
            android:useLevel="false">
            <solid android:color="#00006AC5" />
            <size
                android:
                android: />
            <stroke
                android:
                android:color="#00BCD4" />
        </shape>

    </item>

    <item
        android:
        android:
        android:end="2dp"
        android:gravity="center"
        android:start="2dp"
        android:top="22dp">

        <shape xmlns:android="http://schemas.android.com/apk/res/android"
            android:shape="rectangle">
            <solid android:color="#00BCD4" />
            <size
                android:
                android: />
            <corners
                android:bottomLeftRadius="50dp"
                android:bottomRightRadius="50dp" />
        </shape>

    </item>

</layer-list>

输出

注意：如果您有任何其他解决方案，请随时发布答案

【讨论】：

警告：Attribute end is only used in API level 23 and higher (current min is 16)

我想你会得到错误：Element vector is not allowed here

【参考方案3】：

试试这个：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke
                android:color="#FCD83500"
                android:/>
            <size
                android:
                android:/>
            <corners
                android:radius="50dp"/>
        </shape>
    </item>
    <item android:top="10dp">
        <shape android:shape="rectangle">
            <solid android:color="#FCD83500"/>
            <size
                android:
                android:/>
            <corners
                android:bottomLeftRadius="50dp"
                android:bottomRightRadius="50dp"/>
        </shape>
    </item>
</layer-list>

【讨论】：

谢谢，但您的代码不起作用，请检查output using your code

@悟空你在真机上检查过吗？

【参考方案4】：

使用此代码制作半圆矢量图像。如果要旋转矢量图像，则意味着使用带有旋转元素的组标签。参考这个link

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:
android:

android:viewportWidth="314.015"
android:viewportHeight="314.015">
<group
    android:translateX="314.015"
    android:rotation="90">
<path
    android:fillColor="#FCD83500"
    android:pathData="M157.007,0C70.291,0 0,70.289 0,157.007c0,86.712 70.29,157.007 157.007,157.007c86.709,0 157.007,-70.295 157.007,-157.007C314.014,70.289 243.716,0 157.007,0zM31.403,157.015c0,-69.373 56.228,-125.613 125.604,-125.613V282.62C87.631,282.62 31.403,226.38 31.403,157.015z" />

</group>
</vector>