架构师01：架构设计的 UML 图形思考（Graphic Thi

2019-08-07 本文已影响0人陈有余

Class Diagram（类别图）
Use Case Diagram（用例图）
Statemachine Diagram（状态机图）
Sequence Diagram（顺序图）
Activity Diagram（活动图）
Communication Diagram（通信图）
Component Diagram（模块图）
Deployment Diagram（布署图）
Composite Structure Diagram（组合结构图）

官方网站：http://astah.net/

可以下载一个免费小区型（Community）版本来使用。

三、绘制UML类别图：表达<基类/子类>

下载安装好 Astah 后，我们来尝试画一下类别图，看看在类别图中，如何表达基类、子类的关系。

step1：启动 Astah ，在菜单栏中选择<Diagram>，在出现的下拉框中选择Class Diagram；

创建类别图

选择后，界面会出现一个空白的类别图，我们将在上面绘制我们需要的 Class。

新建的类别图

在空白的类别图上方，有一排类别图的元素（Element），简称「图素」，如下：

Element

step2：在元素列表中，我们选中第二个图素，然后移动鼠标到图表里面，按下鼠标左键，就会在图标中出现一个类别元素；

选中类别元素

点击鼠标左键，生成一个类别元素

假设这个类别元素是 Android 里面的 Activity 。

基类：Activity

tips：如果想要修改类别元素的背景颜色。可以右键，选中Set Color，然后选择自己喜欢的颜色就行。

Set Color

让我们再画一个类别元素，名叫MyActivity：

2019-08-08_111738.jpg

step3：建立 Activity 和 MyActivity 之间的继承关系。在元素列表中，选中Generalization，然后将鼠标移动到 MyActivity 上，点击左键，再将鼠标移动到 Activity上，点击左键，即可完成；

选中Generalization

建立继承关系

四、绘制UML类别图：表达接口（Interface）

对于架构师而言，接口（Interface）的角色比类（Class）来得重要多了。在上一小节中，我们学些了继承（extends）关系的表达，在这一小节，我们来学习一下实现（implements）关系如何表示。

我们以 Activity 实现 OnClickListener 接口为例：

public class MyActivity extends Activity implements OnClickListener {
  ......
}

step1：在元素列表中选中接口图素，然后移动鼠标到类别图的空白位置，点击鼠标左键创建一个接口元素，取名叫OnClickListener；

选中<Interface>图素

创建一个接口元素

step2：为 OnClickListener 接口创建一个注释 <Note>；

选中<Note>

在<Note>里面声明一下接口中的抽象方法：

声明onclick方法

step3：选中 <NoteAnchor> 图素将注释和接口连接起来；

选中 <NoteAnchor>

将注释和接口连接起来

step4：表达 Class 与接口之间的关系。选中 <Association>图素，将 MyActivity 和 OnClickListener 连接起来；

选中<Association>图素

连接 MyActivity 和 OnClickListener

在 MyActivity 中声明一下实现的 onClick 方法：

2019-08-08_145315.jpg

2019-08-08_145722.jpg

当 MyActivity 实现了 OnClickListener 接口以后，其它类就能通过此接口来调用 MyActivity 里的 onClick() 函数：

public class MyActivity extends Activity {
@Override public void onCreate(Bundle icicle) {
  super.onCreate(icicle);
  setContentView(R.layout.main);
  Button btn = new Button(this);
  btn.setText("OK");
  btn.setBackgroundResource(R.drawable.heart);
  btn.setOnClickListener(this);
  setContentView(button);
}

上述代码表示了页面中有一个 Button，该 Button 调用了 onClick 方法：