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


685

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

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


3
:在这里你可以了解如何创建形状绘制developer.android.com/guide/topics/resources/...
马里奥Kutlev


从那时起,Android Dev文档得到了改进。现在介绍android:shape元素-Drawable资源
naXa

Answers:


1511

这是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>

51
以及如何动态更改颜色?
Ankit Garg 2014年

5
@AnkitGarg您可以从Java代码中应用滤色器(请参阅Drawable类)
milosmns 2015年

7
我尝试过dp,它扭曲成椭圆形。对我来说,使用pt而不是固定它。
泰勒

13
如果您稍后定义视图的正方形大小,则无需在sizeshape
Ferran Maylinch 2015年

2
它的形状是椭圆而不是圆形。谁能确认?
塔伦(Tarun)2015年

762

将此设置为您的视图背景

<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在这些示例中,要使形状显示为圆形,或者您以该形状为背景的视图应为正方形,或者必须将shape标签的heightwidth属性设置为相等的值。


2
不错的解决方案。当然,如果视图的宽度和高度相同,则椭圆形将显示为圆形。我认为无论视图大小如何,都有一种使它显示为圆形的方法。
Ferran Maylinch '16

2
@FerranMaylinch“我认为无论视图大小如何,都有一种使它显示为圆形的方法。” 我使用RelativeLayout解决了这一问题,该方法同时包装了固定宽度/高度的ImageView(圆圈为“ src”可绘制圆圈)和包装了文本的TextView(例如)。
米歇尔

我做同样的事情,但绘制圆椭圆形
虫虫恰巧

如果我们需要它在运行时围绕具有不同边框颜色的textview创建该怎么办?
Anshul Tyagi

@AnshulTyagi我相信您可以通过yourView.getBackground()手动调用和设置颜色来实现。您需要将其转换为合适的类型,例如ShapeDrawable。SO上有与此相关的问题。
M. Reza Nasirloo

93

简单圈代码

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

46

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

/ ApiDemos / res / drawable /

  • black_box.xml
  • shape_5.xml
  • 等等

对于带有渐变填充的圆,它将看起来像这样:

<?xml版本=“ 1.0”编码=“ 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>


46

您可以如下使用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

1
@Ajeet,您可以更改视口的大小,并且可以将路径放入组中并指定平移和比例<group android:translateX="-10" android:translateY="15"><path ...
Boris Treukhov

2
@Riyas您能解释一下pathData部分吗?这些坐标表示什么?
Darshan Miskin

22
<?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>

1
<corners />椭圆形怎么办(我认为没有角)?
Scott Biggs

17

这是用于素材的简单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"在按钮的布局定义中使用该属性


+在形状上添加“大小”(取决于用例)。
TouchBoarder

17

如果你想要一个这样的圆圈

在此处输入图片说明

尝试使用以下代码:

<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>

8
<?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>

6

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>

在此处输入图片说明


4

你可以试试这个-

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

在此处输入图片说明


真是太好了!由于属性不直观,因此肯定需要花一些时间来玩。我设法使它每次在边框上显示一个漂亮的空圆圈。您可以使用填充来确保显示整个圆圈。
Scott Biggs

2

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

当您按下“ Alt + 7”时,一个简单的TextView带有输出的文本是完美的工作方式:

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

非常聪明!我相信有人会发现这很有用。
Scott Biggs

非常有用的,伟大的..
马比尔·拉曼·汗

1

您可以尝试使用此

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

如果您将其用于textview,则不必打扰宽高比


0
<?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>

-23

只需使用

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

26
以及如何在XML布局文件中将其设置为ImageView的src?
Janusz

这是不能直接适用于一个XML布局代码
弗朗索瓦·罗格朗

1
这实际上是可行的。谢谢:) val background = ShapeDrawable(OvalShape())background.paint.color = ContextCompat.getColor(holder.getView()。context,R.color.green)val layer = arrayOf(background,resource !!)greenRoundIcon.setImageDrawable (LayerDrawable(layers))
大卫,

太不喜欢了,但是它有效并且对我有帮助,谢谢
Pavel Shorokhov
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.