以92種模式顯示view組合的布局：AndroidMosaicLayout

你可以選擇一個特定的pattern。或者不選擇任何pattern讓布局隨機的選擇pattern。如果你決定選擇一個或者更多的pattern，則需遵循下面的注釋：

1. 每個pattern可以持有8個塊（兩行四列＝8塊）。

2. 在 layout pattern中，只允許擁有四種類型的塊

• BIG SQUARE (4 inner cells)

• SMALL SQUARE (1 inner cell)

• HORIZONTAL RECTANGLE (2 inner cells aligned horizontally)

• VERTICAL RECTANGLE (2 inner cells aligned vertically)

3. patter的順序是從左到右，然后從上到下。

• 例子 1: 8 small blocks

 ----------- ----------- ----------- -----------
|           |           |           |           |
|   img 1   |   img 2   |   img 3   |   img 4   |
|   small   |   small   |   small   |   small   |
|           |           |           |           |
| --------- | --------- | --------- | --------- |
|           |           |           |           |
|   img 5   |   img 6   |   img 7   |   img 8   |
|   small   |   small   |   small   |   small   |
|           |           |           |           |
 ----------  ----------- ----------- -----------

就如上表格所示，布局只包含了小的方塊。那么layout pattern就應該寫為：

BLOCK_PATTERN pattern[] = { 
        BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL,
        BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL 
};

• 例子 2: 1 big block and 4 small blocks

 ----------- ----------- ----------- -----------
|                       |           |           |
|                       |   img 2   |   img 3   |
|   big         big     |   small   |   small   |
|                       |           |           |
|         img1          | --------- | --------- |
|                       |           |           |
|                       |   img 4   |   img 5   |
|   big         big     |   small   |   small   |
|                       |           |           |
 ----------  ----------- ----------- -----------

如上表格所示， image 1占用了4個小的單元格，在布局中建立了一個大的塊，那么 layout pattern就該寫為：

BLOCK_PATTERN pattern[] = { 
        BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL,
        BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL 
};

• 例子 3: 1 vertical block, 2 small blocks and 2 horizontal blocks

 ----------- ----------- ----------- -----------
|           |           |                       |
|           |   img 2   |         img 3         |
|   vert.   |   small   |   horiz.      horiz.  |
|           |           |                       |
|   img 1   | --------- | --------- | --------- |
|           |                       |           |
|           |         img 4         |   img 5   |
|   vert.   |   horiz.      horiz.  |   small   |
|           |                       |           |
 ----------  ----------- ----------- -----------

如上表格所示，image 1占用了2個縱向的單元格 images 3和 images 4分別占用了2個橫向的單元格，那么 layout pattern就該寫為：

BLOCK_PATTERN pattern[] = { 
        BLOCK_PATTERN.VERTICAL, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.HORIZONTAL,
        BLOCK_PATTERN.VERTICAL, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.SMALL 
};

你可以設計出92種不同的pattern！

• 把布局放到activity中:

  <com.adhamenaya.views.MosaicLayout
    android:id="@+id/mosaic_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
  </com.adhamenaya.views.MosaicLayout>

• 初始化布局及其pattern：

  MosaicLayout mMosaicLayout = (MosaicLayout) findViewById(R.id.mosaic_layout);
  MyAdapter mAdapater = mAdapater = new MyAdapter(getApplicationContext());

• 選擇你的 layout patters模式，你可以選擇3種模式：

    mMosaicLayout.chooseRandomPattern(true);

    BLOCK_PATTERN pattern1[] = { BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL,
                                BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.HORIZONTAL };
    BLOCK_PATTERN pattern2[] = { BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG,
                                BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG };
  
    mMosaicLayout.addPattern(pattern1);
    mMosaicLayout.addPattern(pattern2);
    mMosaicLayout.chooseRandomPattern(false);

    BLOCK_PATTERN pattern1[] = { BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.SMALL, BLOCK_PATTERN.SMALL,
                                BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.HORIZONTAL, BLOCK_PATTERN.HORIZONTAL };
    BLOCK_PATTERN pattern2[] = { BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG,
                                BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG, BLOCK_PATTERN.BIG };
  
    mMosaicLayout.addPattern(pattern1);
    mMosaicLayout.addPattern(pattern2);
    mMosaicLayout.chooseRandomPattern(true);

• 選擇一個patterns組合，設置為隨機顯示。

• 選擇一個patterns組合，按照設置的順序顯示。

• 不設置pattern，讓布局從93種選項中隨機選擇。

• 為布局設置adapter：

  mMosaicLayout.setAdapter(mAdapater);