java - Android：创建一个圆形 TextView？

Question

我当前的简单 XML 在下面，但是我希望其中的 3 个 TextViews 是圆形的，而不是矩形的。

我怎样才能改变我的代码来做到这一点？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tvSummary1"
        android:layout_width="270dp"
        android:layout_height="60dp" >
    </TextView>

    <TextView
        android:id="@+id/tvSummary2"
        android:layout_width="270dp"
        android:layout_height="60dp" >
    </TextView>

    <TextView
        android:id="@+id/tvSummary3"
        android:layout_width="270dp"
        android:layout_height="60dp" >
    </TextView>

</LinearLayout>

注意：我想要一个实际的圆，而不是如下所示的弯曲边缘矩形：

在此处输入图像描述

编辑：

当前代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/tvSummary1"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:text=" " 
        android:gravity="left|center_vertical"
        android:background="@drawable/circle"/>

    <TextView
        android:id="@+id/tvSummary2"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:background="@drawable/circle" >
    </TextView>

    <TextView
        android:id="@+id/tvSummary3"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:background="@drawable/circle" >
    </TextView>

</LinearLayout>

电流输出：

在此处输入图像描述

score 106 · Accepted Answer

我也在寻找解决这个问题的方法，并且我发现简单舒适的是将矩形 TextView 的形状转换为圆形。使用这种方法将是完美的：

在名为“circle.xml”的可绘制文件夹中创建一个新的 XML 文件（例如），并用以下代码填充它：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <solid android:color="#9FE554" />

    <size
        android:height="60dp"
        android:width="60dp" />

</shape>

使用此文件，您将创建新形式的 TextView。在这种情况下，我创建了一个绿色圆圈。如果要添加边框，则必须将以下代码添加到上一个文件中：

    <stroke
        android:width="2dp"
        android:color="#FFFFFF" />

使用以下代码在可绘制文件夹中创建另一个 XML 文件（“rounded_textview.xml”）：

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

该文件将用于改变我们 eligamos 的 TextView 的方式。

最后，在我们想要更改方式的 TextView 属性部分，我们前往“背景”并选择创建的第二个 XML 文件（“rounded_textview.xml”）。

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="H"
    android:textSize="30sp"
    android:background="@drawable/rounded_textview"
    android:textColor="@android:color/white"
    android:gravity="center"
    android:id="@+id/mark" />

通过这些步骤，TextView 不是有一个 TextView，而是有一个圆形的 TextView。只需更改形状，而不是 TextView 的功能。结果如下：

另外我不得不说，这些步骤可以应用于在属性中具有“背景”选项的任何其他组件。

运气！！

score 88 · Accepted Answer

典型的解决方案是定义形状并将其用作背景，但随着位数的变化，它不再是一个完美的圆形，它看起来像一个带有圆边的矩形或椭圆形。所以我开发了这个解决方案，效果很好。希望它会帮助某人。

这是自定义TextView的代码

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.TextView;

public class CircularTextView extends TextView
{
private float strokeWidth;
int strokeColor,solidColor;

public CircularTextView(Context context) {
    super(context);
}

public CircularTextView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CircularTextView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}


@Override
public void draw(Canvas canvas) {

    Paint circlePaint = new Paint();
    circlePaint.setColor(solidColor);
    circlePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    Paint strokePaint = new Paint();
    strokePaint.setColor(strokeColor);
    strokePaint.setFlags(Paint.ANTI_ALIAS_FLAG);

    int  h = this.getHeight();
    int  w = this.getWidth();

    int diameter = ((h > w) ? h : w);
    int radius = diameter/2;

    this.setHeight(diameter);
    this.setWidth(diameter);

    canvas.drawCircle(diameter / 2 , diameter / 2, radius, strokePaint);

    canvas.drawCircle(diameter / 2, diameter / 2, radius-strokeWidth, circlePaint);

    super.draw(canvas);
}

public void setStrokeWidth(int dp)
{
    float scale = getContext().getResources().getDisplayMetrics().density;
    strokeWidth = dp*scale;

}

public void setStrokeColor(String color)
{
    strokeColor = Color.parseColor(color);
}

public void setSolidColor(String color)
{
    solidColor = Color.parseColor(color);

}
}

然后在您的 XML 中，提供一些填充并确保其重心为中心

<com.app.tot.customtextview.CircularTextView
        android:id="@+id/circularTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="11"
        android:gravity="center"
        android:padding="3dp"/>

并且可以设置笔画宽度

circularTextView.setStrokeWidth(1);
circularTextView.setStrokeColor("#ffffff");
circularTextView.setSolidColor("#000000");

score 45 · Accepted Answer

创建一个texview_design.xml文件并使用以下代码填充它。把它放在 res/drawable 中。

<shape xmlns:android="http://schemas.android.com/apk/res/android" >

        <solid android:color="#98AFC7" />

        <stroke
            android:width="2dp"
            android:color="#98AFC7" />

        <corners
            android:bottomLeftRadius="20dp"
            android:bottomRightRadius="20dp"
            android:topLeftRadius="20dp"
            android:topRightRadius="20dp" />

    </shape>

然后在您的主 XML 文件中为每个 TextView 添加以下行：

  android:background="@drawable/texview_design"

第二种方式（不推荐）：下载这个圈子并将其放入您的drawable文件夹中，然后将其作为TextView's背景。然后设置gravity为center.

然后它看起来像这样：

在此处输入图像描述

score 30 · Accepted Answer

