如何在 Android XML 可绘制文件中定义圆形？答案

【问题标题】：How to define a circle shape in an Android XML drawable file?如何在 Android XML 可绘制文件中定义圆形？
【发布时间】：2011-03-12 05:40:33
【问题描述】：

我在查找 Android 的 XML 中形状定义的文档时遇到了一些问题。我想在 XML 文件中定义一个用纯色填充的简单圆圈，以将其包含到我的布局文件中。

遗憾的是，android.com 上的文档并未涵盖 Shape 类的 XML 属性。我想我应该使用ArcShape 来画一个圆，但没有说明如何设置大小、颜色或从圆弧中制作圆所需的角度。

【问题讨论】：

在这里您可以了解如何创建可绘制的形状：developer.android.com/guide/topics/resources/…
可以从这里developer.android.com/samples/WearSpeakerSample/res/drawable/…获取圈子xml
Android Dev 文档从那时起得到了改进。现在它涵盖了 android:shape 元素 - Drawable resources。

标签： android android-drawable shapes

【解决方案1】：

这是一个简单的圆形作为 Android 中的可绘制对象。

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

   <solid 
       android:color="#666666"/>

   <size 
       android:width="120dp"
        android:height="120dp"/>
</shape>

【讨论】：

以及如何动态改变颜色？
@AnkitGarg 您可以从 Java 代码应用颜色过滤器（参见 Drawable 类）
我试过dp，它被扭曲成椭圆形。对我来说，使用pt 来修复它。
如果您稍后为视图定义正方形大小，则不需要 shape 中的 size。
它的形状是椭圆形而不是圆形。谁能确认一下？？

【解决方案2】：

将此设置为您的视图背景

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="#78d9ff"/>
</shape>

对于实心圆使用：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#48b3ff"/>
</shape>

实心笔画：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#199fff"/>
    <stroke
        android:width="2dp"
        android:color="#444444"/>
</shape>

注意：要使oval 形状显示为圆形，在这些示例中，您使用此形状作为背景的视图应该是正方形，或者您必须设置形状标记的height 和width 属性值相等。

【讨论】：

不错的解决方案。当然，如果视图的宽度和高度相同，椭圆会显示为圆形。我认为有一种方法可以让它显示为一个圆形，无论视图大小如何。
@FerranMaylinch “我认为有一种方法可以让它显示为一个圆圈，无论视图大小如何。”我使用包含固定宽度/高度的 ImageView（圆圈作为“src”可绘制对象）和包含文本（例如）的 TextView 的 RelativeLayout 解决了这个问题。
我在做同样的事情，但圆圈被画成椭圆形
如果我们需要它在运行时围绕具有不同边框颜色的文本视图创建呢？
@AnshulTyagi 我相信你可以通过调用yourView.getBackground() 并手动设置颜色来做到这一点。您需要将其转换为正确的类型，例如 ShapeDrawable。 SO上有关于此的相关问题。

【解决方案3】：

简单圆的代码

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
        <solid android:color="#9F2200"/>
        <stroke android:width="2dp" android:color="#fff" />
        <size android:width="80dp" android:height="80dp"/>
</shape>

【讨论】：

【解决方案4】：

您可以使用VectorDrawable，如下：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportHeight="64"
    android:viewportWidth="64">

    <path
        android:fillColor="#ff00ff"
        android:pathData="M22,32
        A10,10 0 1,1 42,32
        A10,10 0 1,1 22,32 Z" />
</vector>

上面的xml呈现为：

【讨论】：

嘿，我在圆和视口之间有一个填充。你能帮帮我吗？
@Ajeet 您可以更改视口的大小，您可以将路径放在组内并指定平移和缩放<group android:translateX="-10" android:translateY="15"><path ...
@Riyas 你能解释一下 pathData 部分吗？这些坐标意味着什么？

【解决方案5】：

查看 Android SDK 示例。 ApiDemos 项目中有几个例子：

/ApiDemos/res/drawable/

black_box.xml
shape_5.xml
等

渐变填充的圆看起来像这样：

形状>

【讨论】：

【解决方案6】：

如果你想要这样的圈子

尝试使用下面的代码：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="0dp"
    android:shape="ring"
    android:thicknessRatio="2"
    android:useLevel="false" >
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1dp"
        android:color="@android:color/darker_gray" />
</shape>

【讨论】：

【解决方案7】：

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <!-- fill color -->
    <solid android:color="@color/white" />

    <!-- radius -->
    <stroke
        android:width="1dp"
        android:color="@color/white" />

    <!-- corners -->
    <corners
        android:radius="2dp"/>
</shape>

【讨论】：

<corners /> 在椭圆形中做了什么（我认为没有角）？

【解决方案8】：

这是一个简单的circle_background.xml，用于预材质：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="oval">
            <solid android:color="@color/color_accent_dark" />
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/color_accent" />
        </shape>
    </item>
</selector>

您可以在按钮的布局定义中使用属性'android:background="@drawable/circle_background"

