logo标签列表

如何在Android XML drawable文件中定义圆形形状？

androidandroid-drawableshapes
826

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

不幸的是，android.com网站上的文档没有涵盖Shape类的XML属性。我认为我应该使用ArcShape来绘制一个圆，但是没有关于如何设置大小、颜色或角度的说明，以使弧形成为圆形。

3
在这里，您可以了解如何创建形状可绘制对象：http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape - Mario Kutlev
你可以从这里获取圆形XML：https://developer.android.com/samples/WearSpeakerSample/res/drawable/circle.html - Shahab Rauf
自那时起，Android Dev文档已经得到了改进。现在它涵盖了android:shape元素 - Drawable资源。 - naXa stands with Ukraine
19个回答
16

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

<?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" />
没有破折号 有破折号
没有破折号的输出 带破折号的输出
10
<?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

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

完美运作的是一个简单的TextView，当你按下"Alt+Num7"时，文本会显示出来：

 <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#0075bc"
            android:textSize="40dp"
            android:text="•"></TextView>
6
你可以尝试这个 -
<?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来调整圆的半径。

enter image description here

这真的很不错！它肯定需要一些尝试，因为属性并不直观。我设法让它每次显示一个漂亮的空心圆作为边框。而且你可以使用填充来确保整个圆形都能显示出来。 - SMBiggs
6

首先创建可绘制资源文件

在这里输入图片描述

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

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

   <solid 
        // here define your color
       android:color="#666666"/>

   <size 
        // here define your shape size
       android:width="120dp"
        android:height="120dp"/>
</shape>
6

你可以尝试使用这个。

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

如果您在使用此文本视图，就不需要担心宽度和高度方面的比例问题。

3
您可以创建一个自定义的可绘制对象，动态地改变圆形的颜色和半径。
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;
    }
}

在用户界面中设置此选项可获得圆形形状。

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

输出结果将会是这样的：

enter image description here


这个输出结果包含了一个链接和图片。
1
<?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>
-21

只需使用

ShapeDrawable circle = new ShapeDrawable( new  OvalShape() );
27
我该如何在XML布局文件中将其设置为ImageView的src？ - Janusz
这不适用于 XML 布局代码。 - François Legrand
2
这段程序代码实际上是有效的。谢谢 :) val background = ShapeDrawable(OvalShape()) background.paint.color = ContextCompat.getColor(holder.getView().context, R.color.green) val layers = arrayOf(background, resource!!) greenRoundIcon.setImageDrawable(LayerDrawable(layers)) - David
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接