第2讲-高级用户界面设计-布局layout

DataWarehouseAndroid平台手机嵌入式开发第2讲高级用户界面设计_布局layout.魏志军[e-mail]1主要内容：Android平台UI组件架构探讨UI组件的定义、UI组件的引用、组件的属性及ID控制UI界面布局组件2主要内容：完美的用户界面对于移动平台的软件产品而言是至关重要的本章重点介绍Android平台架构中比较常见、重要的界面元素，并通过实例，迅速掌握在Android平台上搭建称心如意的界面32.1：Android平台UI组件架构在Android平台中，所有的可视组件是视图类view的子类。视图类中有一个重要的直接子类—视图组类(ViewGroup)，所有的布局类都是视图组类的直接或者间接子类。这些布局类都在小部件(Widget)的包(android.widget)中42.1：Android平台UI组件架构视图组类有一个重要的直接子类：适配器视图类（AdapterView）,该类又包含若干个直接或者间接的视图类。如：列表视图类(ListView)和格子视图类（GridView）视图类还有一个重要的直接子类：文本视图类(TextView)，按钮类是其子类之一；而复选框类(CheckBox)和单选按钮类(RadioButton)又是按钮类的间接子类。52.1：Android平台UI组件架构容器类可以是组件类的子类，组件类也可以是容器类的子类。因为容器本身也是组件，可以视为组合组件，组件本身也是容器，可以由多个组件组成。62.1：Android平台UI组件架构布局的角色：Android平台中，布局被定义为视图组(ViewGroup)的子类，并纳入到小部件包中。在功能上，布局既可以用于容纳其他视图，又可以作为视图显示，还可以作为小部件加入到其他布局中。从而形成繁茂的视图结构层次树，给同行展示的就是更加灵活和丰富的界面效果72.2：UI组件的定义Android组件可以通过以下两种方式进行定义：在XML中定义界面元素：提供了丰富的XML词汇表对应绝大多数视图和子类，通过标记就可以定义对应的视图类或其子类。好处：不仅增加了界面定义的弹性，也简化了编码过程在Java代码中定义界面元素：就是平常定义组件的方式，即通过new语句初始化一个类实例，然后设置其属性，并调用其方法。82.2：UI组件的引用、属性、ID对象的引用，一般来说都是延续‘先创建、再使用’的原则；但是对于通过XML定义界面元素的形式，如何引用这些已经实例化的对象呢？资源打包工具（aapt）通过分析定义组件的xml文件来自动生成组件的标识列表，并生成资源标识列表，封装在R.java类中。通过组件标识，在Activity中或者根组件中调用findViewById()方法即可获得指定组件标识的组件对象句柄。92.2：UI组件的引用、属性、ID组件属性：XML中有很多属性用来定义该类的实例对象的成员内容。例如：使用android:text定义所显示文本内容，该方式与运行时使用setText()方法是一致的。注意：xml定义中，给一个文本组件设置text属性也是合法的，但是该属性不会被Android平台的资源解析功能识别，所以该内容不会显示出来。ID：用于区分组成屏幕的视图树中的各个组件。android:id=“@+id/组件ID”。+号：该资源必须创建并添加到资源中android:id=“@id/组件ID”。无+号：无需创建，只是引用102.3：控制UI界面1、使用XML布局文件控制UI界面3、使用XML和Java代码混合控制UI界面4、开发自定义的View2、在代码中控制UI界面112.3.1使用XML布局文件控制UI界面使用XML布局文件控制UI界面可以分为以下两个关键步骤。（1）在Android应用的res/layout目录下编写XML布局文件，可以是任何符合Java命名规则的文件名。创建后，R.java会自动收录该布局资源。（2）在Activity中使用以下Java代码显示XML文件中布局的内容。setContentView(R.layout.main);122.3.2在代码中控制UI界面在代码中控制UI界面可以分为以下3个关键步骤。（1）创建布局管理器，可以是帧布局管理器、表格布局管理器、线性布局管理器和相对布局布局管理器等，并且设置布局管理器的属性。例如，为布局管理器设置背景图片等。（2）创建具体的组件，可以是TextView、ImageView、EditText和Button等任何Android提供的组件，并且设置组件的布局和各种属性。（3）将创建的具体组件添加到布局管理器中。132.3.3使用XML和Java代码混合控制UI界面使用XML和Java代码混合控制UI界面，习惯上把变化小、行为比较固定的组件放在XML布局文件中，把变化较多、行为控制比较复杂的组件交给Java代码来管理。14在Android中，所有的UI界面都是由View类和ViewGroup类及其子类组合而成的。其中，View类是所有UI组件的基类，而ViewGroup类是容纳这些UI组件的容器，其本身也是View类的子类。在ViewGroup类中，除了可以包含普通的View类外，还可以再次包含ViewGroup类。View类和ViewGroup类的层次结构如下图所示。ViewViewViewGroupViewViewViewGroup2.3.4开发自定义的View15开发自定义的View组件大致分为以下3个步骤。（1）创建一个继承android.view.View类的View类，并且重写构造方法。（2）根据需要重写相应的方法。（3）在项目的活动中，创建并实例化自定义View类，并将其添加到布局管理器中。2.3.4开发自定义的View162.4：布局组件(Layouts)Android平台中，强化了布局的地位，可是组件必须放在布局或者与布局具有相同地位的容器中，否则，资源管理器认为该摆放方式非法.Android平台定义了：LinearLayout(线性布局)、AbsoluteLayout(绝对布局)、RelativeLayout(相对布局)、TableLayout(表格布局)、FrameLayout(框架布局,帧布局)其中绝对布局不是很常用，最新的版本中已经不再使用172.4：布局组件(Layouts)1、LinearLayout(线性布局)线性布局LinearLayout是将容器内的子组件按照直线方式进行摆放；其方向可以是竖向或者横向，这依赖于你怎么定义方向orientation属性。线性布局的几个重要属性：方向属性：android:orientation=“horizontal”或者vertical宽度属性：android:layout_width=fill_parent高度属性：android:layout_height=fill_parent“182.4：布局组件(Layouts)gravity属性：用于控制布局中视图组件的位置。有top、bottom、left、right、center_vertical，center_horizontal，center等取值；（如果该属性在一些视图组件中使用，则控制控件上面的东西的位置，如TextView里面的文本默认居左作对齐的，如果让这些文本居中的话，只要在这个TextView的属性里加上android:gravity=“center”）如设置多个属性值，需要使用”|”进行分隔，注意不能有空格等字符比如要弄一个左下位置：则可以设置：android:gravity=left|bottom192.4：布局组件(Layouts)202.4：布局组件(Layouts)1、LinearLayout(线性布局)线性布局的几个重要属性：layout_gravity:定位当前视图在父元素的位置，取值和gravity相同layout_weight：将排列好组件后的剩余的空间，按权重比例进行分配。该属性是一个非负整数值，如果该属性大于0，线性布局会根据水平或者垂直方向，按照不同视图的layout_weight值占所有视图layout_weight属性之和的比例，来分配每个视图所占的区域比例，同时视图将按照比例拉伸。如果属性值为0，视图不会拉伸，按照原大小显示注意：一旦View设置了该属性(假设有效的情况下)，那么该View的宽度等于原有宽度(android:layout_width)加上剩余空间的占比！212.4：布局组件(Layouts)1、LinearLayout(线性布局)LinearLayoutxmlns:android=:orientation=vertical“android:layout_width=fill_parent”android:layout_height=fill_parentTextViewandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:textColor=@color/opaque_redandroid:textSize=16ptandroid:text=LinearLayout/TextViewandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:textColor=@color/light_redandroid:textSize=16ptandroid:text=LinearLayout//LinearLayout222.4：布局组件(Layouts)2、RelativeLayout(相对布局)在相对布局的所有子组件中，后一个组件要参照前一个组件的位置进行摆放。相对布局的几个重要属性：上下位置：android:layout_above=@id/labTitle“android:layout_below=@id/labTitle“左右位置：android:layout_toLeftOf=@id/btnAction“android:layout_toRightOf=@id/btnAction对齐方式：android:layout_alignTop=@id/btnAction“android:layout_alignBaseline=“@id/btnAction“设置视图底端对齐RelativeLayout…………………./RelativeLayout232.4：布局组件(Layouts)2、RelativeLayout(相对布局)RelativeLayoutxmlns:android=:orientation=vertical”android:layout_width=fill_parent”android:layout_height=fill_parentTextViewandroid:id=@+id/labTitleandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentButtonandroid:id=@+id/btnActionandroid:layout_width=wrap_contentandroid:layout_height=wrap_contentandroid:layout_below=@id/labTitle“CheckBoxandroid:id=@+id/chxSelandroid:layout_width=wrap_contentandroid:layout_height