web-dev-qa-db-ja.com

角の丸いEditTextを作成する方法

角が丸いEditTextを作成する方法はありますか？

androidandroid-edittextviewsrounded-corners
253
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>
525
Cristian

これは、1つの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>

その後、background属性をedittext_rounded_corners.xmlファイルに設定します。

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

これを試してください、

1. Drawableにrounded_edittext.xmlファイルを作成します。

    <?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ファイルにEditTextの背景を適用します

                <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

Norfeldtの回答をありがとう。内側の影の効果を改善するために、グラデーションを少し変更しました。

<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. EditText背景を構成する9個のパッチからなるPNG画像をすべてクローンします（SDKにあります）。
  2. より丸みのある角を持つようにそれぞれを修正する
  3. それらのStateListDrawable背景を1つのEditTextに結合するXML Drawableリソースを複製し、より丸みのある9パッチの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の4つの角度を曲げるだけです。

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