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>

当前输出:

Answer 1

我也在寻找这个问题的解决方案,我发现简单而舒适,就是将矩形TextView的形状转换为圆形.用这种方法将是完美的:

1. 在drawable文件夹中创建一个名为"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" />

2. 使用以下代码在drawable文件夹中创建另一个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>
   

此文件将用于更改TextView我们eligamos的方式.

3. 最后,在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的rectagular有一个圆形.只需更改形状,而不是TextView的功能.结果如下:

此外,我必须说这些步骤可以应用于属性中具有"背景"选项的任何其他组件.

运气!!

Answer 2

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

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

Answer 3

创建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.

那么它看起来像这样:

Answer 4

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

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

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

Answer 5

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的背景.注意:为了获得完美的圆形,您的textview高度和宽度应该相同.使用此背景预览文本视图1,2,3的文本视图应如下所示

Answer 6

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

<?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)或仅将数字放在圆圈内并将文字放在上方或相应的圆圈中.

Answer 7

在你的绘图中使用它

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

将文本视图的背景设置为这样

Answer 8

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

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

在您的textviews中应用该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>

输出:

如果你仍然需要一个合适的圆圈,那么我猜你需要在设置文本后动态设置它的高度,新的高度应该与它的新宽度一样多,以便制作一个合适的圆圈.