以92种模式显示view组合的布局：AndroidMosaicLayout

jopen 9年前

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)

  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);


项目地址： https://github.com/adhamenaya/AndroidMosaicLayout