Android应用程序的用户界面设计

  • 所需知识:XML,Java
  • 要求:Eclipse,Android Developer Tool,图像编辑器(如Photoshop)
  • 项目时间:大约30分钟到一个小时
  • 项目文件

有时候就是这种情况Android的应用程序似乎没有得到设计师的热爱和关注。但Android提供了一种出色的机制,可以为您的用户界面设置样式,蒙皮和主题。因此,考虑到这一点,让我们来看看如何让您的应用脱颖而出。最好的一点,几乎所有这一切都可以使用XML和PNG文件完成。

01.应用背景Drawable

Drawable是几乎可以在屏幕上绘制的任何东西的基类。我们说的是图像,颜色,渐变和一些更复杂的类型,这些类型只会影响它们被包裹的其他绘图(例如,剪切和旋转)。 Drawable通常以图像文件,XML文件的形式出现,或者通过代码创建。

为了更好地了解如何使用drawable,我们将看一下为按钮小部件的background属性指定PNG。这会将按钮从默认的Android样式更改为我们自己的自定义样式。

首先,通过从“文件”菜单中选择“导入”选项,将“背景”项目导入Eclipse。您需要通过Android SDK Manager下载Android 2.2 SDK才能运行该项目。如果这是您第一次将Android SDK与ADT和Eclipse一起使用,请按照以下页面上的说明启动并运行:developer.android.com/sdk/eclipse-adt.html

如果你运行项目,你会看到一个标准的灰色按钮,还有一个闪亮的绿色按钮。以下是我们如何指定用于按钮的不同背景:

机器人:layout_width = “WRAP_CONTENT”
机器人:layout_height = “WRAP_CONTENT”
Android:text =“绿色按钮”
android:background =“@ drawable / btn_green”/>

任何时候你使用“@绘制/文件名“Android会查看所有”可绘“项目中的文件夹,直到找到与其运行的设备最匹配的文件夹。请注意,当您按下按钮时,我们不再看到不同的推动状态。我们将在后面讨论如何提供不同的状态选择

02. 9-Patch

一些平台具有将单个图像拼接以应用于更大元素的概念,使得仅中间被拉伸。这意味着可能是圆形的角不会拉伸并且看起来模糊或像素化。在CSS3中,这称为border-image,在Flash中称为9-slice。

Android有一个名为“9-Patch”的高级版本。让我们来看看我们的绿色按钮在使用和不使用9-patch时都会按比例放大。

有一个名为draw9patch的应用程序可以通过SDK找到,旨在帮助创建这些。

The draw9patch app

Draw9patch应用程序

在左侧,您可以看到我们的PNG的放大版本,边框周围有黑线。您还可以看到覆盖浅绿色线重叠的横截面;这是将扩展的图像的一部分。在这种情况下,它只是一个像素。在右侧,我们看到了PNG的各种缩放版本。注意角落不会拉伸和扭曲,这是由于单个绿色像素被拉伸以填充空间。

