Android入门教程Android ch02.docx

2 Android用户界面2.1 概述一个Android程序由一个或多个窗体（Activity）组成的，在每个Activity里面又可以包含多个诸如按钮、文本框等组件。2.2 View和ViewGroup类几乎所有的UI组件都是从View类派生的，例如按钮、文本框等。View类的主要功能是提供了绘制和事件处理等。ViewGroup类也是View的子类，但是可以充当其他组建的容器。同Java SE不同，Android没有布局管理器，而是为不同的布局提供了一个ViewGroup的子类。图 212.3 界面布局在传统的使用C/C+语言编写的Windows程序中，使用明确的位置参数来对界面元素进行定位，例如必须明确告诉Windows一个按钮的左上角坐标参数和右下角坐标参数，Windows才能在正确位置上绘制。如果界面元素位置时刻保持不变还好，如果根据窗体的大小其位置也发生变动，那么必须在WM_SIZE消息中仔细计算和调整参数，否则就有可能出现界面混乱的情况。在Java中，使用来进行界面布局，程序员仅需要指定XX即可。在Android中，继承了这一优良传统，用户使用XX来进行界面布局。Android界面布局包括线性布局、表格布局、帧布局、网格布局、相对布局和绝对布局等。2.3.1 可视化设计与手动编码1. 修改res/values/strings.xml如下所示。 HelloWorld Settings Hello world! Ok Cancel在代码中新添加两个字符串，分别对应按钮“Ok”和“Cancel”显示文本内容，后面在布局文件中我们要引用到它们。为减少耦合性，建议字符串内容定义在strings.xml中，其它需要字符串的地方引用strings.xml中定义好的字符串资源。这样当文本内容需要改变的时候，只需要修改string.xml就可以了，不必修改牵涉到该字符串的所有文件，减少工作量，更重要的是减少出错几率。2.修改布局。有两种方式，一种是可视化修改，通过“鼠标拖拉”方式完成，具有所见即所得的优点，但有时调整起来不太方便；另一种是编码方式，即手动改写布局文件。打开activity_main.xml文件，Android Studio界面显示如下：图 22通过底部的”Design”和”Text”我们可以在设计与文本之间切换。在可视化设计时，我们通过鼠标将组件拖拉到预览窗格的“手机屏幕”上，就可以立即得到结果，然后在属性窗口中修改属性即可。现在我们把两个按钮拖拉到“手机屏幕”上，并修改其id属性和text属性。这两个属性可以在属性窗口中修改，也可以在按钮上双击，然后Android Studio就会弹出常用属性小窗体，在里面修改属性值。如下图所示。图 23其中在text可以直接输入文本，也可以指定资源，单击其右侧按钮，在弹出的“Resources”对话框中选择“button_ok”即可。图 24将id属性修改为“ButtonOK”，如下图所示：图 25可以看到text属性的值为引用值“string/button_ok”，id属性为“ButtonOK”。同理可以将另一个按钮的text属性改为“string/button_cancel”，id属性改为”ButtonCancel”。用户也可以直接修改源代码。切换到“Text”布局代码视图中，源代码如下： 可以看到在里面有两个Button标签，这就是我们刚才创建的按钮，用户可以直接修改他的text属性和id属性。其中android:text=string/button_ok用来指示控件显示的内容，表示引用资源内容，string表示字符串资源，即res/values/strings.xml中的资源，button_ok表示资源名称，string/button_ok表示显示的文本内容为 res/values/strings.xml中button_ok所定义的内容。android:id=+id/ButtonOk表示生成的一个新的ID，这里的“+”表示创建（new）的意思，新建的ID为ButtonOk,由id自动在R.java文件中进行维护。用户无论采用哪种方式，效果是一样的。2.3.2 线性布局LinearLayout线性布局（LinearLayout）是一种重要的界面布局中，也是经常使用到的一种界面布局。在线性布局中，所有的子元素都按照垂直或水平的顺序在界面上排列。l 如果垂直排列，则每行仅包含一个界面元素，多个View多行显示，。l 如果水平排列，则每列仅包含一个界面元素，多个View多列显示，但仅一行。垂直排列修改res/layout/activity_main.xml。 在上述布局文件中中，我们屏幕上组件布局为线型布局。下面对各个标签简单解释。android:orientation=vertical，线型布局都朝向为垂直排列。如果需要水平排列，则需要设置android:orientation值为“horizontal”。android:layout_width=match_parent：设置组件宽度同其所属的父容器相同，即横向占满父容器。也可设置其属性值为“wrap_content”，表示自动根据内容进行扩展。android:layout_height=match_parent，同android:layout_width类似，但是方向是纵向。android:gravity=right，设置线性布局中内部元素的布局方式，这里是右对齐。tools:context=.MainActivity ，本句不会被打包进APK，只是用来告诉ADT的Layout Editor在当前的Layout文件里面设置对应的渲染上下文，用于所见即所得的效果。 (a)垂直排列 (b)水平排列图 26水平排列将android:orientation属性改为“horizontal”，效果如下：2.3.3 表格布局TableLayout表格布局（TableLayout）也是一种常用的界面布局，它将屏幕划分网格，通过指定行和列可以将界面元素添加的网格中。TableLayout继承自LinearLayout，可以将表格布局看作是多行的线性布局。l 网格的边界对用户是不可见的l 表格布局还支持嵌套，可以将另一个表格布局放置在前一个表格布局的网格中，也可以在表格布局中添加其他界面布局，例如线性布局、相对布局等等 图 27 表格布局注意：第一个button单独占一行。2.3.4 框架布局FrameLayoutFrameLayout是最简单的一个布局。所有的子元素都不能被放置在指定的位置，而是统统放在空白区域的左上角，并且后一个的控件会覆盖遮挡前面的控件。 图 28 帧布局可以看到3个文本框都叠在一起。2.3.5 相对布局RelativeLayout相对布局（RelativeLayout）是一种非常灵活的布局方式，能够通过指定界面元素与其他元素的相对位置关系，确定界面中所有元素的布局位置。特点：能够最大程度保证在各种屏幕类型的手机上正确显示界面布局 图 29 相对布局相对布局在很多时候很有用，用户只要明确指出每个组件之间的相对位置即可。2.3.6 绝对布局AbsoluteLayout绝对布局（AbsoluteLayout）能通过指定界面元素的坐标位置，来确定用户界面的整体布局绝对布局是一种不推荐使用的界面布局，因为通过X轴和Y轴确定界面元素位置后，Android系统不能够根据不同屏幕对界面元素的位置进行调整，降低了界面布局对不同类型和尺寸屏幕的适应能力。2.3.7 网格布局网格布局GridLayout是Android4.0才增加的布局管理器，不过现在手机基本上是4.0版本以上，因此大部分手机可以使用，如果是低版本的手机则需要添加相应库。为网格布局添加组件时，组件会按照水平位置从左到右依次排列。如果制定了列数的话则会自动换行。如果用户需要组件在特定位置显示，则需要使用android:layout_row和android:layout_column指定其在网格中的具体行列位置。如果界面需要跨行或跨列，则使用网格布局非常方便。 图 210 网格布局需要注意如下几个属性：l android:layout_gravity：填充方式，可以是水平填充，也可以是垂直填充，或两个方向都填充。l android:layout_rowSpan：合并行l android:layout_columnSpan：合并列l2.4 Android常用组件主要包括文本显示TextView、文本编辑EditText。2.4.1 TextView类继承自View类，可以向用户显示文本内容，一般不允许编辑。属性详解：l Android:autoLink设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)l android:ellipsize设置当文字过长时,该控件该如何显示。有如下值设置：”start”-省略号显示在开头;”end” 省略号显示在结尾;”middle”-省略号显示在中间;”marquee” 以跑马灯的方式显示(动画横向移动)l android:gravity设置文本位置，如设置成“center”，文本将居中显示。l android:maxLength限制显示的文本长度，超出部分不显示。l android:lines设置文本的行数，设置两行就显示两行，即使第二行没有数据。l android:maxLines设置文本的最大显示行数，与width或者layout_width结合使用，超出部分自动换行，超出行数将不显示。l android:minLines设置文本的最小行数，与lines类似。l android:lineSpacingExtra设置行间距。l android:singleLine设置单行显示。如果和layout_width一起使用，当文本不能全部显示时，后面用“”来表示。如android:text=test_ singleLine android:singleLine=true android:layout_width=20dp将只显示“t”。如果不设置singleLine或者设置为false，文本将自动换行l android:text设置显示文本.l android:textColor设置文本颜色l android:textSize设置文字大小，推荐度量单位”sp”，如”15sp”l android:textStyle设置字形bold(粗体) 0, italic(斜体) 1, bolditalic(又粗又斜) 2 可以设置一个或多个，用“|”隔开l android:typeface设置文本字体，必须是以下常量值之一：normal 0, sans 1, serif 2, monospace(等宽字体) 3l android:height设置文本区域的高度，支持度量单位：px(像素)/dp/sp/in/mm(毫米)l android:maxHeight设置文本区域的最大高度l android:minHeight设置文本区域的最小高度l android:width设置文本区域的宽度，支持度量单位：px(像素)/dp/sp/in/mm(毫米)，与layout_width 的区别看这里。l android:maxWidth设置文本区域的最大宽度l android:minWidth设置文本区域的最小宽度2.4.2 EditText类继承自TextView类，允许用户对文本进行编辑。除了TextView属性外，EditText常用属性如下：l android:cursorVisible:设置光标是否可见，默认可见l android:inputType:文本框类型l android:password:文本内容是否显示为密码l android:phoneNumber:是否为电话号码2.4.3 Button类Button类继承自TextView类，用户可以对Button组件单击等事件进行处理，这也是Button最常用的使用形式。Button组件最重要的属性是id属性，一般是在布局文件中通过android:id=+id/buttonOne这样的方式来设置，其中“buttonOne”就是我们为按钮设置的id值，用户在代码中可以通过findViewById(R.id.buttonOne)来获得这个Button组件。Button另一个常用属性是text，用来设置按钮显示的文本内容。按钮的基本用法是为其设置View.OnClickListener监听器并编写相应的处理代码。下面为计算器程序添加用户按下“1”按钮时的处理代码。将MainActivity.java文件的onCreate()函数中修改为如下代码：Overrideprotected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button btnOne=(Button)findViewById(R.id.buttonOne); final TextView txtResult=(TextView)findViewById(R.id.textResult); btnOne.setOnClickListener(new View.OnClickListener() Override public void onClick(View v) txtResult.setText(txtResult.getText() + 1); );图 211 Button练习：用户可以在此基础上，对每个按钮编写单击事件代码，做出一个简单的计算器。2.4.4 ImageButton类ImageButton继承自ImageView类，与Button主要区别是按钮显示的是图片而不是文本，它没有text属性。用户可以通过android:src属性或setImageResource(int)方法来设置显示的图片。2.4.5 CheckBox类CheckBox允许用户选择对某选项是否选中。2.4.6 RadioButton类同CheckBox不同，RadioButton组件则让用户仅可以从多个选项中选择一个。例如选择性别时就特别适合RadioButton，用户必须从“男”或“女”中选择且只能选择一个。布局文件： 修改MainActivity.java文件中的onCreate()方法代码：Overrideprotected void onCreate(Bundle savedInstanceState) super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final TextView txtResult=(TextView)findViewById(R.id.txtResult); CheckBox cbMi=(CheckBox)findViewById(R.id.CheckMi); CheckBox cbHuawei=(CheckBox)findViewById(R.id.CheckHuawei); CheckBox cbMeizu=(CheckBox)findViewById(R.id.CheckMeizu); CheckBox cbSmartisan=(CheckBox)findViewById