如何在Android UI中绘制圆角矩形？

Question

我需要在Android UI中绘制一个圆角矩形。 如果TextView和EditText都使用相同的圆角矩形，那也会很有帮助。

- M.A.Murali

---

请查看此讨论 https://dev59.com/3XA65IYBdhLWcg3wxBir - Kartik Domadiya

至少你应该放张图片..因为如果有人正在寻找相同的问题，那么就容易理解了。 - Himanshu Mori

如果您需要更高的准确性，请前往这里：https://stackoverflow.com/questions/65450741/to-draw-rounded-rectangle-in-android。要绘制 Android 中的圆角矩形。 - jujuf1

Answer 1

在你的布局 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:radius 的方式来定义每个角的半径：android:bottomLeftRadius、android:bottomRightRadius、android:topLeftRadius 和 android:topRightRadius。

- Andreass

---

他们没有要求梯度。不知道为什么这个答案被接受了。 - Jerry Destremps

我猜它被接受是因为它比大多数其他答案早几个月就在那里了。我已经好几年没有做过Android开发了，所以我不知道现在如何更改或更新答案以去除渐变，尽管我猜测在Noundla Sandeep的回复中使用的“solid”标签可能会解决问题。 - Andreass

Answer 2

我认为这正是你所需要的。

这里有一个drawable(xml)文件，它创建了一个圆角矩形。 round_rect_shape.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_layout.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具有背景（这是创建圆角矩形的关键）。因此，您可以将任何视图，如TextView、EditText等，放置在该LinearLayout中，以使所有背景呈现为圆角矩形。

- Noundla Sandeep

---

有没有一种抽象的方法？我想在我的styles.xml中使用android:background="@drawable/round_rect_shape"，但是通过设置另一个属性来使用不同的背景颜色。除了为每种颜色创建相同的可绘制对象之外，还有其他选项吗？ - karl

你可以使用这种方法使任何形状变为圆角！ - Sabri Meviş

Answer 3

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



       }  
    }
}

- learn_andrd

Answer 4

<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" 在drawable文件夹中创建一个名为“custom_round_ui_shape”的新XML文件。该文件需要包含您希望自定义的UI形状的代码。

- Uttam Meerwal

Answer 5

右键单击drawable，在名称为button_background.xml的新布局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"/>

- M Karimi

Answer 6

你可以在drawable文件夹中定义一个新的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" />

- ibrhm117

Answer 7

使用CardView来实现圆角矩形。CardView提供了更多的功能，如cardCornerRadius、cardBackgroundColor、cardElevation等等。相比自定义圆角矩形drawable，CardView可以使UI更加合适。

- Dhruv Patel

Answer 8

我尝试了几种方法并可以说，你还应该添加 View.setClipToOutline（API >= 21）：

textView.clipToOutline = true

在这种情况下，您不会像下面这样在某些设备上获得TextView下方的矩形选择：

有些人使用CardView包装一个矩形。这种方法可以工作，但在一些旧设备上，如果圆角的半径足够大，则会显示错误的角：

在 TextView 中，您还可以添加此属性：

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

当单击浅灰色文本标签时，它将显示更暗的灰色选择。

- CoolMind

Answer 9

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

- Artemiy

---

请在您的答案中提供一些解释。 - executable

Answer 10

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

- Alireza Nazari