开源代码

AndroidMosaicLayout

介绍：

Mosaiclayout是一个能够以92种模式显示view组合的布局。

运行效果：

使用说明：

 

你可以选择一个特定的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)

  1. 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);
已下载
0