角が丸いEditText
を作成する方法はありますか?
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>
次のようになります。
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>
これは、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"/>
これを試してください、
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.このような出力が得られます
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>
明るい背景のレイアウトで見栄えがします。
私の考えでは、角が丸くなっています。
より丸みを帯びたものにしたい場合は、次のことが必要になります。
EditText
背景を構成する9個のパッチからなるPNG画像をすべてクローンします(SDKにあります)。StateListDrawable
背景を1つのEditText
に結合するXML Drawable
リソースを複製し、より丸みのある9パッチのPNGファイルを指すようにそれを変更します。StateListDrawable
をEditText
ウィジェットの背景として使用しますあなたは角だけが全体の端ではなく曲がるべきであることを望むなら、それから以下のコードを使ってください。
<?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つの角度を曲げるだけです。
他の答えを追加するために、私は丸みを帯びた角を達成するための最も簡単な解決策はあなたの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>