Как нарисовать прямоугольник с закругленными углами в пользовательском интерфейсе Android?


144

Мне нужно нарисовать прямоугольник с закругленными углами в пользовательском интерфейсе Android. Было бы полезно иметь такой же скругленный прямоугольник для TextViewи EditText.


Взгляните на это обсуждение stackoverflow.com/questions/3646415/…
Kartik Domadiya

по крайней мере, вы должны поместить картинку .. потому что, если кто-то ищет тот же вопрос, его будет легко понять.
Himanshu Mori

Ответы:


222

В вашем макете 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определить радиус для каждого угла.


Они не просили градиента. Не знаю, почему это принятый ответ.
Джерри Дестремпс

Я предполагаю, что он был принят, потому что он был там за несколько месяцев до большинства других ответов. Я не занимался разработкой Android в течение многих лет, поэтому я понятия не имею, как можно изменить или обновить ответ сейчас, чтобы удалить градиент, хотя я предполагаю, что тег "solid", используемый в ответе Noundla Sandeep ниже, вероятно, подойдет. Хитрость.
Андреасс

125

Думаю, это вам как раз и нужно.

Здесь можно рисовать (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, чтобы видеть фон как круглый прямоугольник для всех.


1
Есть ли способ абстрагироваться от этого? Я хочу иметь возможность использовать android:background="@drawable/round_rect_shape"в своем файле styles.xml, но использовать разные цвета фона, установив другое свойство. Есть ли какой-либо вариант, кроме создания идентичного рисунка для каждого цвета?
Карл

Таким способом можно сделать округлую любую форму!
Sabri Meviş 09

22

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



       }  
    }
}

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"

Создайте новый XML в файле с именем custom_round_ui_shape


1

Используйте CardView для круглого прямоугольника. CardView предоставляет больше функций, таких как cardCornerRadius, cardBackgroundColor, cardElevation и многие другие. CardView делает пользовательский интерфейс более подходящим, чем пользовательский круглый прямоугольник с возможностью рисования.


1

Вы можете просто определить новый фон 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" />

0

Щелкните правой кнопкой мыши по объекту для рисования и создайте новый XML-файл макета, например, с именем button_background.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"/>

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

Пожалуйста, дайте объяснение своему ответу
исполняемый
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.