【讨论】：

+ 将“大小”添加到形状（取决于用例）。

【解决方案9】：

res/drawble/circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>

        <shape android:shape="oval">
            <solid android:color="#e42828"/>
            <stroke android:color="#3b91d7" android:width="5dp"/>
            <!-- Set the same value for both width and height to get a circular shape -->
            <size android:width="250dp" android:height="250dp"/>
        </shape>
    </item>
</selector>

【讨论】：

【解决方案10】：

Android XML 可绘制文件中的圆形

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@android:color/white" />
    <stroke
        android:width="1.5dp"
        android:color="@android:color/holo_red_light" />
    <size
        android:width="120dp"
        android:height="120dp" />
</shape>

截图

【讨论】：

【解决方案11】：

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke
        android:width="10dp"
        android:color="@color/white"/>

    <gradient
        android:startColor="@color/red"
        android:centerColor="@color/red"
        android:endColor="@color/red"
        android:angle="270"/>

    <size 
        android:width="250dp" 
        android:height="250dp"/>
</shape>

【讨论】：

【解决方案12】：

用破折号试试下面的代码：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size
    android:width="@dimen/_60sdp"
    android:height="@dimen/_60sdp" />

<solid android:color="@color/black" />

<stroke
    android:width="@dimen/_1sdp"
    android:color="@color/white"
    android:dashWidth="@dimen/_1sdp"
    android:dashGap="@dimen/_1sdp" />

试试不带破折号的代码

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<size
    android:width="@dimen/_60sdp"
    android:height="@dimen/_60sdp" />

<solid android:color="@color/black" />

<stroke
    android:width="@dimen/_1sdp"
    android:color="@color/white"
     />

【讨论】：

【解决方案13】：

你可以试试这个-

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="700"
    android:thickness="100dp"
    android:useLevel="false">

    <solid android:color="#CCC" />

</shape>

另外，您可以通过调整android:thickness来调整圆的半径。

【讨论】：

这真是太好了！由于属性不直观，因此肯定需要一些技巧。我设法让它每次都显示一个漂亮的空圆圈作为边框。您可以使用填充来确保显示整个圆圈。

【解决方案14】：

你可以试试这个

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

<item>
    <shape
        android:innerRadius="0dp"
        android:shape="ring"
        android:thicknessRatio="2"
        android:useLevel="false" >
        <solid android:color="@color/button_blue_two" />
    </shape>
</item>

如果你将它用于文本视图，你不必担心宽度和高度的纵横比

【讨论】：

【解决方案15】：

由于某种原因，我无法在我的 ConstraintLayout 内画一个圆圈，我只是无法使用上述任何答案。

当你按下“Alt+7”时，一个简单的 TextView 可以完美地工作：

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>

【讨论】：

非常聪明！我相信有人会觉得这很有用。

【解决方案16】：

您可以创建自定义可绘制对象来动态更改圆的颜色和半径

import android.graphics.Canvas;
import android.graphics.ColorFilter;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.drawable.Drawable;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

public class CircleDrawable extends Drawable {

    private Paint circlePaint;
    private int fillColor;
    private int strokeColor;
    private float radius;

    public CircleDrawable(int fillColor, int strokeColor, float radius) {
        this.fillColor = fillColor;
        this.strokeColor = strokeColor;
        this.radius = radius;
        circlePaint=new Paint(Paint.ANTI_ALIAS_FLAG);
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        int x=getBounds().centerX();
        int y=getBounds().centerY();
        //draw fill color circle
        circlePaint.setStyle(Paint.Style.FILL);
        circlePaint.setColor(fillColor);
        canvas.drawCircle(x,y,radius,circlePaint);
        // draw stroke circle
        circlePaint.setStyle(Paint.Style.STROKE);
        circlePaint.setColor(strokeColor);
        circlePaint.setStrokeWidth(5);
        canvas.drawCircle(x,y,radius,circlePaint);
    }

    @Override
    public void setAlpha(int alpha) {
        circlePaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
         circlePaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

从 UI 中设置它以获取圆形

imageView.setImageDrawable(new CircleDrawable(Color.RED,Color.YELLOW,100));

输出会是这样的

【讨论】：

【解决方案17】：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/text_color_green"/>
            <!-- Set the same value for both width and height to get a circular shape -->
            <size android:width="250dp" android:height="250dp"/>
        </shape>
    </item>
</selector>

【讨论】：

【解决方案18】：

随便用

ShapeDrawable circle = new ShapeDrawable( new  OvalShape() );

【讨论】：

如何在我的 XML 布局文件中将其设置为 ImageView 的 src？
这不适用于xml布局代码
这确实有效。谢谢 :) val background = ShapeDrawable(OvalShape()) background.paint.color = ContextCompat.getColor(holder.getView().context, R.color.green) val layers = arrayOf(background, resource!!) greenRoundIcon.setImageDrawable (LayerDrawable(层))