你的第一个android应用----(3)创建用户界面

                                                                     创建用户界面

    本节课程中,你将创建一个XML布局文件,里面包含一个文本域和一个按钮.下一节课程中,当点击按钮发送文本域中的内容

    给另一个活动页面时,你的程序将响应.

 

    安卓应用的图形用户界面通过具有层级结构的View和ViewGroup对象创建.View对象长用于用户界面的局部部件,例如:

    按钮,文本域.ViewGroup对象一个不可见的用于定义子视图布局的,例如:网格视图布局,垂直视图布局.

 

    安卓提供了一个同View和ViewGroup对应的XML文件.因此,你可以使用用户界面元素的层级结构在

    这个XML文件中定义你的用户界面.

    

    布局对象是ViewGroup的子元素,在这个练习中,你将学习线性布局.

 

    设置线性布局:

        1.在Android Studio中,找到res/layout文件夹,打开activity_my.xml文件.

          当你创建这个工程时,选择的BlankActivity模板对应的activity_my.xml文件中包含了一个相对布局

          的根视图和一个文本视图的子视图.

        2.在预览面板上,单击隐藏图标按钮关闭预览面板.

          在Android Studio中,当你打开一个布局文件时,最先显示的就是预览面板.在面板中点击元素就会在

          设计面板中打开WYSIWYG工具.在本节课程中,我们学习直接通过XML文件布局和添加内容.

        3.删除"<TextView>"元素.

        4.将"<RelativeLayout>"元素改成"<LinearLayout>"

        5.添加"android:orientation"属性,并设置为"horizontal".

        6.删除"android:padding"属性和"tools:context"属性.

 

        最终结果如下:

            res/layout/activity_my.xml

 

 <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>

 

        线性布局对象(LinearLayout)是一个视图容器,用于设置子视图为垂直布局还是水平布局.例如"android:orientation"

        如属性值所规定的那样.每一个线性布局对象的子元素都会根据XML文件中指定的顺序显示在屏幕上.

 

        为了详细说明视图的大小,可以使用另外两个属性"android:layout_width"和"android:layout_height"定义.

 

        因为LinearLayout是布局根视图,所以它应该覆盖整个屏幕区域以提供给程序使用.将宽度和高度设置为"match_parent",

        这个值声明视图的将扩展自己的宽,高以适应父视图的宽和高.

 

        添加一个文本域:

            和定义每一个视图对象一样,你必须定义确切的XML属性来详细说明编辑框对象的属性.

 

            1.在activity_my.xml文件的"<LinearLayout>"元素中,定义一个"<EditText>"元素

              "id"属性设置为"@+id/edit_message".

            2.将"layout_width"和"layout_height"属性的值设置为"wrap_content".

            3.定义一个名为"edit_message"的字符串对象属性"hint".

 

            "<EditText>元素最终如下:

                res/layout/activity_my.xml

 

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

 

            下面我们对在"<EditText>"元素中添加的属性做详细说明:

                android:id

                    为视图指定一个唯一的标识符,你可以通过这个唯一的标识符从你的程序代码中引用这个对象,

                    例如:读取和操作这个对象(我们将在下节课程中讲述).

 

                    首先"@"符号是必须的,通过它你可以从XML中引用任何资源对象.接下来是资源类型(在这里是id),

                    然后是正斜线"/",最后是资源名称(edit_message).

 

                    位于资源类型前面的加号(+),只在你第一次定义资源ID时才需要添加.当编译程序时,SDK工具会

                    使用这个ID名创建一个新的资源ID,并添加到工程下gen/R.java文件中,指向"EditText"元素.

                    通过这种方式声明资源ID后,再引用这个ID时就不需要加号(+)了.只在定义新的资源ID时才

                    需要使用加号(+),定义或声明其他资源(例如:字符串,布局等)不需要使用加号(+).

 

                    资源对象:

                        一个资源对象是与一个应用程序资源(如:位图,布局文件,字符串)相关联的唯一整数名称.

 

                        每一个资源在工程路径下的gen/R.java文件中都有一个对应的资源对象.例如,当你需要

                        为"android:hint"属性定义一个字符串值时,你可以使用R类中的对象名称来引用资源.

                        你也可以通过使用"android:id"属性为相关视图创建任意资源ID,通过这个资源ID,你可以

                        其他代码中引用这个视图.

 

                        你每次编译程序,SDK都会重新构建R.java文件.因此请不要手动修改R.java文件.

 

                android:layout_width和android:layout_height

                    不使用特定的值设置宽度和高度,而是使用"wrap_content",目的在于使用这个值会使

                    视图自适应内容的大小.如果是用"match_parent",则"EditText"元素将会充满屏幕,

                    因为它匹配的是父类"LinearLayout"的大小.

 

                android:hint

                    当文本域为空是,默认显示这个属性的字符串.之所以使用"@string/edit_message"

                    指向独立文件中的字符串资源,而不使用硬编码字符串,是因为它指向的是一个具体的资源

                    (不仅仅是一个标识符),这里不需要使用加号(+).然而,由于目前你还没有定义字符串资源,

                    你将看到一个编译错误.在下一个节中定义字符串资源后将修复这个问题.

 

                    备注:这个字符串资源和元素ID拥有相同的名称"edit_message".然而,资源的引用总是被

                        资源类型域(如:id或string)却分开的,所以使用相同的名称并不会造成冲突.

 

        添加字符串资源:

            默认在工程路径/res/values/strings.xml下有一个字符串资源文件,在这里你可以添加一个名为

            "edit_message"的字符串,设置值为"Enter a message.".

 

            1.在Android Studio中打开res/values文件夹下的strings.xml文件.

            2.添加一个名为"edit_message"值为"Enter a message"的字符串元素.

            3.添加一个名为"button_send"值为"Send"的字符串元素.

              在下一节中,你将会使用这个字符串创建一个按钮.

            4.删除"hello world"行.

 

            strings.xml文件最终如下:

                res/values/strings.xml

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <string name="app_name">My First App</string>
     <string name="edit_message">Enter a message</string>
     <string name="button_send">Send</string>
     <string name="action_settings">Settings</string>
     <string name="title_activity_main">MainActivity</string>
