如何在android中创建像Iphone Edittext框一样的Gradient

时间:2012-07-25 07:09:51

标签: android xml android-layout

以下是iPhone EditText控件的示例。:

enter image description here

如何在Android中创建相同的控件?

3 个答案:

答案 0 :(得分:37)

Three kinds of EditText backgrounds

基本上,我认为三种方式可以做你想做的事。

第一种方法:

第一个是,Akki says,制作一个9补丁,它完全复制了你想要使用的渐变填充框(未指定的其他平台)。这使您的应用在两个平台上看起来尽可能接近完全相同。

这是一个由上面的屏幕截图制作的9补丁。 (这是res/drawable-*dpi/rounded_text_field.9.png

Nine-patch background

第二种方法:

第二种是使用可缩放的原生绘图功能获得相同的效果。这看起来并不完全一样,但可以提供更平滑的结果。

以下是使用渐变填充生成圆角矩形图像的一些代码。 (这是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种不同密度的位图容易得多。

Gradient background with 8dp radius corners.

第3种方法:

第三种方法是让平台成为它的意图,并在自己的范例内尽可能地展望它。这样做的好处是,在不同版本的操作系统上,即使系统主题发生变化,您的应用也会与系统的其他部分无缝融合。

这是在Gingerbread上运行完全相同代码的默认EditText。它在Holo主题设备上看起来很不合适(例如我用来创建第一个屏幕截图的Jellybean驱动的平板电脑),反之亦然。

EditText on Gingerbread

作为参考,这里是包含所有三个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>

答案 1 :(得分:1)

您所要做的就是创建一个小的九个补丁图像,并将该图像设置为EditText的背景。这是图像的一个例子

image

here is九个补丁图片的工作原理

答案 2 :(得分:0)

我不确定你是否可以这样做,但你可以像背景一样搜索iPhone。搜索“iPhone模具” PS:我也有一个疯狂的客户在他的Android应用程序中想要iPhone设计,我认为这样做是完全荒谬的。