android - AndroidでiPhoneEdittextボックスのようなグラデーションを作成する方法

Question

iPhone EditTextコントロールの例を次に示します。

Androidで同じコントロールを作成するにはどうすればよいですか？

Answer 1

基本的に、あなたが望むことを行うには3つの方法があります。

最初のアプローチ:

1つ目は、Akkiが言うように、使用したいグラデーションで満たされたボックスを正確に複製する9パッチを作成することです（他のプラットフォームは指定されていません）。これにより、アプリが両方のプラットフォームでまったく同じに見えるようになります。

上記のスクリーン ショットから作成した 9 パッチを次に示します。(これはres/drawable-*dpi/rounded_text_field.9.png)

2番目のアプローチ:

2 つ目は、スケーラブルなネイティブ描画機能を使用して同じ効果を得ることです。これはまったく同じようには見えませんが、ほぼ間違いなくよりスムーズな結果が得られます。

グラデーション塗りつぶしを使用して角丸四角形の画像を生成するコードを次に示します。(これはres/drawable/gradientbg.xml)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"
>
<corners android:radius="8dp"/>
<stroke android:width="2dp"
    android:color="#444"/>
<gradient 
   android:startColor="#888"
   android:centerColor="#fff"
   android:endColor="#fff"
   android:type="linear"
   android:angle="270"
   />
</shape>

実は嘘をつきました。元のスクリーン ショットでは、角が大きすぎるため、角の半径を 16 dp から 8 dp に減らしました。これが今の様子です。かなり改善されましたね。4 つの異なる密度でビットマップを微調整するよりもはるかに簡単です。

3番目のアプローチ:

3 番目のアプローチは、プラットフォームをそのままにし、独自のパラダイム内でできる限り最高の外観にすることです。これには、OS の異なるバージョンで、システムのテーマが変更されても、アプリがシステムの残りの部分とシームレスに融合するという利点があります。

EditTextこれは、Gingerbread でまったく同じコードを実行するデフォルトです。Holo をテーマにしたデバイス (最初のスクリーンショットを作成するために使用した Jellybean を搭載したタブレットなど) ではかなり場違いに見えますが、その逆も同様です。

参考までに、3 つの EditText をすべて含むレイアウトを次に示します。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="32dp"
android:orientation="vertical"
 >
<EditText
    android:id="@+id/editText1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="24dp"
    android:layout_marginTop="24dp"
    android:padding="12dp"
    android:gravity="center"
    android:background="@drawable/rounded_text_field"
    android:inputType="text"
    android:textColor="@android:color/black"
    android:text="9-patch background." >
    <requestFocus />
</EditText>
<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="24dp"
    android:layout_marginTop="24dp"
    android:padding="12dp"
    android:gravity="center"
    android:background="@drawable/gradientbg"
    android:inputType="text"
    android:textColor="@android:color/black"
    android:text="Gradient background." />
<EditText
    android:id="@+id/editText2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="24dp"
    android:layout_marginTop="24dp"
    android:padding="12dp"
    android:gravity="center"
    android:inputType="text"
    android:text="Default background." />
</LinearLayout>

Answer 2

あなたがしなければならないのは、小さなナインパッチ画像を作成し、その画像をあなたの背景に設定することEditTextです. ここに画像の例があります

9 つのパッチ イメージがどのように機能するかを次に示します。

Answer 3

それができるかどうかはわかりませんが、iPhone のような背景を検索できます。「iPhone ステンシル」を検索してください PS : 私も、Android アプリで iPhone のようなデザインを望んでいるクレイジーなクライアントを抱えています。