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.

MAMurali
źródło
Spójrz na tę dyskusję stackoverflow.com/questions/3646415/…
Kartik Domadiya
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.

Andreass
źródło
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.

Noundla Sandeep
źródło
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);



       }  
    }
}
learn_andrd
źródło
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”

Uttam Meerwal
źródło
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.

Jack Franchi
źródło
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" />
Ibrahim117
źródło
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"/>
M Karimi
źródło
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>
Artemiy
źródło
Proszę podać wyjaśnienie swojej odpowiedzi
plik wykonywalny