Question

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

可悲的是，android.com上的文档没有涵盖Shape类的XML属性。我想我应该使用ArcShape绘制一个圆圈，但是没有解释如何设置从弧形成一个圆所需的大小，颜色或角度。

Answer 1

这是一个简单的圈子，可以作为Android中的drawable。

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

Answer 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形状显示为圆形，在这些示例中，您使用此形状作为背景的视图应该是正方形，或者您必须将shape标记的height和width属性设置为相等的值。

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

Answer 4

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

Answer 5

您可以使用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呈现为：

Answer 6

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

Answer 7

这是一个简单的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"

Answer 8

如果你想要像这样的圈

尝试使用以下代码：

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

Answer 9

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

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

屏幕截图

Answer 11

你可以试试这个 -

<?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来调整圆的半径。

Answer 12

你可以创建一个自定义的drawable来动态改变圆的颜色和半径

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

输出是这样的

Answer 13

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

当您按下＆＃34; Alt + 7＆＃34;

时，完美的工作原理是带有文本的简单TextView

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

Answer 14

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

Answer 15

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>

在线示例：https://code-android-example.blogspot.com/2019/07/how-to-circle-shape-in-xml-drawable-android.html

Answer 16

您可以尝试使用此

   # do ". acd_func.sh"
# acd_func 1.0.5, 10-nov-2004
# petar marinov, http:/geocities.com/h2428, this is public domain

cd_func ()
{
  local x2 the_new_dir adir index
  local -i cnt

  if [[ $1 ==  "--" ]]; then
    dirs -v
    return 0
  fi

  the_new_dir=$1
  [[ -z $1 ]] && the_new_dir=$HOME

  if [[ ${the_new_dir:0:1} == '-' ]]; then
    #
    # Extract dir N from dirs
    index=${the_new_dir:1}
    [[ -z $index ]] && index=1
    adir=$(dirs +$index)
    [[ -z $adir ]] && return 1
    the_new_dir=$adir
  fi

  #
  # '~' has to be substituted by ${HOME}
  [[ ${the_new_dir:0:1} == '~' ]] && the_new_dir="${HOME}${the_new_dir:1}"

  #
  # Now change to the new dir and add to the top of the stack
  pushd "${the_new_dir}" > /dev/null
  [[ $? -ne 0 ]] && return 1
  the_new_dir=$(pwd)

  #
  # Trim down everything beyond 16th entry
  popd -n +16 2>/dev/null 1>/dev/null

  #
  # Remove any other occurence of this dir, skipping the top of the stack
  for ((cnt=1; cnt <= 15; cnt++)); do
    x2=$(dirs +${cnt} 2>/dev/null)
    [[ $? -ne 0 ]] && return 0
    [[ ${x2:0:1} == '~' ]] && x2="${HOME}${x2:1}"
    if [[ "${x2}" == "${the_new_dir}" ]]; then
      popd -n +$cnt 2>/dev/null 1>/dev/null
      cnt=cnt-1
    fi
  done

  return 0
}

alias cd=cd_func

if [[ $BASH_VERSION > "2.05a" ]]; then
  # ctrl+w shows the menu
  bind -x "\"\C-w\":cd_func -- ;"
fi

如果您将其用于文本视图，则不必打扰宽高比。

Answer 17

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

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

Answer 18

只需使用

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

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

18 个答案: