如何在 Android 用户界面中绘制圆角矩形？

我需要在 Android 用户界面中绘制一个圆角矩形。对于 TextView和 EditText使用相同的圆角矩形也是有帮助的。

184850 次浏览
小开
最佳答案

在您的布局 xml 中执行以下操作:

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


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


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


</shape>

通过改变 android:radius，你可以改变角的“半径”的大小。

<solid>用于定义可绘制图形的颜色。

您可以使用 android:bottomLeftRadius、 android:bottomRightRadius、 android:topLeftRadius和 android:topRightRadius代替 android:radius来定义每个角的半径。

小开

在 monodroid中，您可以对圆角矩形这样做，然后将其保持为父类，可以添加 editbox和其他布局特性。

 class CustomeView : TextView
{
public CustomeView (Context context, IAttributeSet ) : base (context, attrs)
{
}
public CustomeView(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle)
{
}
protected override void OnDraw(Android.Graphics.Canvas canvas)
{
base.OnDraw(canvas);
Paint p = new Paint();
p.Color = Color.White;
canvas.DrawColor(Color.DarkOrange);


Rect rect = new Rect(0,0,3,3);


RectF rectF = new RectF(rect);




canvas.DrawRoundRect( rectF, 1,1, p);






}
}
}
小开

我觉得，这正是你需要的。

这里是创建圆角矩形的可绘制(xml)文件。 Round _ rect _ form. xml

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


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


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


</shape>

这里的布局文件: my _ lay.xml

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/round_rect_shape"
android:orientation="vertical"
android:padding="5dp" >


<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Something text"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="#ff0000" />


<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content" >


<requestFocus />
</EditText>
</LinearLayout>

在上面的代码中，LinearLayout 具有背景(这是创建圆角矩形的关键角色)。 所以你可以在 LinearLayout 中放置任何视图，比如 TextView，EditText... 来查看所有的圆形矩形背景。

小开 
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle">
<solid android:color="@color/colorAccent" />
<corners
android:bottomLeftRadius="500dp"
android:bottomRightRadius="500dp"
android:topLeftRadius="500dp"
android:topRightRadius="500dp" />
</shape>

现在，在要使用这个形状的元素中，只需添加: android:background="@drawable/custom_round_ui_shape"

创建一个名为“ custom_ round _ ui _ form”的可绘制 XML

小开

右键单击这个可绘制的文件，然后创建一个新的布局 xml 文件，例如，命名为 ton _ backound.xml。 然后复制粘贴以下代码。 你可以根据你的需要改变它。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="14dp" />
<solid android:color="@color/colorButton" />
<padding
android:bottom="0dp"
android:left="0dp"
android:right="0dp"
android:top="0dp" />
<size
android:width="120dp"
android:height="40dp" />
</shape>

现在你可以用了。

<Button
android:background="@drawable/button_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
小开

圆形矩形使用 CardView。CardView 提供了更多的功能，如 cardCornerRadius，cardBackoundColor，carel蔼 ation 等等。CardView 使 UI 比自定义圆角矩形更适合绘制。

小开 
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/white" />
<corners android:radius="4dp" />
</shape>
小开

您只需要在可绘制文件夹中定义一个新的 xml 背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="enter_your_desired_color_here" />
<corners android:radius="enter_your_desired_radius_the_corners" />
</shape>

在此之后，只需将它包含在您的 TextView 或 EditText 中 通过在背景中定义它。

<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="80dp"
android:background="YOUR_FILE_HERE"
Android:layout_weight="1"
android:gravity="center"
android:text="TEXT_HERE"
android:textSize="40sp" />
小开

我尝试了几种方法，可以说还应该添加 视图(API > = 21) :

textView.clipToOutline = true

在这种情况下，你不会得到一个低于 TextView的矩形选区(在某些设备上会出现这种情况) ，如下所示:

enter image description here

有些人用 CardView包装一个矩形。它可以工作，但在一些老设备上，如果半径足够大，它会显示错误的角落:

enter image description here

在 TextView中，您还可以添加以下属性:

android:theme="@style/Theme.MaterialComponents.Light"

当点击浅灰色文本标签时，它会显示深灰色选区。

小开 
    paint.apply {
strokeWidth = lineWidth.toFloat()
style = Paint.Style.STROKE
color = lineColor
***strokeCap = Paint.Cap.ROUND***
}

提交答案