自定义一个简单菱形的布局

最近在做项目的时候遇到这么一个情况，如图1，上面有9块相同的小块绿地，它的下面是一大块地，如图2，如果不考虑屏幕适配的问题，要想实现这个非常的容易，但是如果考虑到屏幕适配，自定义viewgroup是一个解决方案。

                           图1                                                       图2 

下面是布局代码：

MyViewFeildGroup就是我自己定的一个集成viewgroup的布局方式。id为iv_big_field的图片大小决定MyViewFeildGroup的大小（因为布局的高宽都是wrap_content）。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.swu.shen_pc.ninelayout.MainActivity">

    <com.swu.shen_pc.ninelayout.nine_layout.MyViewFeildGroup
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        
        <!--下面的最大块地-->
        <ImageView
            android:id="@+id/iv_big_field"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/farm_pic_land" />
        
        <!--下面9个imageview分别是9块小绿地-->
        <ImageView
            android:id="@+id/iv_farm_green_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/farm_pic_greenland"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/iv_farm_green_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/farm_pic_greenland"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/iv_farm_green_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/farm_pic_greenland"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/iv_farm_green_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/farm_pic_greenland"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/iv_farm_green_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/farm_pic_greenland"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/iv_farm_green_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/farm_pic_greenland"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/iv_farm_green_7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/farm_pic_greenland"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/iv_farm_green_8"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/farm_pic_greenland"
            android:visibility="visible" />

        <ImageView
            android:id="@+id/iv_farm_green_9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="fitXY"
            android:src="@drawable/farm_pic_greenland"
            android:visibility="visible" />


    </com.swu.shen_pc.ninelayout.nine_layout.MyViewFeildGroup>
</RelativeLayout>

下面是MyViewGroup的Java代码：

onMearure方法用第一块大地的高宽计算出MyViewGroup布局的高宽，然后onLayout方法一次计算出这1块大地和其他9块小地相对于父布局的位置。

package com.swu.shen_pc.ninelayout.nine_layout;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

import com.swu.shen_pc.ninelayout.BuildConfig;


/**
 * Created by shen on 2015/12/22.
 */
public class MyViewFeildGroup extends ViewGroup {
    private int mLandHeight;
    private int mLandWidth;

    public MyViewFeildGroup(Context context, AttributeSet attributes) {
        super(context, attributes);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int cCount = getChildCount();
        double cWidth = 0;
        double cHeight = 0;
        MarginLayoutParams cParams = null;
        
        /**
         * 遍历所有childView根据其宽和高，以及margin进行布局
         */
        for (int i = 0; i < cCount; i++) {
            View childView = getChildAt(i);
            cWidth = (1.0 / 3) * mLandWidth;
            cHeight = (1.0 / 3) * mLandHeight;
            double cl = 0.0, ct = 0.0, cr = 0.0, cb = 0.0;
            switch (i) {
                case 0:
                    cl = 0.0;
                    ct = 0.0;
                    cWidth = mLandWidth;
                    cHeight = mLandHeight;
                    cr = cl + cWidth;
                    cb = cHeight + ct;
                    childView.layout((int) cl, (int) ct, (int) cr, (int) cb);
                    continue;
                    
                case 1:
                    cl = (1.0 / 3) * mLandWidth;
                    ct = 0.0;
                    break;
                
                case 2:
                    cl = (1.0 / 6) * mLandWidth;
                    ct = (1.0 / 6) * mLandHeight;
                    break;
                
                case 3:
                    cl = 0.0;
                    ct = (1.0 / 3) * mLandHeight;
                    break;

                case 4:
                    cl = (1.0 / 2) * mLandWidth;
                    ct = (1.0 / 6) * mLandHeight;
                    break;

                case 5:
                    cl = (1.0 / 3) * mLandWidth;
                    ct = (1.0 / 3) * mLandHeight;
                    break;

                case 6:
                    cl = (1.0 / 6) * mLandWidth;
                    ct = (1.0 / 2) * mLandHeight;
                    break;

                case 7:
                    cl = (2.0 / 3) * mLandWidth;
                    ct = (1.0 / 3) * mLandHeight;
                    break;

                case 8:
                    cl = (1.0 / 2) * mLandWidth;
                    ct = (1.0 / 2) * mLandHeight;
                    break;
                
                case 9:
                    cl = (1.0 / 3) * mLandWidth;
                    ct = (2.0 / 3) * mLandHeight;
                    break;
                
                default:
                    break;
            }

            cr = cl + cWidth;
            cb = cHeight + ct;
            childView.layout((int) cl, (int) ct, (int) cr, (int) cb);
        }


    }


    /**
     * 计算所有ChildView的宽度和高度,如果高宽都是wrap_content，然后根据第一个childView的计算结果，设置自己的宽和高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        /**
         * 获得此ViewGroup上级容器为其推荐的宽和高，以及计算模式
         */
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);


        // 计算出所有的childView的宽和高
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        /**
         * 记录如果是wrap_content是设置的宽和高
         */
        int width;
        int height;
        int cWidth;
        int cHeight;
        MarginLayoutParams cParams = null;
        
        /**
         * 根据第1个childView,也就是第一块大地计算的出的宽和高，以及设置的margin计算容器的宽和高，主要用于容器是warp_content时
         */
        View childView = getChildAt(0);
        cWidth = childView.getMeasuredWidth();
        cHeight = childView.getMeasuredHeight();
        mLandHeight = childView.getMeasuredHeight();
        mLandWidth = childView.getMeasuredWidth();
        cParams = (MarginLayoutParams) childView.getLayoutParams();
        width = cWidth + cParams.leftMargin + cParams.rightMargin;
        height = cHeight + cParams.topMargin + cParams.bottomMargin;
        
        if (BuildConfig.DEBUG) Log.d("MyViewFeildGroup", "height:" + height);

        if (BuildConfig.DEBUG) Log.d("MyViewFeildGroup", "width:" + width);

        /**
         * 如果是wrap_content设置为我们计算的值
         * 否则：直接设置为父容器计算的值
         */
        setMeasuredDimension((widthMode == MeasureSpec.EXACTLY) ? sizeWidth
                : width, (heightMode == MeasureSpec.EXACTLY) ? sizeHeight
                : height);

    }
}

好，到此为止自定义的MyViewFeildGroup就自定义完成了，在用eclipse或者Android studio预览布局的时候，可以选择多个分辨率的屏幕看看，当然其中还有很多细节没有处理，但是解决现在这个情况是绰绰有余了。