Cara menggambar persegi panjang bulat di Android UI?


Jawaban:


215

Di layout Anda xml lakukan hal berikut:

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

Dengan mengubah android:radiusAnda dapat mengubah jumlah "jari-jari" dari sudut.

<solid> digunakan untuk menentukan warna yang dapat digambar.

Anda dapat menggunakan menggantikan android:radiusdengan android:bottomLeftRadius, android:bottomRightRadius, android:topLeftRadiusdan android:topRightRadiusuntuk menentukan radius untuk setiap sudut.


Mereka tidak meminta gradien. Tidak tahu mengapa ini diterima jawaban.
Jerry Destremps

Saya kira itu diterima karena sudah ada beberapa bulan sebelum sebagian besar jawaban lain. Saya belum pernah melakukan pengembangan Android selama bertahun-tahun, jadi saya tidak tahu bagaimana jawabannya dapat diubah atau diperbarui sekarang untuk menghapus gradien, meskipun saya menebak tag "solid" seperti yang digunakan dalam balasan Noundla Sandeep di bawah ini mungkin akan melakukan Trik-nya.
Andreass

125

Saya pikir, inilah yang sebenarnya Anda butuhkan.

Di sini file drawable (xml) yang membuat persegi panjang bulat. 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>

Di sini file tata letak: 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>

-> Dalam kode di atas, LinearLayout memiliki latar belakang (Itulah peran kunci untuk membuat persegi panjang bulat). Jadi Anda dapat menempatkan tampilan seperti TextView, EditText ... di LinearLayout untuk melihat latar belakang sebagai persegi panjang bulat untuk semua.


1
Apakah ada cara untuk abstrak ini? Saya ingin dapat menggunakan android:background="@drawable/round_rect_shape"di styles.xml saya, tetapi untuk menggunakan warna latar belakang yang berbeda dengan mengatur properti lain. Apakah ada pilihan selain membuat drawable yang identik untuk setiap warna?
karl

Anda dapat membuat bentuk apa pun bulat dengan cara ini!
Sabri Meviş

22

Di monodroid, Anda bisa melakukannya seperti ini untuk persegi panjang bulat, dan kemudian menjaga ini sebagai kelas induk, editboxdan fitur tata letak lainnya dapat ditambahkan.

 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>

Sekarang, di elemen mana Anda ingin menggunakan bentuk ini tambahkan saja: android:background="@drawable/custom_round_ui_shape"

Buat XML baru di drawable bernama "custom_round_ui_shape"


1

Gunakan CardView untuk Round Rectangle. CardView memberikan lebih banyak fungsi seperti cardCornerRadius, cardBackgroundColor, cardElevation & banyak lagi. CardView membuat UI lebih cocok daripada Draw Round Rectangle kustom.


1

Anda bisa mendefinisikan latar belakang xml baru di folder 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>  

Setelah ini cukup sertakan dalam TextView atau EditText Anda dengan mendefinisikannya di latar belakang.

<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

Klik kanan pada drawable dan buat file xml layout baru dengan nama misalnya button_background.xml. lalu salin dan tempel kode berikut. Anda dapat mengubahnya sesuai kebutuhan Anda.

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

Sekarang kamu bisa menggunakannya.

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

Harap berikan beberapa penjelasan untuk jawaban Anda
dapat dieksekusi
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.