这是一个防止椭圆形背景变成圆形的矩形。
使视图成为正方形将解决所有问题。

我发现这个解决方案很干净并且适用于不同的文本大小和文本长度。

public class EqualWidthHeightTextView extends TextView {

    public EqualWidthHeightTextView(Context context) {
        super(context);
    }

    public EqualWidthHeightTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public EqualWidthHeightTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int r = Math.max(getMeasuredWidth(),getMeasuredHeight());
        setMeasuredDimension(r, r);

    }
}

用法

<com.commons.custom.ui.EqualWidthHeightTextView
    android:id="@+id/cluster_count"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="10+"
    android:background="@drawable/oval_light_blue_bg"
    android:textColor="@color/white" />

椭圆光蓝色 bg.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"<br>
       android:shape="oval">
   <solid android:color="@color/light_blue"/>
   <stroke android:color="@color/white" android:width="1dp" />
</shape>

score 13 · Accepted Answer

1.使用以下代码在您的 res/drawable 文件夹中创建一个 xml circle_text_bg.xml

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

    <stroke
        android:width="1dp"
        android:color="#98AFC7" />
    <corners
         android:bottomLeftRadius="50dp"
         android:bottomRightRadius="50dp"
         android:topLeftRadius="50dp"
         android:topRightRadius="50dp" />
    <size
         android:height="20dp"
         android:width="20dp" />
</shape>

2.使用 circle_text_bg 作为你的文本视图的背景。注意：为了得到一个完美的圆圈，你的 textview 高度和宽度应该是相同的。预览带有此背景的文本 1、2、3 的文本视图应如下所示

score 8 · Accepted Answer

这是我实际工作的解决方案

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    >
    <!-- The fill color -->
    <solid android:color="#ffff" />
    <!-- Just to add a border -->
    <stroke
        android:color="#8000"
        android:width="2dp"
    />
</shape>

如果您想要一个完美（未拉伸）的圆圈，请确保您的 TextView 宽度和高度匹配（在 dp 中相同）。

通过缩短文本或扩大圆圈或缩小文本大小或减少填充（如果有），确保文本适合圆圈。或上述建议的组合。

[编辑]

对于我在您的图片中看到的内容，您想在一行上添加太多文字，对于纯圆圈。
考虑到文本应该有一个正方形的方面，所以你可以把它包裹起来（使用\n）或者只是把数字放在圆圈里面，然后把文字放在相应的圆圈上面或下面。

score 6 · Accepted Answer

round_tv.xml您可以在可绘制文件夹中尝试此操作：

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

    <stroke android:color="#22ff55" android:width="3dip"/>

    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp" />

    <size
        android:height="60dp"
        android:width="60dp" />

</shape>

在您的文本视图中应用该drawable：

<TextView
    android:id="@+id/tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/round_tv"
    android:gravity="center_vertical|center_horizontal"
    android:text="ddd"
    android:textColor="#000"
    android:textSize="20sp" />

输出：

在此处输入图像描述

希望这可以帮助。

编辑：如果你的文字太长，椭圆形更受欢迎。

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

    <stroke android:color="#55ff55" android:width="3dip"/>

    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="30dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="30dp" />

    <size
        android:height="60dp"
        android:width="60dp" />

</shape>

输出：

在此处输入图像描述

如果你仍然需要一个合适的圆圈，那么我想你需要在其中设置文本后动态设置它的高度，新的高度应该与它的新宽度一样多，以便形成一个合适的圆圈。

score 4 · Accepted Answer

在你的drawable中使用它

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


    <solid android:color="#55ff55"/>


    <size android:height="60dp"
        android:width="60dp"/>

</shape>

将 textview 的背景设置为这样

score 3 · Accepted Answer

这里的大部分答案似乎是对可绘制形状的破解，而 android 本身通过形状功能支持这一点。这对我来说非常有效。你可以通过两种方式做到这一点

使用固定的高度和宽度，无论您放置什么文本，它都将保持不变，如下所示

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

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

    <size android:width="25dp" android:height="25dp"/>

<stroke android:color="@color/color_primary" android:width="1dp"/>

</shape>

使用 Padding重新调整形状，而不考虑其中的文本，textview如下所示

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

<padding
    android:bottom="@dimen/semi_standard_margin"
    android:left="@dimen/semi_standard_margin"
    android:right="@dimen/semi_standard_margin"
    android:top="@dimen/semi_standard_margin" />

<stroke android:color="@color/color_primary" android:width="2dp"/>

semi_standard_margin = 4dp

score 2 · Accepted Answer

我使用：/drawable/circulo.xml

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

</shape>

然后我在我的 TextView 中使用它：

android:background="@drawable/circulo"

无需复杂化。

score 0 · Accepted Answer

试试下面的可绘制文件。在您的文件夹中创建名为“circle”的res/drawable文件并复制以下代码：

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

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

    <stroke
        android:width="1dp"
        android:color="#4a6176" />

    <padding
        android:left="10dp"
        android:right="10dp"
        android:top="10dp"
        android:bottom="10dp"
         />

    <corners android:radius="10dp" />

</shape>

如下应用它TextView：

<TextView
        android:id="@+id/tvSummary1"
        android:layout_width="270dp"
        android:layout_height="60dp"
        android:text="Hello World" 
        android:gravity="left|center_vertical"
        android:background="@drawable/round_bg">

    </TextView>

在此处输入图像描述

java - Android：创建一个圆形 TextView？

11 回答 11

Related

Reference