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

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

遗憾的是，android.com上的文档没有涵盖Shape类的XML属性。我认为我应该使用ArcShape来绘制一个圆，但是没有解释如何设置大小、颜色或角度来用Arc制作一个圆。

869025 次浏览
小开

只要用

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

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

/ApiDemos/res/drawable/

  • black_box.xml
  • shape_5.xml
  • 等

对于带有渐变填充的圆，它看起来像这样：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" ><gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"android:angle="270"/></shape>
小开
最佳答案

这是一个简单的圆，作为Android中的绘图。

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval">
<solidandroid:color="#666666"/>
<sizeandroid:width="120dp"android:height="120dp"/></shape>
小开

简单圆的代码

<?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>
小开

下面是一个简单的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"一起使用

小开

将此设置为您的视图背景

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

在此处输入图片描述

对于实心圆使用：

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

在此处输入图片描述

固体与中风：

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

在此处输入图片描述

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

小开 
<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval">
<!-- fill color --><solid android:color="@color/white" />
<!-- radius --><strokeandroid:width="1dp"android:color="@color/white" />
<!-- corners --><cornersandroid:radius="2dp"/></shape>
小开

您可以使用可绘制向量如下：

<?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">
<pathandroid:fillColor="#ff00ff"android:pathData="M22,32A10,10 0 1,1 42,32A10,10 0 1,1 22,32 Z" /></vector>

上面的xml呈现为：

在此处输入图片描述

小开 
<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval">
<strokeandroid:width="10dp"android:color="@color/white"/>
<gradientandroid:startColor="@color/red"android:centerColor="@color/red"android:endColor="@color/red"android:angle="270"/>
<sizeandroid:width="250dp"android:height="250dp"/></shape>
小开

如果你想要这样的圈

在此处输入图片描述

尝试使用下面的代码：

<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" /><strokeandroid:width="1dp"android:color="@android:color/darker_gray" /></shape>
小开

由于某种原因，我无法在我的ConstraintLayout中绘制一个圆圈，我只是无法使用上面的任何答案。

完美的工作是一个简单的TextView，当您按“Alt+7”时会出现文本：

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

你可以试试这个

<?xml version="1.0" encoding="utf-8"?><shapexmlns: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来调整圆的半径。

在此处输入图片描述

小开 
<?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>
小开

RES/Drabble/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>

在此处输入图片描述

小开

你可以试试用这个

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item><shapeandroid:innerRadius="0dp"android:shape="ring"android:thicknessRatio="2"android:useLevel="false" ><solid android:color="@color/button_blue_two" /></shape></item>

如果你在文本视图中使用这个，你不需要担心宽度和长宽比

小开

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" /><strokeandroid:width="1.5dp"android:color="@android:color/holo_red_light" /><sizeandroid:width="120dp"android:height="120dp" /></shape>

截图

在此处输入图片描述

小开

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

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);}
@Overridepublic void draw(@NonNull Canvas canvas) {int x=getBounds().centerX();int y=getBounds().centerY();//draw fill color circlecirclePaint.setStyle(Paint.Style.FILL);circlePaint.setColor(fillColor);canvas.drawCircle(x,y,radius,circlePaint);// draw stroke circlecirclePaint.setStyle(Paint.Style.STROKE);circlePaint.setColor(strokeColor);circlePaint.setStrokeWidth(5);canvas.drawCircle(x,y,radius,circlePaint);}
@Overridepublic void setAlpha(int alpha) {circlePaint.setAlpha(alpha);}
@Overridepublic void setColorFilter(@Nullable ColorFilter colorFilter) {circlePaint.setColorFilter(colorFilter);}
@Overridepublic int getOpacity() {return PixelFormat.TRANSLUCENT;}}

从UI设置此项以获取圆形

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

输出将是这样的

输入图片描述

小开

使用dash尝试下面的代码：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><sizeandroid:width="@dimen/_60sdp"android:height="@dimen/_60sdp" />
<solid android:color="@color/black" />
<strokeandroid: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">
<sizeandroid:width="@dimen/_60sdp"android:height="@dimen/_60sdp" />
<solid android:color="@color/black" />
<strokeandroid:width="@dimen/_1sdp"android:color="@color/white"/>

不带破折号的输出

输出

小开

首先创建可绘制资源文件

在此处输入图片描述

然后将此代码添加到文件中

 <?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"// here define the shapeandroid:shape="oval">
<solid// here define your colorandroid:color="#666666"/>
<size// here define your shape sizeandroid:width="120dp"android:height="120dp"/></shape>

提交答案