Jak narysować zaokrąglony prostokąt w interfejsie użytkownika Androida?


141

Muszę narysować zaokrąglony prostokąt w interfejsie użytkownika Androida. Posiadanie tego samego zaokrąglonego prostokąta dla TextViewi EditTextrównież byłoby pomocne.



przynajmniej umieść obrazek .. bo jak ktoś szuka tego samego pytania to będzie to łatwe do zrozumienia.
Himanshu Mori

Odpowiedzi:


215

W pliku XML układu wykonaj następujące czynności:

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

Zmieniając android:radiusmożna zmienić wielkość „promienia” narożników.

<solid> służy do określenia koloru rysowanego.

Można użyć zastąpić android:radiusz android:bottomLeftRadius, android:bottomRightRadius, android:topLeftRadiusi android:topRightRadiusaby określić promień na każdym rogu.


Nie prosili o gradient. Nie wiem, dlaczego jest to akceptowana odpowiedź.
Jerry Destremps

Wydaje mi się, że został zaakceptowany, ponieważ był tam kilka miesięcy przed większością innych odpowiedzi. Od lat nie tworzyłem Androida, więc nie mam pojęcia, jak można teraz zmienić lub zaktualizować odpowiedź, aby usunąć gradient, chociaż domyślam się, że znacznik „stały” użyty w poniższej odpowiedzi Noundla Sandeep prawdopodobnie by działał sztuczka.
Andreass

125

Myślę, że to jest dokładnie potrzebne.

Tutaj plik do rysowania (xml), który tworzy zaokrąglony prostokąt. 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>

Tutaj plik układu: 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>

-> W powyższym kodzie, LinearLayout mający tło (to jest kluczowa rola, jaką należy umieścić w celu utworzenia zaokrąglonego prostokąta). Możesz więc umieścić dowolny widok, taki jak TextView, EditText ... w tym LinearLayout, aby wyświetlić tło jako okrągły prostokąt dla wszystkich.


1
Czy jest sposób, aby to ująć? Chcę móc używać android:background="@drawable/round_rect_shape"w moim styles.xml, ale używać innych kolorów tła, ustawiając inną właściwość. Czy jest jakaś opcja poza stworzeniem identycznego rysunku dla każdego koloru?
karl

W ten sposób możesz zaokrąglić dowolny kształt!
Sabri Meviş

22

W programie monodroidmożesz to zrobić dla zaokrąglonego prostokąta, a następnie zachować go jako klasę nadrzędną editboxi dodać inne funkcje układu.

 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>

Teraz, w którym elemencie chcesz użyć tego kształtu, po prostu dodaj: android:background="@drawable/custom_round_ui_shape"

Utwórz nowy plik XML do rysowania o nazwie „custom_round_ui_shape”


1

Użyj CardView dla Round Rectangle. CardView zapewnia więcej funkcji, takich jak cardCornerRadius, cardBackgroundColor, cardElevation i wiele innych. CardView sprawia, że ​​interfejs użytkownika jest bardziej odpowiedni niż niestandardowy okrągły prostokąt do rysowania.


1

Możesz po prostu zdefiniować nowe tło XML w folderze drawables

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

Następnie umieść go w swoim TextView lub EditText, definiując go w tle.

<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

Kliknij prawym przyciskiem myszy element rysunkowy i utwórz nowy plik XML układu w nazwie, na przykład button_background.xml. następnie skopiuj i wklej następujący kod. Możesz to zmienić w zależności od potrzeb.

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

Teraz możesz go używać.

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

Proszę podać wyjaśnienie swojej odpowiedzi
plik wykonywalny
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.