Building A Simple User Interface

2015-09-01

这一节开发交互界面，交互界面抽象成了XML文件，在/res/layout目录下。
android框架提供了大量UI组件提高开发效率
Building A Simple User Interface 01
但是在Training的章节里不对每个技术细节做详细的介绍，我们首先要做出一个APP来

Declaring your UI layout in XML rather than runtime code is useful for several reasons, but it’s especially important so you can create different layouts for different screen sizes. For example, you can create two versions of a layout and tell the system to use one on “small” screens and the other on “large” screens.
这也是之前提到的，为了更好的适配和更方便的管理，把资源文件抽象出来的一种体现

创建LinearLayout(线性布局)

LinearLayout是ViewGroup的一个子类，管理的View对象呈线性分布。

在/res/layout下找到，并打开，应该是这个样子的，如图

底部有Design和Text视图可以切换，一般保持在Text视图，把右侧Preview选项打开即可。
这里现在是自动生成的代码，包括一个root view RelativeLayout和一个TextView，里面不出意外是”Hello World“

现在我们把这些代码全部删掉，加入以下代码

<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:orientation="horizontal" >
</LinearLayout>

android:orientation="horizontal"：表示LinearLayout控制的布局是横向分布的
android:layout_width="match_parent"和android:layout_height="match_parent"：该View在父布局中的宽和高，这是我们可以控制的根布局，所以选择match_parent来填充整个屏幕

添加EditText

在LinearLayout标签内添加如下代码

<EditText android:id="@+id/edit_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="@string/edit_message" />

为EditText配置一个id：edit_message
宽和高为wrap_content，意思是包裹内容，也就是恰好内部文字的宽和高
android:hint是专属EditText控件的属性，表示用户未输入时的提示文字

在res/values/strings.xml中添加edit_message的string资源

<resources>
    <string name="app_name">AndroidTrainingDemo</string>
    <string name="edit_message">Enter a message</string>
    <string name="button_send">Send</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
</resources>

android:id

这个View控件的唯一标示。@表示引用资源变量，id是一个特殊的资源变量，第一次引用的时候使用+，表示创建一个新的id。
id是一种特殊的资源，还有其他普通的资源，比如bitmap，layout文件，string变量等等。
id可以在引用的地方直接声明，而其他资源需要在对应的目录配置，或者生成文件，比如string变量在values/strings中声明，layout的id在生成layout文件时生成，而所有资源变量都会被SDK TOOLS在编译时生成在gen/R.java中，可以在app/build/generated/source/r/debug/com/shawn/androidtrainingdemo/R.java中，该文件都是根据资源文件自动生成，切勿手动修改
EditText的view id与hint的string资源变量名是一样的，但并不影响，因为资源的引用往往是跟随类型的，一种是id类型，一种是string类型，观察R.java同样可以发现这个区别

Building A Simple User Interface 03

添加Button

代码如下

<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:orientation="horizontal" >
    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
</LinearLayout>

其他与添加EditText一样，android:text是继承自TextView的属性，表示控件的label。

调整布局

这个时候我们发现preview显示，Button右侧还有部分空白，两个控件并没有横向填满屏幕。可以通过android:layout_weight来控制。
android:layout_weight

表示LinearLayout中子View的权重。顾名思义，表示子View在父布局中占几份，如果只有一个View加上了这个属性，效果就是渲染完其他子View之后，将该View填充剩下的部分，如果有一个以上的View使用了该属性，则按份数来划分，比如一个为1，一个为2，则总份数为3，那么其他子View渲染结束后，剩下部分划分为3份，第一个占1份，第二个占2份，另外还可以在LinearLayout中加入android:weightSum来控制总份数，但是一般不太需要刻意配置。

在设置了android:layout_weight之后，可以将width或者height设置为0dp来提高渲染速度，因为设置权重之后的宽度依赖于其他子View，所以配置宽度并没有意义

preview如下
Building A Simple User Interface 04

最后运行APP

经验尚欠，希望各位看官多加指正，或通过邮件联系我