第2讲高级用户界面设计 布局layoutppt课件.ppt

Android平台手机嵌入式开发,第2讲 高级用户界面设计_布局layout.,魏志军,主要内容：,Android平台UI组件架构探讨UI组件的定义、UI组件的引用、组件的属性及ID控制UI界面布局组件,主要内容：,完美的用户界面对于移动平台的软件产品而言是至关重要的本章重点介绍Android平台架构中比较常见、重要的界面元素，并通过实例，迅速掌握在Android平台上搭建称心如意的界面,2.1：Android平台UI组件架构,在Android平台中，所有的可视组件是视图类view的子类。视图类中有一个重要的直接子类视图组类(ViewGroup)，所有的布局类都是视图组类的直接或者间接子类。这些布局类都在小部件(Widget)的包(android.widget)中,2.1：Android平台UI组件架构,视图组类有一个重要的直接子类：适配器视图类（AdapterView）,该类又包含若干个直接或者间接的视图类。如：列表视图类(ListView)和格子视图类（GridView）视图类还有一个重要的直接子类：文本视图类(TextView)，按钮类是其子类之一；而复选框类(CheckBox)和单选按钮类(RadioButton)又是按钮类的间接子类。,2.1：Android平台UI组件架构,容器类可以是组件类的子类，组件类也可以是容器类的子类。因为容器本身也是组件，可以视为组合组件，组件本身也是容器，可以由多个组件组成。,2.1：Android平台UI组件架构,布局的角色：Android平台中，布局被定义为视图组(ViewGroup)的子类，并纳入到小部件包中。在功能上，布局既可以用于容纳其他视图，又可以作为视图显示，还可以作为小部件加入到其他布局中。从而形成繁茂的视图结构层次树，给同行展示的就是更加灵活和丰富的界面效果,2.2：UI组件的定义,Android组件可以通过以下两种方式进行定义：在XML中定义界面元素：提供了丰富的XML词汇表对应绝大多数视图和子类，通过标记就可以定义对应的视图类或其子类。好处：不仅增加了界面定义的弹性，也简化了编码过程在Java代码中定义界面元素：就是平常定义组件的方式，即通过new语句初始化一个类实例，然后设置其属性，并调用其方法。,2.2：UI组件的引用、属性、ID,对象的引用，一般来说都是延续先创建、再使用的原则；但是对于通过XML定义界面元素的形式，如何引用这些已经实例化的对象呢？资源打包工具（aapt）通过分析定义组件的xml文件来自动生成组件的标识列表，并生成资源标识列表，封装在R.java类中。通过组件标识，在Activity中或者根组件中调用findViewById()方法即可获得指定组件标识的组件对象句柄。,2.2：UI组件的引用、属性、ID,组件属性：XML中有很多属性用来定义该类的实例对象的成员内容。例如：使用android:text定义所显示文本内容，该方式与运行时使用setText()方法是一致的。注意：xml定义中，给一个文本组件设置text属性也是合法的，但是该属性不会被Android平台的资源解析功能识别，所以该内容不会显示出来。ID：用于区分组成屏幕的视图树中的各个组件。android:id=“+id/”。+号：该资源必须创建并添加到资源中 android:id=“id/”。无+号：无需创建，只是引用,2.3：控制UI界面,1、使用XML布局文件控制UI界面,3、使用XML和Java代码混合控制UI界面,4、开发自定义的View,2、在代码中控制UI界面,2.3.1 使用XML布局文件控制UI界面,使用XML布局文件控制UI界面可以分为以下两个关键步骤。（1）在Android应用的res/layout目录下编写XML布局文件，可以是任何符合Java命名规则的文件名。创建后，R.java会自动收录该布局资源。（2）在Activity中使用以下Java代码显示XML文件中布局的内容。setContentView(R.layout.main);,2.3.2在代码中控制UI界面,在代码中控制UI界面可以分为以下3个关键步骤。（1）创建布局管理器，可以是帧布局管理器、表格布局管理器、线性布局管理器和相对布局布局管理器等，并且设置布局管理器的属性。例如，为布局管理器设置背景图片等。（2）创建具体的组件，可以是TextView、ImageView、EditText和Button等任何Android提供的组件，并且设置组件的布局和各种属性。（3）将创建的具体组件添加到布局管理器中。,2.3.3使用XML和Java代码混合控制UI界面,使用XML和Java代码混合控制UI界面，习惯上把变化小、行为比较固定的组件放在XML布局文件中，把变化较多、行为控制比较复杂的组件交给Java代码来管理。,在Android中，所有的UI界面都是由View类和ViewGroup类及其子类组合而成的。其中，View类是所有UI组件的基类，而ViewGroup类是容纳这些UI组件的容器，其本身也是View类的子类。在ViewGroup类中，除了可以包含普通的View类外，还可以再次包含ViewGroup类。View类和ViewGroup类的层次结构如下图所示。,2.3.4开发自定义的View,开发自定义的View组件大致分为以下3个步骤。（1）创建一个继承android.view.View类的View类，并且重写构造方法。（2）根据需要重写相应的方法。（3）在项目的活动中，创建并实例化自定义View类，并将其添加到布局管理器中。,2.3.4开发自定义的View,2.4：布局组件(Layouts),Android平台中，强化了布局的地位，可是组件必须放在布局或者与布局具有相同地位的容器中，否则，资源管理器认为该摆放方式非法.Android平台定义了：LinearLayout(线性布局)、AbsoluteLayout(绝对布局)、RelativeLayout(相对布局)、TableLayout(表格布局)、FrameLayout(框架布局,帧布局)其中绝对布局不是很常用，最新的版本中已经不再使用,2.4：布局组件(Layouts),1、LinearLayout(线性布局)线性布局LinearLayout 是将容器内的子组件按照直线方式进行摆放；其方向可以是竖向或者横向，这依赖于你怎么定义方向orientation 属性。线性布局的几个重要属性：方向属性：android:orientation=“horizontal”或者vertical宽度属性：android:layout_width=fill_parent高度属性：android:layout_height=fill_parent“,2.4：布局组件(Layouts),gravity属性：用于控制布局中视图组件的位置。有top、bottom、left、right、center_vertical，center_horizontal，center等取值；（如果该属性在一些视图组件中使用，则控制控件上面的东西的位置，如TextView里面的文本默认居左作对齐的，如果让这些文本居中的话，只要在这个TextView的属性里加上android:gravity=“center”）如设置多个属性值，需要使用”|”进行分隔，注意不能有空格等字符比如要弄一个左下位置：则可以设置：android:gravity=left|bottom,2.4：布局组件(Layouts),2.4：布局组件(Layouts),1、LinearLayout(线性布局)线性布局的几个重要属性：layout_gravity:定位当前视图在父元素的位置，取值和gravity相同layout_weight：将排列好组件后的剩余的空间，按权重比例进行分配。该属性是一个非负整数值，如果该属性大于0，线性布局会根据水平或者垂直方向，按照不同视图的layout_weight值占所有视图layout_weight属性之和的比例，来分配每个视图所占的区域比例，同时视图将按照比例拉伸。如果属性值为0，视图不会拉伸，按照原大小显示注意：一旦View设置了该属性(假设有效的情况下)，那么该 View的宽度等于原有宽度(android:layout_width)加上剩余空间的占比！,2.4：布局组件(Layouts),1、LinearLayout(线性布局),2.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“设置视图底端对齐,2.4：布局组件(Layouts),2、RelativeLayout(相对布局),2.4：布局组件(Layouts),3、AbsoluteLayout(绝对布局)在绝对布局的所有子组件中，各自为政，必须单独指定其位置信息。理论上来说，通过绝对布局可以随心所欲的放置组件，但是在实际操作中，可能会因为改变一个组件的位置而造成多个组件的位置都要随着调整的情况。android:layout_x：横坐标android:layout_y：纵坐标绝对布局没有额外的属性，其xml属性都继承于其父类,2.4：布局组件(Layouts),3、AbsoluteLayout(绝对布局),2.4：布局组件(Layouts),4、FrameLayout(框架布局，帧布局)FrameLayout是最简单的一个布局对象。所有添加到这个布局中的视图都以层叠的方式显示，最后一个添加的视图显示在最上面，上一层的视图会覆盖下一层的视图。类似于堆栈一样。所有的子元素将会固定在屏幕的左上角；你不能为FrameLayout中的一个子元素指定一个位置。后一个子元素将会直接在前一个子元素之上进行覆盖填充，这些元素互相叠加。只有一个元素显示在最前端。,2.4：布局组件(Layouts),4、FrameLayout(框架布局),2.4：布局组件(Layouts),5、TableLayout(表格布局)表格布局TableLayout把它的子视图定位到行和列中。表布局容器不显示行，列和单元的边界线。由TableLayout标签和若干个TableRow 标签组成.TableRow 对象是一个TableLayout的子视图（每个TableRow定义了表中的一个单独行）。每行有0或多个单元，可用任何其他视图定义。因此，行单元可能由各个视图对象组成，如ImageView或TextView对象。一个单元也可以是一个ViewGroup对象（比如，你可以嵌入另一个表布局作为一个单元）。,2.4：布局组件(Layouts),5、TableLayout(表格布局)表格布局的几个重要属性：列的伸展：android:stretchColumns=1“android:stretchColumns：属性用于指明哪些列可以伸展，其属性值可以是单个或者多个列的编号，列编号从0开始，编号与编号之间用“，”分开，如果属性值为”*”,则将每一列等宽拉伸至最大宽度如果想让控件根据手机屏幕的分辨率来进行自动调整（自适应），必须使用dip，而不能使用px进行设置,2.4：布局组件(Layouts),5、TableLayout(表格布局),