要使用9补丁,只需在图像周围添加1像素的透明边框即可。然后绘制沿顶部和左边缘运行的实线黑线以指示哪些部分应该伸展,另外两条黑线右下方以指示内容可以放置的位置(确保在绘制这些线条时关闭消除锯齿,它将会如果边框中的任何像素不是100%黑色或透明,则抱怨。最后,使用“.9.png”扩展名保存文件。 Android会自动假设它是基于扩展名的9补丁。

这意味着对于一个按钮,我们可以使用单个PNG来定义它的外观和内容(例如文本或图标)出现在其中的位置!定义内容区域的能力还意味着您可以为内容创建一个偏心区域,在内容居中时忽略说,一个阴影。

03.多个PPI屏幕

您正在查看的屏幕可能正在运行100 PPI(为了争论,当您阅读PPI时,每英寸像素数,我们可以将其视为DPI,每英寸点数)。所以在100 PPI时,如果你靠近屏幕,你可以很容易地看到各个点。三星Galaxy Nexus的价格高达316 PPI;像素被密集地堆积在一个更小的空间中,使其具有清晰的印刷质量,但这带来了挑战。

在设计屏幕时,DPI独立性是一个关键概念;无论是手机,电脑,平板电脑还是电视。如果笔记本电脑屏幕上的图标为48x48像素,则其物理尺寸可能为半英寸宽。在高DPI(HDPI)手机上,像素被挤得更紧,相同的图标看起来不到四分之一英寸宽。你可以想象一个像小方块一样的图标难以按下,那么我们如何迎合这种广泛的屏幕呢?

A range of icons that will appear the same physical size on low, medium and high-density screens

一系列图标在低,中和高密度屏幕上显示相同的物理尺寸

不使用像素或“px”来指定屏幕上元素的宽度和高度,最好使用“dip”(Device Independent Pixel)单位。这与CSS的px单位类似,后者根据设备的DPI自动缩放。正如您在手机上所经历的那样,这就是为什么有些图像看起来很模糊的原因。除文本外,手机浏览器还可将图像的px测量值扩展到原始宽度和高度的两倍,以帮助现有网页无需额外工作。

打开项目“UsingDIPs”以查看我们的指定方式Main.xml布局文件中宽度和高度的单位。


机器人:layout_width = “FILL_PARENT”
机器人:layout_height = “FILL_PARENT”
android:orientation =“vertical”>

机器人:layout_width = “200dip”
机器人:layout_height = “WRAP_CONTENT”
Android:text =“我200蘸宽”/>

在这种布局中,我们有一个宽度为“200dip”的按钮(在MDPI屏幕上为200px,在HDPI屏幕上为1.5x或300px)。如果您在可视化编辑器中打开布局,您会在左上角看到一个带有“3.7in WVGA(Nexus One)”或类似内容的下拉框。您可以在此处切换到各种其他电话屏幕,从LDPI到HDPI。注意按钮宽度如何与整个屏幕保持相同的比例。使用DIP,我们可以确保此按钮在不同设备上具有相同的物理大小,并且它不仅适用于按钮,任何容器或小部件都可以接受DIP大小调整。构建可伸缩布局的另一个关键属性是Layout_weight,通过在孩子之间根据他们的“权重”分享可用空间,作为一种基于百分比的布局,但这超出了本文的范围。

04.多个DPI资产

该主题可能导致设计人员和开发人员之间的混淆总而言之:除非你打印,否则Photoshop中的DPI属性并不重要...所有重要的是宽度和高度(以像素为单位)。作为一项规则,你从1.5倍到中等到高到超高DPI;因此,48x48px图标应设计为72x72像素,以便在HDPI手机(例如Galaxy S2)上显示相同的物理尺寸,并且对于XHDPI(例如Galaxy Nexus)显示为96x96px。

您可以通过将文件放在相关的drawables文件夹中告诉Android要使用哪些资产...绘制,MDPI绘制,华电国际等等。

Android’s resource folders let you include assets for various device profiles

Android的资源文件夹允许您包含各种设备配置文件的资源

在您担心必须设计所有资产的三个版本之前,Android会自动尝试从您提供的任何尺寸为您扩展或缩小资产。创建更大的HDPI版本的资产将简单地改进和清理高分辨率屏幕上的现有资产(您可能希望专注于增强按钮等关键资产,并通过不制作超高分辨率版本来节省背景纹理等文件大小因为这可能是不可察觉的)。

05.选择器:StateListDrawable和ColorStateList

我们刚刚开始深入挖掘Android平台图形功能的强大功能。接下来我们将看看选择器。这些XML文件告诉UI使用不同的drawable,具体取决于窗口小部件的状态。例如,用户是否按下它,是否禁用,选择等等。

我们将采用另一个小部件,Checkbox。如果要导入“选择器”项目,可以运行演示,看看我们如何在多个状态下设置CheckBox的样式:选中,未选中,按下时按下,当然也可以在未选中时按下。还有一些其他可能的状态,例如启用,选择或聚焦(tabbed-to),但是现在这四个对我们来说已经足够了。

A wood-style checkbox

木制复选框

随着机器人:背景,CheckBox小部件有另一个名为的属性机器人:按钮。像背景一样,这可以设置为drawable。在这种情况下,我们不是只指定一个PNG文件,而是指定一个StateListDrawableXML文件。

复选框StateListDrawable




机器人:抽拉= “@绘制/ btn_check_on_pressed”/>

机器人:抽拉= “@绘制/ btn_check_off_pressed”/>

机器人:抽拉= “@绘制/ btn_check_on”/>


当我们按下复选框时,您可能会注意到文本也会改变颜色。这是一个ColorStateList,您可以在/ Res / Color /文件夹中找到它。我们只是设置了机器人:文字颜色属性为“@ color / checkbox_text_color”,而不是简单的十六进制值,剩下的就是它。

代码中出现的木制复选框:


机器人:layout_width = “FILL_PARENT”
机器人:layout_height = “FILL_PARENT”
机器人:方向=“垂直”

android:background =“#ffffffff”>
机器人:ID = “@ + ID / CheckBox1”
机器人:layout_width = “WRAP_CONTENT”
机器人:layout_height = “WRAP_CONTENT”
机器人:文字=“复选框”
机器人:按钮= “@绘制/ Checkbox_button”
android:textColor =“@ color / checkbox_text_color”/>

06.样式和主题

除了drawables,我们还有样式和主题的概念。这对于使用CSS的人来说应该是熟悉的,但在Android中我们使用XML来定义样式,而样式可以从其他“父”样式继承。样式适用于小部件,主题适用于活动或应用程序,主题是样式的集合。

打开“样式”项目以查看此代码的代码。我们首先在/ res / values文件夹中创建一个“styles.xml”文件。 Android将在这里查看我们的样式。

我们的WarningTextView样式:




在XML中,我们定义了一个名为的样式WarningTextView,我们继承了父内置的Android风格Widget.TextView。然后我们设置覆盖四个属性,包括背景,文本颜色和大小,以及内部填充。通过使用style属性可以很容易地将此样式应用于任何窗口小部件(请注意,style属性不以“android:”为前缀)。

将自定义样式应用于TextView:

风格= “@风格/ WarningTextView”
机器人:layout_width = “FILL_PARENT”
机器人:layout_height = “WRAP_CONTENT”
Android:text =“一些严重的话”/>

随着风格的连接,这里的外观如何,以其华丽的荣耀。

Comparing a standard TextView with a custom-styled TextView

将标准TextView与自定义样式的TextView进行比较

使用样式,您几乎可以覆盖任何属性并将其应用于多个小部件,以节省您的时间和精力。此外,您可以通过为活动中的窗口小部件设置默认样式来覆盖组件的所有实例。

为此,我们需要指定一个主题。在“主题”项目中,您将在这次找到styles.xml中定义的几种样式。

定义主题以设置应用中所有按钮的样式:





此主题指定用于所有按钮的按钮样式。为了将这个主题应用到我们的应用程序,我们必须编辑项目的AndroidManifest.xml并为应用程序标记或单个指定一个主题属性活动

将主题应用于整个应用程序:

机器人:图标= “@绘制/ Ic_launcher”
android:label =“@ string / app_name”android:theme =“@ style / MyTheme”>

07.结束

我们已经看到了9-patch如何为可扩展的图形做出贡献,但是一个鲜为人知的事实是9-patch实际上支持25个切片!您只需在每侧添加两条黑色线条,即可缩放两个区域。这意味着您可以在图像中心放置一个不受缩放影响的图标,从而降低布局的复杂性并提高应用程序的性能。

如果您真的想了解Android如何使用drawable来为其小部件设置外观,请深入了解您在机器上提取的Android SDK文件夹并查找SDK /平台/ Android的8 /数据/ RES /绘制,华电国际文件夹(8是SDK版本,在这种情况下是Android 2.2)。找到名为“btn_default_normal.9.png”的文件,这是我们之前替换的默认按钮。请记住,HDPI文件夹包含MDPI文件夹中所有内容的高分辨率版本。无论哪种方式,这些文件都为创建自己的皮肤提供了宝贵的起点。

在这里,您可能还想查看Android SDK res文件夹中的styles.xml和themes.xml文件。这些提供了有关标准小部件如何全部样式的有价值信息。另外我们有字体。默认情况下,“字体”属性只有一些有限的选项,但通过代码,您可以加载和使用自定义字体文件的组合TypeFace.createFromAsset()TextView.setTypeface()

在过去,Android一直困扰着设备制造商添加他们自己的自定义主题,这些主题可能使您的应用看起来难以预测,从HTC的白色按钮到三星的黑色按钮。使用Android 4.0,开发人员可以指定新的Holo主题,并且知道无论制造商的自定义主题如何,它都不会在设备上进行更改。无论哪种方式,如果您已经决定要自定义小部件的样式,那么您应该全力以赴,这样您就会知道它看起来完全符合您的要求,并且从标准应用程序中脱颖而出。

理查德是Valis Interactive的创始人,专注于移动和Web应用程序开发。

喜欢这个?阅读这些!



翻译字数超限