【问题标题】:how create Gradient like Iphone Edittext box in android如何在android中创建像Iphone Edittext框一样的渐变
【发布时间】:2012-07-25 07:09:51
【问题描述】:

这是iPhone EditText 控件的示例。:

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

【问题讨论】:

  • 不确定为什么要在 Android 上复制 iPhone UX。它看起来完全不合适。
  • 最简单的方法可能是让制作图形的人在您使用的 .PNG 中包含渐变。

标签: android xml android-layout


【解决方案1】:

基本上,我看到三种方法来做你想做的事。

第一种方法:

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

这是根据您上面的屏幕截图制作的 9 补丁。 (这里是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。它在以 Holo 为主题的设备(例如我用来创建第一个屏幕截图的 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 是对的,虽然您可以复制 iOS 控件的外观和感觉,但强烈建议您使用与 Android 平台外观和感觉相匹配的控件。这为您的用户在 Android 平台上的其他应用程序中提供了更一致的体验。
  • 有关创建 Android UI 的最佳实践,请参阅 Android 设计页面。 developer.android.com/design
【解决方案2】:

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

还有here is 九个补丁图像的工作原理

【讨论】:

    【解决方案3】:

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-05-28
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-10-19
      相关资源
      最近更新 更多