Köşeleri yuvarlatılmış EditText nasıl oluşturulur?


Yanıtlar:


566

CommonsWare tarafından yazılandan daha kolay bir yol var. Çizimin EditTextçizilme şeklini belirten çekilebilir bir kaynak oluşturmanız yeterlidir :

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/rounded_edittext.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

Ardından, düzeninizdeki bu çekmeceye bakın:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:padding="5dip"
    android:background="@drawable/rounded_edittext" />
</LinearLayout>

Gibi bir şey alacaksınız:

alternatif metin

Düzenle

Mark'ın yorumuna dayanarak, aşağıdakiler için farklı durumlar oluşturma yönteminizi eklemek istiyorum EditText:

<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_states.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item 
     android:state_pressed="true" 
     android:state_enabled="true"
        android:drawable="@drawable/rounded_focused" />
    <item 
     android:state_focused="true" 
     android:state_enabled="true"
        android:drawable="@drawable/rounded_focused" />
    <item 
     android:state_enabled="true"
        android:drawable="@drawable/rounded_edittext" />
</selector>

Bunlar eyaletler:

<?xml version="1.0" encoding="utf-8"?>
<!-- res/drawable/rounded_edittext_focused.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
 <solid android:color="#FFFFFF"/>
 <stroke android:width="2dp" android:color="#FF0000" />
    <corners
     android:bottomRightRadius="15dp"
     android:bottomLeftRadius="15dp"
  android:topLeftRadius="15dp"
  android:topRightRadius="15dp"/>
</shape>

Ve ... şimdi, EditTextşöyle görünmeli:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
<EditText  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    android:background="@drawable/rounded_edittext_states"
    android:padding="5dip"/>
</LinearLayout>

15
Ancak çözümünüz tüm durumlar için aynı çekmeceyi kullanır. Düzenli EditTextvarsayılan yanında odaklı engelliler, preslenmiş ve seçilen farklı geçmişleri vardır. Özellikle, Google TV gibi dokunmatik ekranları olmayan bazı Android cihazlar alırsak, ileriye yönelik önemli olabilir.
CommonsWare

Bu harika! Cihazda iyi çalışıyor ancak yuvarlak grafik kutusunu eklediğimde 'Grafik Mizanpaj' görünümünün etkinliğimi göstermesini engelliyor. Hata günlüğü bana bir 'UnsupportedOperationException: null' veriyor. Herhangi bir fikir?
Ben Clayton

Bilmek güzel ... aslında nasıl düzelteceğimi bilmiyorum. Bir Eclipse'nin ADT hatası sanırım.
Cristian

mükemmel cevap. En son ADT ile yapmaya çalıştığımda, hiçbir şey olmuyor ama UI tasarım ekranı biraz gölgeli hale geliyor. Ama mükemmel cevap. Patronumdan beni kurtardı :)
Jay Mayu

2
yarıçapınız android:radius4 satır tanımlamak yerine 4 köşenin tümü için kullanılıyorsa
Viswanath Lekshmanan

129

İşte tek bir XML dosyasında aynı çözüm (bazı ekstra bonus kodları ile):

<?xml version="1.0" encoding="utf-8"?>
<!--  res/drawable/edittext_rounded_corners.xml -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true" android:state_focused="true">
    <shape>
        <solid android:color="#FF8000"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />
         <corners
            android:radius="15dp" />
    </shape>
</item>

<item android:state_pressed="true" android:state_focused="false">
    <shape>
        <solid android:color="#FF8000"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />      
        <corners
            android:radius="15dp" />       
    </shape>
</item>

<item android:state_pressed="false" android:state_focused="true">
    <shape>
        <solid android:color="#FFFFFF"/>
        <stroke
            android:width="2.3dp"
            android:color="#FF8000" />  
        <corners
            android:radius="15dp" />                          
    </shape>
</item>

<item android:state_pressed="false" android:state_focused="false">
    <shape>
        <gradient 
            android:startColor="#F2F2F2"
            android:centerColor="#FFFFFF"
            android:endColor="#FFFFFF"
            android:angle="270"
        />
        <stroke
            android:width="0.7dp"                
            android:color="#BDBDBD" /> 
        <corners
            android:radius="15dp" />            
    </shape>
</item>

<item android:state_enabled="true">
    <shape>
        <padding 
                android:left="4dp"
                android:top="4dp"
                android:right="4dp"
                android:bottom="4dp"
            />
    </shape>
</item>

</selector>

Daha sonra arka plan niteliğini edittext_rounded_corners.xml dosyasına ayarlamanız yeterlidir:

<EditText  android:id="@+id/editText_name"
      android:background="@drawable/edittext_rounded_corners"/>

"width" özelliğinde "0.5dp" olarak hata almak geçerli bir biçim değil.
Maveň ツ

