it-swarm.asia

كيفية إنشاء EditText مع زوايا مدورة؟

هل هناك أي طريقة لإنشاء EditText لها زوايا مستديرة؟

252
pixel

هناك طريقة أسهل من الطريقة التي كتبها CommonsWare. فقط قم بإنشاء مورد قابل للفرد يحدد الطريقة التي سيتم بها رسم EditText:

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

بعد ذلك ، فقط قم بالإشارة إلى هذا drawable في التخطيط الخاص بك:

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

سوف تحصل على شيء مثل:

alt text

تصحيح

استنادًا إلى تعليق Mark ، أريد إضافة الطريقة التي يمكنك بها إنشاء حالات مختلفة لـ 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>

هذه هي الولايات:

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

و ... الآن ، يجب أن يبدو EditText:

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

إليك الحل نفسه (مع بعض رموز المكافآت الإضافية) في ملف XML واحد فقط:

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

يمكنك بعد ذلك تعيين سمة الخلفية إلى ملف edittext_rounded_corners.xml:

<EditText  Android:id="@+id/editText_name"
      Android:background="@drawable/edittext_rounded_corners"/>
124
Norfeldt

جرب هذه،

1. إنشاء ملف rounded_edittext.xml في Drawable الخاص بك

    <?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.Apply خلفية ل EditText الخاص بك في ملف XML

                <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. سوف تحصل الانتاج مثل هذا

 enter image description here 

27
sachin pangare

شكرا لإجابة نورفيلدت. لقد قمت بإجراء تغيير طفيف الباحث التدرج للحصول على أفضل تأثير الظل الداخلي.

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

تبدو رائعة في تصميم خفيف الخلفية ..

 enter image description here 

15
Sayka

من خلال طريقة تفكيري ، فقد تم بالفعل تقريب الزوايا.

في حالة رغبتك في التقريب أكثر ، ستحتاج إلى:

  1. قم بنسخ كل صور PNG ذات تسعة أجزاء والتي تشكل خلفية EditText (موجودة في SDK)
  2. قم بتعديل كل منها للحصول على زوايا أكثر تقريبًا
  3. قم بنسخ مورد XML StateListDrawable الذي يجمع بين تلك الخلفيات EditText في Drawable واحد ، وقم بتعديله للإشارة إلى ملفات PNG ذات التسعة تقريبًا
  4. استخدم هذا StateListDrawable الجديد كخلفية لعنصر واجهة المستخدم EditText الخاص بك
7
CommonsWare

إذا كنت تريد فقط الزاوية منحنى لا نهاية كاملة ، ثم استخدم أدناه رمز.

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

سيكون فقط منحنى زاوية EditText.

3
Kirtikumar A.

فقط لإضافة إلى الإجابات الأخرى ، وجدت أن الحل الأبسط لتحقيق الزوايا الدائرية كان تعيين التالي كخلفية ل Edittext الخاص بك.

<?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>
1
A Droid