Android 基础 UI 界面设计

前面Day2:Android项目的目录结构详解，我们了解了整个Android项目的目录架构。既然如此，我们就直接来写一个“Big Lottery”（利用计算机选号来产生乐透号码的程序），顺便发布到Google play上面赚取广告费。下面开始编程的第一项吧——UI界面设计。
##UI组件
重要的话先讲，Android的所有UI组件都是建立的View、ViewGroup基础上的。如图，开发环境中的组件列表，可拖动到编辑中的界面上。

这里写图片描述

Android应用的绝大多数UI组件都放在android.widget、android.view和它们的子包中，可分类为容器组件和非容器组件。且所有UI组件都继承了View类，相当于一个空白的矩形区。至于容器，View的子类——ViewGroup就完美地胜任了这项工作。
那么，问题来了——它们是如何组合起来的呢?Android采用了“组合器”的设计模式，即：ViewGroup是View的子类，故ViewGroup也可当View使用。
##两个页签
新建成功的App项目，页面会停留在版面配置Graphical Layout上面，我们可以在该窗口的下面看到两个页签。

这里写图片描述

Graphical Layout：可视化方式进行页面设计。（手动设计）
activity_main.xml：以xml文件格式编辑。（敲代码）
我们主要分析一下“activity_main.xml”页签。

<RelativeLayout 
	……>
    <TextView
        android:layout_width="wrap_content"/>
</RelativeLayout>

我只想通过这份不完整的代码，解释三个知识点：####①<RelativeLayout>和</RelativeLayout>
了解过HTML的同学就会知道，这就是简单的“开始”与“结束”的关系。RelativeLayout在最外层定义了一种版面配置形式，其具有容量性质。因此，会有另外相对应的结尾标签</RelativeLayout**>。“<>”表示标签，“/”表示结束。
####②<TextView />
和RelativeLayout类似，不同的是其只是一个显示组件。TextView可用来显示一般的文本内容，属于非容量组件。最后的“/”同样表示结束。
####③android:layout_width="wrap_content"
我们称这行代码为属性设定。等式左边为属性，右边为属性值。
android:layout_width、android:layout_height支持如下3个属性值：

fill_parent：子组件与父容器的宽高一致；
match_parent：与fill_parent完全相同；
wrap_content：视内容而定大小。
##开始下手
至此，先简单运用我们学到的东西吧：

<RelativeLayout 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:orientation="vertical" >

     <Button
         android:id="@+id/torich"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_alignParentTop="true"
         android:text="掘金钮" />

     <TextView
         android:id="@+id/richnum"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:layout_below="@+id/torich"
         android:gravity="center_vertical|center_horizontal"
         android:text="获取第一桶金…" />
    
</RelativeLayout>

得到如下效果：
这里写图片描述

【编辑推荐】