技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> 视觉设计 --> Android UI基本测验：相对布局

Android UI基本测验：相对布局

浏览:2324次  出处信息

    你已经阅读了相对布局在Android中是如何工作的，接下来的测验将测试你新学到的相对布局控件方面的技能，并能巩固你在java编程和Android用户界面设计与开发方面的知识。

准备

    为了准备这个测验，你希望以一个基本的Android程序开始。你只需要在Eclipse中创建一个Android程序然后编辑它的默认活动(Activity)，特别是onCreate()方法，就可以测试你为本次测验写的代码了。

     如果你不明白刚才说的怎么做，那我推荐你们先看一看之前的文章。从一些Android教程开始，比如Android开发简介或Android入门: Getting Started with Fortune Crunch。一旦你掌握了如何创建项目，再回来尝试这个练习。

循序渐进的测验

    这是一个循序渐进地测验。它包含了许多Android开发初学者想要设计和开发程序所必须掌握的技能。通过以下几个难度递进的练习，你可以巩固你在相对布局和Android用户界面设计方面的知识。

步骤0:资源准备

    现在你已经创建了一个合适的Android项目，你需要创建一些用于你的用户界面的资源。

     创建：

  • 创建7个字符串资源，第一种都使用光谱的颜色(“Red”红，“Orange”橙，“Yellow”黄，“Green”绿，“Blue”蓝，“Indigo”青，“Violet”紫)
  • 创建7个颜色资源，每一种都使用光谱的颜色(Red=>#f00, Orange=>#ffa500, Yellow=>#ffff00, Green=>#0f0, Blue=>#00f, Indigo=>#4b0082, Violet=>#ee82ee)
  • 为文本颜色创建另外两个颜色资源(Black=>#000, White=>#fff)

    •     被创建字符串或颜色资源难住了？查看这个字符串格式教程.

    测验1：定义布局资源

        先创建一个新的布局资源文件relativerainbow.xml。在这个XML文件中，增加一个填充整个屏幕的相对布局控件，设置对齐属性为居中对齐。接下来，你需要添加七个TextView控件做为这个相对布局的子控件，每个TextView都对应上文提到的七种颜色之一。将每个TextView控件的文本值设置成光谱色中的合适颜色名称，并把背景色设置成合适的颜色。同时，将每个控件的layout_width属性设置为wrap_content；layout_height属性设置为wrap_content，将padding设置为合适的值，比如8dp。

         如果你已经正确的完成了这个步骤，你的程序布局看起来应该像下图所示的一样：

        

        注意到所有的控件都堆积在另一个控件的上边，只有最后一个控件被添加到“顶部”。

    测验2： 堆叠显示子控件

        我们想让每个TextView控件和每个颜色都能以正确的顺序显示。我们已经使用了线性布局来组织我们的控件，但我们想让它的扩展性更强些。

         给每个TextView控件增加一个相对布局规则，这样每一个控件就按顺序(Red, Orange, Yellow, Green, Blue, Indigo, Violet)一个接着一个在垂直方向堆叠显示出来。

         现在你的布局看起来应该跟下图一样：

        

        提示：注意adroid:layout_below属性

    测验3：错落显示子控件

        到目前为止，我们简单地用一个垂直方向上的线性布局来显示控件。现在，我们不仅仅要堆叠显示TextView子控件，而且要让它们能够显示在彼此的左边或右边，以达到下图所示的效果：

        

        提示：为了达到这个效果，你需要两种不同的相对布局规则，并结合以下两个属性: android:layout_toLeftOf 和android:layout_toRightOf。仅仅为了好玩，切换到横屏模式，看一下同样布局的效果：

        

    附加测验：用Java重新创建布局

        如果你发现前面的测验相当简单，考虑下面附加的测验：用Java程序重新创建你最后的布局资源(每个TextView控件有渐变的权值)，代替在布局XML资源里控制。

         你需要在你的活动的onCreate()方法中添加setContentView()调用并创建你的线性布局，就像《Android用户界面设计：相对布局》中讨论的一样。

         这里有一些用程序实现相对rainbow布局的提示：

  • 首先创建每个TextView控件，用setId()方法给每个控件一个唯一的ID。
  • 为了给每个TextView配置布局参数，创建一系列RelativeLayout.LayoutParams，用来设置每个控件的layout_width和layout_height属性。
  • 使用RelativeLayout.LayoutParams 对象的addRule()方法给每个TextView控件配置合适的显示规则。
  • 使用TextView类的setText()方法加载和显示合适的字符串资源。
  • 使用TextView类的setTextSize()方法设置文本的字体大小。你可以使用getResources().getDimension()方法载入尺寸资源。
  • 使用TextView类的setTextColor()方法设置文本的文本颜色。你可以使用getResources().getColor()方法载入颜色资源。
  • 使用TextView类的setBackgroundColor()方法设置控件的背景色。你可以使用getResources().getColor()方法载入颜色资源。
  • 使用TextView类的setGravity()方法设置文本的对齐方式。Gravity类包含有多种定义好的对齐类型。
  • 下一步，构造一个RelativeLayout控件。
  • 使用setGravity()方法配置这个布局的子控件的对齐方式。Gravity类包含有多种定义好的对齐类型。
  • 不要忘记创建一个LayoutParams对象来设置相对布局控件自己的height和width属性。
  • 使用addView()方法将每个TextView控件增加到你的RelativeLayout对象中。
  • 最后使用setContentView()方法来显示你刚才配置的RelativeLayout控件。

    • 总结

        Android用户界面设计者一直使用相对布局来相对于另一个控件来展示控件。子控件可以被显示在另一个子控件的附近(上面，下面，左边，右边)或显示在相对于父布局的不同位置。布局规则用来描述每个子控件在屏幕上的显示位置。

         祝你好运！[English]

    建议继续学习：

    1. android 开发入门    (阅读：11924)
    2. Android 连接SSID隐藏网络以及 LEAP 认证的方法    (阅读：7253)
    3. 手机产品设计方向    (阅读：5901)
    4. 实时监控Android设备网络封包    (阅读：4649)
    5. 基于 PhoneGap 与 Java 开发的 Android 应用的性能对比    (阅读：4614)
    6. Android用户界面设计：表格布局    (阅读：4496)
    7. Eclipse开发Android应用程序入门:重装上阵    (阅读：4441)
    8. Android 4.0平台交互简析    (阅读：4254)
    9. Windows下使用VMware安装Android    (阅读：4087)
    10. Eclipse开发Android应用程序入门    (阅读：3965)
    QQ技术交流群：445447336，欢迎加入！
    扫一扫订阅我的微信号：IT技术博客大学习
    << 前一篇：对话对话框―浅析windows系统对话框规范
    后一篇：趋势之上－Android设计趋势分析10则 >>
    文章信息
    © 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

    京ICP备15002552号-1