如何创建渐变像Android的iPhone EDITTEXT盒Android、iPhone、EDITTEXT

2023-09-05 09:50:14 作者:xc温柔港▃_

这里的 iPhone 的EditText 控制的一个例子:

Here's an example of the iPhone EditText control.:

我怎样才能创建同一控制机器人?

How can I create the same control in Android?

推荐答案

基本上,我看到的三种方式以做你想要的。

Basically, I see three ways to do what you want.

首先是,作为Akki说,使9补丁完全复制你想要的(未指定的其他平台)使用渐变填充对话框。这可让您的应用程序看起来尽可能接近完全相同的在这两个平台。

The first is, as Akki says, make a 9-patch that exactly duplicates the gradient-filled box that you want to use from (unspecified other platform). This lets your app look as close as possible to exactly the same on both platforms.

下面是一个9补丁制作从屏幕截图中。 (这是 RES / drawable- * DPI / rounded_text_field.9.png

Here is a 9-patch made from your screen shot above. (This is res/drawable-*dpi/rounded_text_field.9.png)

二是使用可扩展原生的绘图功能,以达到同样的效果。这会不会长得一模一样,但可以说是提供了更流畅的效果。

The second is to get the same effect using scalable native drawing capabilities. This won't look exactly the same, but delivers arguably smoother results.

下面是一些code生成具有渐变填充一个圆角矩形图像。 (这是 RES /绘制/ gradientbg.xml

Here is some code to generate a rounded-rect image with a gradient fill. (This is 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个不同密度调整位图容易得多。

Actually, I lied. In my original screen shot, the corners are much too big, so I reduced the corner radius from 16dp to 8dp. Here's what it looks like now. Much improved, don't you think? And a lot easier than tweaking a bitmap in 4 different densities.

第三种方法是让这个平台是什么会,并期待最好的,它可以在自己的范式。这具有的优点是,在不同版本的操作系统,你的应用将无缝混合与系统的其余部分,甚至当系统主题的变化。

The third approach is to let the platform be what it will, and look the best that it can within its own paradigm. This has the advantage that, on different versions of the OS, your app will blend seamlessly with the rest of the system, even as the system theme changes.

下面是默认的EditText 运行姜饼完全相同的code。它看起来pretty的格格不入一个全息主题的设备上(如杰利贝恩供电的平板电脑,我用来创建第一张截图),反之亦然。

Here's the default EditText running the exact same code on Gingerbread. It would look pretty out of place on a Holo-themed device (such as the Jellybean-powered tablet that I used to create the first screenshot), and vice-versa.

有关参考,下面是一个包含所有三个EditTexts布局。

For reference, here is the layout that contains all three EditTexts.

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