</resources>

 

            通常用户界面中的每一个文本都有一个对应的字符串资源.这样方便在同一个地方管理所有的用户

            界面文本,这使得查找和更新文本信息变得非常容易.将字符串外部化,可以非常方便的定义不同的

            替代字符串资源,使你的程序能够非常容易的以不同的语言本地化.

 

        添加按钮:

            1.打开res/layout文件夹中的activity_my.xml文件

            2.在"<LinearLayout>"元素中定义一个"<Button>"元素,紧跟着"<EditText>"元素.

            3.设置按钮的宽和高为"wrap_content",使按钮自适应文本内容的大小.

            4.通过"android:text"属性定义按钮的内容,将按钮的内容设置为之前定义的"button_send"字符串资源.

 

            最终"<LinearLayout>"元素如下:

                res/layout/activity_my.xml

 

<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>

 

                备注:这个按钮不需要定义"android:id"属性,因为在活动类的代码中没有引用这个按钮.

 

                到这里,显示结果如下图.文本编辑框和按钮的大小自适应内容的大小.

                     

                这样做对按钮组件而言是不错的,但是对文本框来说就不太好了,因为用户可能在文本框中输入较长的内容.

                使文本框填充满整个屏幕宽度是一个很好的选择.你可以通过在"LinearLayout"中定义"weight"属性

                来实现.定义方式为"android:layout_weight".

 

                "weight"的值是一个数字,相对于被兄弟视图消耗的空间来指定其余每个视图应该占有的空间.就像一种饮料

                中的原料组合一样:其中苏打为2个单位,糖浆为1个单位,也就是说这种饮料的三分之二是苏打.例如,如果你定

                义第一个视图的"weight"为2,另一个视图的"weight"为1,则第一个视图会占用总空间的2/3,剩余的空间被

                另一个视图占用.如果你再添加第三个视图,"weight"为1,这时第一个视图占用的空间为1/2,另外两个视图各

                占1/4.

 

                默认所有视图的"weight"的值为0.如果你只设置了一个视图的"weight"值大于0,那么这个视图将填满其他视图剩余的所有空间.

 

        使输入框占满屏幕宽度:

            想要占满你的布局对象中"EditText"元素剩余的空间,如下:

                1.在activity_my.xml文件中设置"<EditText>"元素的"layout_weight"属性值为1.

                2.设置"<EditText>"元素的"layout_width"属性值为"0dp".如下:

                    res/layout/activity_my.xml

 

<EditText
       android:layout_weight="1"
       android:layout_width="0dp"
       ... />

 

                为了提高布局效率,设置"weight"属性时应该把"EditText"的"width"属性值设置为0.因为"wrap_content"

                值指定系统计算的宽度值在这里根本就没用."weight"值需要的宽度值是通过另外的计算机制计算的.

 

                目前图形界面结果如下图:

               

            activity_my.xml文件的整体内容如下:

                res/layout/activity_my.xml

 

 <?xml version="1.0" encoding="utf-8"?>
 <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_weight="1"
                android:layout_width="0dp"
                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>

 

    运行你的应用:

        布局是由创建工程时SDK生成的默认Activity类提供的.

        运行程序查看结果:

            * 单击Android Studio工具栏中的"Run"图标.

            * 或者从命令行进入到工程跟路径下,执行命令:

                

ant debug
adb install bin/MyFirstApp-debug.dpk