Layout Management -Android and Qt

Rogeryixx@ucweb.comroger2yi@gmail.comwww.twitter.com/roger2yihttps://plus.google.com/

2011/8/22 1

Outline

• Basic Concepts

• Android Layout System

• Qt Layout System

• Android vs Qt - Pros and Cons

2011/8/22 2

Basic Concepts

2011/8/22 3

Layout & Layout Object

• Layout

– 名词 ——负责布局的对象

– 动词 ——进行布局（laid out）

• Layout Object

– 被布局的对象，由Layout来决定其位置（相对）和大小

• Layout Parameters

– 布局参数也可以分为Layout Object的参数和Layout本身的参数

2011/8/22 4

Cont.

• 常见的Layout

– BoxLayout（LinearLayout）

– BorderLayout

– FlowLayout

– StackedLayout

– GridLayout（TableLayout）

2011/8/22 5

Layout Procedure

• 布局通常是一个2-passes甚至multi-passes的过程

– Measure Pass：Layout需要询问从属的每一个Layout Object的期望的大小，可能包括最小，最佳，最大这几种尺寸，另外还可能包括是否允许通过增加高度交换较少的宽度以及之间的比例系数等

– Layout Pass：然后根据这些Layout Object期望的大小和布局参数（包括Layout Object的参数与自身的参数）来决定Layout Object最终的大小和位置

2011/8/22 6

Cont.

• 因为布局一般都支持嵌套，所以布局过程也包含一个向下递归的过程

– 父Layout询问子Layout Object期望的大小时，如果子Layout Object是一个Layout或者自身包含一个Layout，它需要先询问自己所属的Layout Object的期望大小

– 当父Layout决定了子Layout Object最终的大小时，如果子Layout Object是一个Layout或者自身包含一个Layout，它需要决定自己所属的Layout Object的最终的大小

2011/8/22 7

Why Layout？

• 避免大量手写的布局计算的代码，UI组件只需要定义自己期望的布局结构和参数即可

• 布局的修改更简单，只需要修改布局结构及参数

• 更容易适应组件大小的改变，手写的代码很难适应不同大小下的布局计算

• 跟UI编辑器结合，支持以可视化的方式构建UI界面

2011/8/22 8

Android Layout System

2011/8/22 9

Android UI Components Hierachy

2011/8/22 10

Cont.

• View objects are the basic units of user interface expression on the Android platform.

• The View class serves as the base for subclasses called "widgets," which offer fully implemented UI objects, like text fields and buttons.

• The ViewGroup class serves as the base for subclasses called "layouts," which offer different kinds of layout architecture, like linear, tabular and relative.

2011/8/22 11

Cont.

• View是所有UI组件的根类，它有两个重要的派生分支，Widgets和ViewGroup

• Widgets代表通用的简单类型UI组件，如Button，TextView等

• ViewGroup是所谓的容器类，用于容纳其它UI组件，ViewGroup也有两个重要的派生分支

– 通用的视图类，用于组织其它View，如ListView，GridView

– Layout用于布局管理

2011/8/22 12

Android Layout System Design

• Layout本身也是一个UI组件

• Layout Object只能是UI组件（派生自View），也就说只能对View派生的对象进行Layout

• 一个Layout布局结构的构建跟UI组件树的构建是一致的，Layout的嵌套实际上就是UI组件的嵌套

2011/8/22 13

Cont.

2011/8/22 14

Cont.

• 每一个Layout自身会包含一组属性，它是用于布局的参数

– LinearLayout::orientation

• 并且每一个Layout类下面会定义一个xxxLayoutParams类型，对应属于这个Layout的被Layout对象所应附带的布局参数（由View的getLayoutParams返回）

– ViewGroup::LayoutParams::width

– ViewGroup::LayoutParams::height

• View的measure方法被调用时（在Measure Pass中），需要计算自己期望的大小并告知Layout

2011/8/22 15

Qt Layout System Design

2011/8/22 16

Qt Layout System

2011/8/22 17

Cont.

• QWidget是Qt里面所有UI组件的基类，Qt没有单独的容器类，QWidget本身就可以容纳其它UI组件

• QLayout不是一个UI组件，而是从属于一个QWidget，也就是说QWidget包含一个QLayout来为它进行布局管理（策略模式）

• QLayoutItem是Qt里面Layout Object的基类，需要支持被布局的对象则需要派生自QLayoutItem

• QLayout本身也派生自QLayoutItem，从而支持嵌套布局

2011/8/22 18

Cont.

• QWidgetItem派生自QLayoutItem，然后指涉一个QWidget，它是QWidget的一个包裹类，用于对Qt Layout System能够对QWidget进行布局提供支持，QLayout通过QWidgetItem间接或者直接访问QWidget

• QLayoutItem还有其它用于辅助布局的派生类，比如QSpacerItem，用于占据一块空白区域

• QLayoutItem的属性用于提供Layout Object的Layout Parameters

• QLayout的属性用于提供Layout的Layout Parameters2011/8/22 19

Qt Layout System Design

• QLayout可以为任意派生自QLayoutItem的对象进行布局管理，并通过QWidgetItem这个包裹类对QWidget进行布局管理

• UI组件树跟布局管理的树结构是分开的，一棵UI组件树可以带有多个用于布局管理的树结构（数目由有多少个QWidget真正包含一个QLayout对象来决定）

• 组件树的层次结构和布局管理树的层次结构不需要一致

• 组件树和布局管理树之间需要进行状态同步和通讯

2011/8/22 20

Cont.

2011/8/22 21

Android - Pros and Cons

• Pros– 设计和实现的复杂度比较低

– 比较容易理解和使用

• Cons– 使用上不够灵活，不支持对非UI组件外的对象进行布局，无法在运行时动态改变布局

– 增加了UI树的复杂度，可能会引入一些多余的中间节点，导致渲染和事件路由的性能损耗

– 难以实现复杂的布局，布局越复杂会导致UI树越复杂

– 难以实现精确的布局控制

2011/8/22 22

Qt - Pros and Cons

• Pros– 使用上更灵活

– 构建复杂的布局更简单

– 精准的控制布局更容易

– 可以在拥有复杂布局的同时仍然让UI组件树保持一个简单的结构，不需要为了布局而引入多余的UI组件和额外的树层次，有利于提供渲染和事件路由的性能

– 动态改变某个UI组件分支的布局比较容易

• Cons– 设计和实现十分复杂– 布局管理系统和UI组件之间有紧密的耦合关系，需要在UI组件树和布局树之间进行状态同步和通信，需要大量的检查来保证其正确性

2011/8/22 23

The End

Thank you for your listeningYours Sincerely, Roger

2011/8/22 24