我目前的简单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>
当前输出:
答案 0 :(得分:79)
我也在寻找这个问题的解决方案,我发现简单而舒适的方法是将矩形TextView的形状转换为圆形。用这种方法将是完美的:
在drawable文件夹中创建一个名为&#34; circle.xml&#34;的新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" />
使用以下代码在drawable文件夹中创建另一个XML文件(&#34; rounded_textview.xml&#34;):
<?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的方式。
最后,在TextView属性中我们想要改变方式部分,我们前往&#34;背景&#34;并选择创建的第二个XML文件(&#34; rounded_textview.xml&#34;)。
<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的功能。结果如下:
此外,我必须说这些步骤可以应用于任何其他可以选择&#34;背景&#34;在属性中。
运气!!
答案 1 :(得分:64)
典型的解决方案是定义形状并将其用作背景,但随着数字的变化,它不再是一个完美的圆形,它看起来像带有圆边或椭圆形的矩形。所以我开发了这个解决方案,它运作良好。希望它会帮助别人。
Here is the code of custom 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");
答案 2 :(得分:41)
创建 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
。
然后它会是这样的:
答案 3 :(得分:19)
这是一个矩形,可防止椭圆形背景变圆 使视图成为正方形将解决所有问题。
我发现这个解决方案很干净,适用于不同的文本大小和文本长度。
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>
答案 4 :(得分:9)
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高度和宽度应该相同。Preview of what your textview with text 1, 2, 3 with this background should look like this
答案 5 :(得分:8)
这是我实际工作的解决方案
<?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
)或仅将数字放在圆圈内并将文字放在上方或相应的圆圈中。
答案 6 :(得分:5)
您可以在可绘制文件夹中的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>
将您的textable中的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>
输出:
如果你仍然需要一个合适的圆圈,那么我猜你需要在设置文字后动态设置它的高度,新的高度应该与它的新宽度一样多,以便形成一个合适的圆圈。
答案 7 :(得分:4)
在你的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的背景设置为
答案 8 :(得分:3)
这里的大部分答案似乎是形状可绘制的黑客攻击,而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>
使用填充,无论文本如何,都会重新调整形状
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
答案 9 :(得分:2)
我使用: /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"
无需复杂化。
答案 10 :(得分:0)
尝试以下可绘制文件。创建名为&#34; circle&#34;在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>