結構型模式之 組合模式

前言

對於樹形結構，在程式碼中有容器節點和葉子節點之分，容器節點可以有子節點，而葉子節點沒有，所以兩者是有區分的，而在實際使用中，我們更希望一致的對待他們，因為如若區別對待，在程式上會非常複雜。組合模式則是為了解決此類問題而生的，它可以讓葉子物件和容器物件的使用具有一致性。他是組合多個物件形成樹形結構以表示具有“整體—部分”關係的層次結構，故稱為組合模式（這個是我猜的……）。

模式定義

組合模式(Composite Pattern)：組合多個物件形成樹形結構以表示具有“整體—部分”關係的層次結構。組合模式對單個物件（即葉子物件）和組合物件（即容器物件）的使用具有一致性，組合模式又可以稱為“整體—部分”(Part-Whole)模式，它是一種物件結構型模式。
在組合模式中引入了抽象構件類Component，它是所有容器類和葉子類的公共父類，客戶端針對Component進行程式設計。

模式結構

Component 抽象構件，葉子構件和容器構件的介面或抽象類

Leaf 葉子構件，葉子節點沒有子節點

Composite 容器構件，容器節點可以有子節點，子節點也可以是容
器構件。

UML類圖

適用場景

在以下情況下可以使用組合模式：

1 在具有整體和部分的層次結構中，希望通過一種方式忽略整體與部分的差異，客戶端可以一致地對待它們。
2 在一個使用面嚮物件語言開發的系統中需要處理一個樹形結構。
3 在一個系統中能夠分離出葉子物件和容器物件，而且它們的型別不固定，需要增加一些新的型別。

看看大神怎麼用

組合模式使用面向物件的思想來實現樹形結構的構建與處理，描述瞭如何將容器物件和葉子物件進行遞迴組合，實現簡單，靈活性好。由於在軟體開發中存在大量的樹形結構，因此組合模式是一種使用頻率較高的結構型設計模式，Java SE中的AWT和Swing包的設計就基於組合模式，在這些介面包中為使用者提供了大量的容器構件（如Container）和成員構件（如Checkbox、Button和TextComponent等）

高清有碼

前戲：我們就Android的UI做一個簡單的例子，介面控制元件分為兩大類：View和ViewGroup。View是單元控制元件，如TextView，ImageView。ViewGroup是容器節點，如LinearLayout…我們用組合模式來設計這個庫。
正文開始，未滿18歲的可以離場了。

Demo角色預覽：

AbstractView 控制元件節點介面

ViewGroup 容器節點父類

View 子節點父類

LinearLayout 父節點實現類

RelativeLayout 父節點實現類

TextVeiw 子節點實現類

ImageView

AbstractView

/**
 * 控制元件抽象類
 * Created by R on 2016/8/17.
 */
public interface AbstractView {

    void addView(AbstractView view);

    void removeView(AbstractView view);

    void show();

}

View

/**
 * 子控制元件的父類
 * Created by R on 2016/8/18.
 */
public abstract class View implements AbstractView{

    String id;

    public View(String id){
        this.id = id;
    }

    @Override
    public void addView(AbstractView view) {
        System.out.println("該控制元件不支援此方法");
    }

    @Override
    public void removeView(AbstractView view) {
        System.out.println("該控制元件不支援此方法");
    }

}

ViewGroup

/**
 * 容器控制元件的父類
 * Created by R on 2016/8/18.
 */
public abstract class ViewGroup implements AbstractView{

    String id;

    public ViewGroup(String id){
        this.id = id;
    }

    protected LinkedList<AbstractView> mChilds = new LinkedList<>();

    @Override
    public void addView(AbstractView view) {
        mChilds.add(view);
    }

    @Override
    public void removeView(AbstractView view) {
        mChilds.remove(view);
    }

}

LinearLayout

/**
 * Created by R on 2016/8/18.
 */
public class LinearLayout extends ViewGroup{

    public LinearLayout(String id) {
        super(id);
    }

    @Override
    public void show() {
        System.out.println("線性佈局容器：" + id + " 顯示");
        for (AbstractView mChild : mChilds) {
            mChild.show();
        }
    }
}

RelativeLayout

/**
 * Created by R on 2016/8/18.
 */
public class RelativeLayout extends ViewGroup{

    public RelativeLayout(String id) {
        super(id);
    }

    @Override
    public void show() {
        System.out.println("相對佈局容器：" + id + " 顯示");
        for (AbstractView mChild : mChilds) {
            mChild.show();
        }
    }
}

TextView

/**
 * Created by R on 2016/8/18.
 */
public class TextView extends View{

    public TextView(String id) {
        super(id);
    }

    @Override
    public void show() {
        System.out.println("文字控制元件：" + id + " 顯示");
    }
}

ImageView

/**
 * Created by R on 2016/8/18.
 */
public class ImageView extends View{

    public ImageView(String id) {
        super(id);
    }

    @Override
    public void show() {
        System.out.println("圖片控制元件：" + id + " 顯示");
    }
}

Client 使用

/**
 * Created by R on 2016/8/17.
 */
public class Client {

    public void main(){
        AbstractView view1 , view2 , view3, view4 , view5 , view6 , viewGroupRoot, viewGroup2, viewGroup3;

        viewGroupRoot = new LinearLayout("根佈局");
        viewGroup2 = new RelativeLayout("容器1");
        viewGroup3 = new LinearLayout("容器2");

        view1 = new TextView("文字1");
        view2 = new TextView("文字2");
        view3 = new TextView("文字3");
        view4 = new ImageView("圖片1");
        view5 = new ImageView("圖片2");
        view6 = new ImageView("圖片3");

        viewGroupRoot.addView(view1);
        viewGroupRoot.addView(viewGroup2);
        viewGroupRoot.addView(viewGroup3);

        viewGroup2.addView(view2);
        viewGroup2.addView(view3);

        viewGroup3.addView(view4);
        viewGroup3.addView(view5);
        viewGroup3.addView(view6);

        viewGroup3.removeView(view6);

        viewGroupRoot.show();
    }
}

輸出：

總結

樹形結構由容器節點和葉子節點組成，簡單來說組合模式就是將容器節點和葉子節點轉化為一種節點來使用的設計模式，這樣一來便可將精力更專注於樹的結構，而不是節點的型別上了。
據我不成熟的猜想，Android中的View系列就用到了組合模式，並且用的淋漓盡致。所有View都是節點，View就是View和ViewGroup的Component，只不過他不是抽象類或介面。而我們在構件介面的時候並不是特別關注節點的型別，而是節點之間的關係。並且在Touch事件中尤為明顯，Touch事件可以針對某一個節點，也可以針對某一節點之下的所有節點。

感謝