如何在Android中创建类似iPhone EditText框的渐变效果

Question

这里是一个关于 iPhone 中 EditText 控件的示例:

如何在 Android 上创建相同的控件呢？

- Amit kumar

---

不确定为什么你想在Android上复制iPhone的用户体验，这样看起来会完全不协调。 - Franci Penov

最简单的方法可能是直接询问制作图形的人在你使用的 .PNG 文件中包含渐变。 - Slickelito

Answer 1

基本上，我看到了三种方法来实现你想要的效果。

第一种方法：

第一种方法是如Akki所说的，创建一个9-patch图像，这个图像完全复制了你想要使用的从（未指定其他平台）获取的渐变填充框。这使得你的应用程序在两个平台上尽可能地看起来完全相同。

这里是从您上面的截图中制作的9-patch图像。 (这是res/drawable-*dpi/rounded_text_field.9.png)

第二种方法：

第二种方法是使用可伸缩的本地绘图能力来获得相同的效果。这不会完全相同，但提供的结果可能更加流畅。

以下是生成带有渐变填充的圆角矩形图像的代码。(这是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>

实际上，我撒谎了。在我的原始屏幕截图中，角落太大了，所以我将角半径从16dp减小到8dp。现在看起来好多了，不是吗？而且比在4种不同密度的位图中微调要简单得多。

第三种方法：

第三种方法是让平台保持自己的风格，尽可能地展现出最佳效果。这样做的好处是，在操作系统的不同版本上，您的应用程序将与系统的其余部分无缝融合，即使系统主题发生变化也是如此。

这里是在Gingerbread上运行完全相同代码的默认EditText。它在类似于Jellybean的平板电脑上（我用它创建了第一个屏幕截图）会显得非常不协调，反之亦然。

供参考，这里是包含所有三个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>

- Sparky

---

Sparky是正确的，虽然你可以复制iOS控件的外观和感觉，但强烈建议你使用符合Android平台外观和感觉的控件。这为你的用户提供了在Android平台上其他应用程序中更一致的体验。 - Charles Harley

有关创建Android UI的最佳实践，请参阅Android Design页面。http://developer.android.com/design - Sparky

Answer 2

你所需要做的就是创建一个小的九宫格图片，并将该图片设置为你的EditText的背景。这里有一个图片示例。

这里是关于九宫格图片如何工作的介绍

- Akram

Answer 3

我不确定你是否能够这样做，但你可以搜索类似于 iPhone 的背景。搜索“iPhone 模板”。 PS：我也有一个疯狂的客户，他希望在他的 Android 应用程序中拥有 iPhone 类似的设计，我认为这完全是荒谬的。

- Vinay W