关于Java:Android:创建圆形TextView?

Android: Creating a Circular TextView?

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

如何更改我的代码?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?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>

注意:我想要一个实际的圆,而不是如下所示的弯曲矩形:

enter

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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>

电流输出:

enter


我也在寻找解决这个问题的方法,我发现很容易和舒服,就是将矩形TextView的形状转换为圆形。用这种方法将是完美的:

  • 在名为" circle.xml"的可绘制文件夹中创建一个新的XML文件(例如),并用以下代码填充它:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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的新形式。在这种情况下,我创建了一个绿色的圆圈。如果要添加边框,则必须将以下代码添加到上一个文件:

    1
    2
    3
        <stroke
            android:width="2dp"
            android:color="#FFFFFF" />
  • 使用以下代码在可绘制文件夹中创建另一个XML文件(" rounded_textview.xml"):

    1
    2
    3
    4
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/circle" />
    </selector>
  • 此文件将用于更改我们对TextView进行修改的方式。

  • 最后,在" TextView"属性中,我们要更改"方式"部分,我们转到"背景"并选择创建的第二个XML文件(" rounded_textview.xml")。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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的功能。结果将是以下内容:

    enter

    祝你好运!


    典型的解决方案是定义形状并将其用作背景,但是随着位数的变化,它不再是理想的圆形,而是看起来像是具有圆边或椭圆形的矩形。因此,我开发了此解决方案,效果很好。希望对别人有帮助。

    Circular

    这是自定义TextView的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    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中进行填充,并确保其重心位于中心

    1
    2
    3
    4
    5
    6
    7
    <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"/>

    您可以设置笔划宽度

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


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <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添加以下行:

    1
      android:background="@drawable/texview_design"

    第二种方式(不推荐):
    circle
    下载此圆圈并将其放置在您的drawable文件夹中,然后将其设为您的TextView's背景。然后将gravity设置为center

    然后它将如下所示:

    enter


    这是一个矩形,可防止椭圆形背景变为圆形。
    使视图成为正方形将修复所有问题。

    我发现此解决方案很干净,并且可以用于更改文本大小和文本长度。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    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);

        }
    }

    用法

    1
    2
    3
    4
    5
    6
    7
    8
    <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" />

    oval_light_blue_bg.xml

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


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <?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的背景。注意:为了得到一个完美的圆圈,您的textview的高度和宽度应该相同。带有此背景的文本1,2,3的textview的预览应如下图所示:


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <?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中相同)。

    通过缩短文本或扩大圆圈或减小文本尺寸或减小填充(如果有的话),确保文本适合圆圈。
    或以上建议的组合。

    [编辑]

    对于我在您的图片中看到的内容,您想在一行上添加太多文字(纯圆圈)。
    考虑到文本应具有方形的外观,因此您可以将其换行(使用\
    ),也可以将数字放在圆圈内,然后将文字放在相应的圆圈上方或覆盖相应的圆圈。


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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <?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>

    在您的文本视图中将该可绘制对象应用为:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <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" />

    输出:

    enter

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <?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>