Yukarıdaki çözümü kullanmayı denedim ama ne yazık ki, yeni ayarladığımda topRightRadiusve topLeftRadiusdört köşenin tamamı yuvarlandı. Lütfen yardım et. :(
ikartik90

30

Bunu dene,

1. Drawable'ınızda rounded_edittext.xml dosyası oluşturun

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle" android:padding="15dp">
        <solid android:color="#FFFFFF"/>
        <corners
            android:bottomRightRadius="0dp"
            android:bottomLeftRadius="0dp"
            android:topLeftRadius="0dp"
            android:topRightRadius="0dp"/>
        <stroke android:width="1dip" android:color="#f06060" />
    </shape>

2. xml dosyasında EditText için arka plan uygulayın

                <EditText
                android:id="@+id/edit_expiry_date"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="10dip"
                android:background="@drawable/rounded_edittext"
                android:hint="@string/shop_name"
                android:inputType="text"/>

3. böyle çıktı alacaksınız

resim açıklamasını buraya girin


1
Sachin, çıkış görüntünüzde, sorgulayan kişinin istediği gibi yuvarlatılmamış kare köşeler gösterilir. Bu, kutunun bir taslağa sahip olmasını sağlamanın iyi bir yolu olabilir.
JesseBoyd

2
@JesseBoyd, Endişeniz doğru ama bu xml dosyasındaki rounded_edittext, tüm Radius değerlerini gereksiniminize göre değiştirin.
sachin pangare

17

Norfeldt'ün cevabı için teşekkürler. Daha iyi bir iç gölge efekti için gradyanında küçük bir değişiklik yaptım.

<item android:state_pressed="false" android:state_focused="false">
    <shape>
        <gradient
            android:centerY="0.2"
            android:startColor="#D3D3D3"
            android:centerColor="#65FFFFFF"
            android:endColor="#00FFFFFF"
            android:angle="270"
            />
        <stroke
            android:width="0.7dp"
            android:color="#BDBDBD" />
        <corners
            android:radius="15dp" />
    </shape>
</item>

Açık renkli bir düzende harika görünüyor ..

resim açıklamasını buraya girin


7

Düşünce ile, zaten köşeleri yuvarlatılmış durumda.

Daha yuvarlatılmasını istiyorsanız, yapmanız gerekenler:

  1. EditTextArka planı oluşturan dokuz yama PNG resimlerinin tümünü klonlayın (SDK'nızda bulunur)
  2. Daha yuvarlak köşeler için her birini değiştirin
  3. StateListDrawableBu EditTextarka planları tek bir şekilde birleştiren XML kaynağını klonlayın ve Drawabledaha yuvarlak dokuz yama PNG dosyalarınızı gösterecek şekilde değiştirin
  4. Widget'ınızın StateListDrawablearka planı olarak bu yeniyi kullanınEditText

3

Eğer sadece köşe tüm sonu değil eğri istiyorsanız, aşağıdaki kodu kullanın.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="10dp" />

    <padding
        android:bottom="3dp"
        android:left="0dp"
        android:right="0dp"
        android:top="3dp" />

    <gradient
        android:angle="90"
        android:endColor="@color/White"
        android:startColor="@color/White" />

    <stroke
        android:width="1dp"
        android:color="@color/Gray" />

</shape>

Sadece dört açısını eğri olacak EditText.


2

Sadece diğer cevaplara eklemek için, yuvarlatılmış köşeleri elde etmenin en basit çözümünün aşağıdakileri Edittext'inize arka plan olarak ayarlamak olduğunu buldum.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@android:color/white"/>
    <corners android:radius="8dp"/>

</shape>

2

Malzeme Bileşenleri Kütüphanesi ile özel şekiller çizmekMaterialShapeDrawable için kullanabilirsiniz .

Bir ile EditTextşunları yapabilirsiniz:

    <EditText
        android:id="@+id/edittext"
        ../>

Ardından aşağıdakileri oluşturun MaterialShapeDrawable:

float radius = getResources().getDimension(R.dimen.default_corner_radius);

EditText editText = findViewById(R.id.edittext);
//Apply the rounded corners 
ShapeAppearanceModel shapeAppearanceModel = new ShapeAppearanceModel()
                .toBuilder()
                .setAllCorners(CornerFamily.ROUNDED,radius)
                .build();

MaterialShapeDrawable shapeDrawable = 
            new MaterialShapeDrawable(shapeAppearanceModel);
//Apply a background color
shapeDrawable.setFillColor(ContextCompat.getColorStateList(this,R.color.white));
//Apply a stroke
shapeDrawable.setStroke(2.0f, ContextCompat.getColor(this,R.color.colorAccent));

ViewCompat.setBackground(editText,shapeDrawable);

resim açıklamasını buraya girin

Kütüphanenin 1.1.0 sürümünü gerektirir .

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.