satya - Wed Nov 07 2012 11:27:34 GMT-0500 (Eastern Standard Time)

Here is how LinearLayout implements its own layout params


public static class LayoutParams extends ViewGroup.MarginLayoutParams {
    public float weight;
    public int gravity = -1;

    public LayoutParams(Context c, AttributeSet attrs) {
        super(c, attrs);
        TypedArray a =
                c.obtainStyledAttributes(attrs, com.android.internal.R.styleable.LinearLayout_Layout);

        weight = a.getFloat(com.android.internal.R.styleable.LinearLayout_Layout_layout_weight, 0);
        gravity = a.getInt(com.android.internal.R.styleable.LinearLayout_Layout_layout_gravity, -1);

        a.recycle();
    }

    public LayoutParams(int width, int height) {
        super(width, height);
        weight = 0;
    }

    public LayoutParams(int width, int height, float weight) {
        super(width, height);
        this.weight = weight;
    }

    public LayoutParams(ViewGroup.LayoutParams p) {
        super(p);
    }

    public LayoutParams(MarginLayoutParams source) {
        super(source);
    }

    @Override
    public String debug(String output) {
        return output + "LinearLayout.LayoutParams={width=" + sizeToString(width) +
                ", height=" + sizeToString(height) + " weight=" + weight +  "}";
    }
}

satya - Wed Nov 07 2012 11:31:20 GMT-0500 (Eastern Standard Time)

Here are some overriden methods in the custom layout for layout params


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

@Override
protected LayoutParams generateDefaultLayoutParams() {
    if (mOrientation == HORIZONTAL) {
        return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
    } else if (mOrientation == VERTICAL) {
        return new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
    }
    return null;
}

@Override
protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
    return new LayoutParams(p);
}


// Override to allow type-checking of LayoutParams.
@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
    return p instanceof LinearLayout.LayoutParams;
}

satya - Wed Nov 07 2012 11:44:29 GMT-0500 (Eastern Standard Time)

Key methods in the measure pass from Romain


child.measure()
ViewGroup.measureChild()
ViewGroup.getChildMeasureSpec()

satya - Wed Nov 07 2012 11:45:27 GMT-0500 (Eastern Standard Time)

Why to use ViewGroup.measureChild?

if you call measure on a child, you are responsible for figuring out the measurespec "appropriately" yourself. You may want to use measureChild().

satya - Wed Nov 07 2012 15:25:37 GMT-0500 (Eastern Standard Time)

LinearLayout.java

Search for: LinearLayout.java

satya - Wed Nov 07 2012 15:27:04 GMT-0500 (Eastern Standard Time)

Source code of LienarLayout.java from gitorious

you can examine the onMeasure and other methods of a custom layout as an example

satya - Fri Nov 09 2012 09:48:41 GMT-0500 (Eastern Standard Time)

Here is how debug is implemented for layouts


public String debug(String output) {
    return output + "ViewGroup.LayoutParams={ width="
            + sizeToString(width) + ", height=" + sizeToString(height) + " }";
}

protected static String sizeToString(int size) {
    if (size == WRAP_CONTENT) {
        return "wrap-content";
    }
    if (size == MATCH_PARENT) {
        return "match-parent";
    }
    return String.valueOf(size);
}

satya - Fri Nov 09 2012 13:43:00 GMT-0500 (Eastern Standard Time)

Here is a complete implementation of a FlowLayout

This is very basic to tell you the structure and nature of a custom layout. I haven't used line breaks. I haven't used padding. I haven't used custom spacing etc. You can easily add those.

The onmeasure() implementation you have to get a pencil and paper and layout the children yourself. Otherwise explaining the logic will not help much.

From Romain Guy's presentation I have picked up how to store the (x,y) coordinates for views in the view layout params itself. That is a nice trick.


public class FlowLayout 
extends ViewGroup 
{
   private int hspace=10;
   private int vspace=10;
   public FlowLayout(Context context) {
      super(context);
      initialize(context);
   }

   public FlowLayout(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);
      TypedArray t = context.obtainStyledAttributes(attrs,
            R.styleable.FlowLayout, 0, 0);
      hspace = t.getInt(R.styleable.FlowLayout_hspace,
            hspace);
      vspace = t.getInt(R.styleable.FlowLayout_vspace,
            vspace);
      t.recycle();
      initialize(context);
   }

   public FlowLayout(Context context, AttributeSet attrs) {
      this(context, attrs, 0);
   }

   private void initialize(Context context) {
   }

   //This is very basic
   //doesn't take into account padding
   //You can easily modify it to account for padding
   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
   {
      //********************
      //Initialize
      //********************
      int rw = MeasureSpec.getSize(widthMeasureSpec);
      int rh = MeasureSpec.getSize(heightMeasureSpec);
      int h = 0; //current height
      int w = 0; //current width
      int h1 = 0, w1=0; //Current point to hook the child to
      
      //********************
      //Loop through children
      //********************
      int numOfChildren = this.getChildCount();
      for (int i=0; i < numOfChildren; i++ )
      {
         //********************
         //Front of the loop
         //********************
         View child = this.getChildAt(i);
         this.measureChild(child,widthMeasureSpec, heightMeasureSpec);
         int vw = child.getMeasuredWidth();
         int vh = child.getMeasuredHeight();
         
         if (w1 + vw > rw)
         {
            //new line: max of current width and current width position
            //when multiple lines are in play w could be maxed out
            //or in uneven sizes is the max of the right side lines
            //all lines don't have to have the same width
            //some may be larger than others
            w = Math.max(w,w1);
            //reposition the point on the next line
            w1 = 0; //start of the line
            h1 = h1 + vh; //add view height to the current heigh
         }
         //********************
         //Middle of the loop
         //********************
         int w2 = 0, h2 = 0; //new point for the next view
         w2 = w1 + vw;
         h2 = h1;
         //latest height: current point + height of the view
         //however if the previous height is larger use that one
         h = Math.max(h,h1 + vh);
         
         //********************
         //Save the current coords for the view 
         //in its layout
         //********************
         LayoutParams lp = (LayoutParams)child.getLayoutParams();
         lp.x = w1;
         lp.y = h1;
      
         //********************
         //Restart the loop 
         //********************
         w1=w2;
         h1=h2;
      }
   //********************
   //End of for 
   //********************
      w = Math.max(w1,w);
      //h = h;
      setMeasuredDimension(
            resolveSize(w, widthMeasureSpec), 
            resolveSize(h,heightMeasureSpec));
   };
   @Override
   protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) 
   {
      //Call layout() on children
      int numOfChildren = this.getChildCount();
      for (int i=0; i < numOfChildren; i++ )
      {
         View child = this.getChildAt(i);
         LayoutParams lp = (LayoutParams)child.getLayoutParams();
         child.layout(lp.x,
               lp.y,
               lp.x + child.getMeasuredWidth(), 
               lp.y + child.getMeasuredHeight());
      }
   }
   
   //*********************************************************
   //Layout Param Support 
   //*********************************************************
   @Override
   public LayoutParams generateLayoutParams(AttributeSet attrs) {
       return new FlowLayout.LayoutParams(getContext(), attrs);
   }

   @Override
   protected LayoutParams generateDefaultLayoutParams() {
       return new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
   }

   @Override
   protected LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
       return new LayoutParams(p);
   }


   // Override to allow type-checking of LayoutParams.
   @Override
   protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
       return p instanceof FlowLayout.LayoutParams;
   }   
   //*********************************************************
   //Custom Layout Definition 
   //*********************************************************
   public static class LayoutParams extends ViewGroup.MarginLayoutParams {
       public int spacing = -1;
       public int x =0;
       public int y =0;

       public LayoutParams(Context c, AttributeSet attrs) {
           super(c, attrs);
           TypedArray a =
                   c.obtainStyledAttributes(attrs, R.styleable.FlowLayout_Layout);

           spacing = a.getInt(R.styleable.FlowLayout_Layout_space, 0);
           a.recycle();
       }

       public LayoutParams(int width, int height) {
           super(width, height);
           spacing = 0;
       }

       public LayoutParams(ViewGroup.LayoutParams p) {
           super(p);
       }

       public LayoutParams(MarginLayoutParams source) {
           super(source);
       }
   }//eof-layout-params   

}// eof-class

satya - Fri Nov 09 2012 13:43:51 GMT-0500 (Eastern Standard Time)

Here is how I have used it


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cc="http://schemas.android.com/apk/res/com.androidbook.compoundControls"    
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    >
<TextView  
   android:id="@+id/text2"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Welcome to the Compound Controls"
    />
<com.androidbook.compoundControls.FlowLayout
   android:id="@+id/durationControlId"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    >
   <Button android:text="Button1"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
   <Button android:text="Button2"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
   <Button android:text="Button3"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
   <Button android:text="Button4"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
   <Button android:text="Button5"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
   <Button android:text="B1"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
   <Button android:text="B2"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
   <Button android:text="B3"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
   <Button android:text="B4"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
   <Button android:text="B5"
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content"
    />
</com.androidbook.compoundControls.FlowLayout>
 
<TextView  
   android:id="@+id/text1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Scratch for debug text"
    />
</LinearLayout>

satya - Fri Nov 09 2012 13:54:32 GMT-0500 (Eastern Standard Time)

Implementation onMeasure() is simple but understanding why is very tricky

First of all you know that you receive 3 types of measure specs. at most (for wrap_content), unspecified (for scrolling perhaps), and exact (match parent or exact size).

If you noticed in our implementation we passed that measure spec as is to the child.

If a flow layout has an exact size specified of 100 pixels high, then the measure spec will be 100 exact to the flow layout. But flow layout sends 100 exact to the first child and every child. If the child is not cautious it could use all that size and will leave no space for the children. (But if you use measureChild it seem to make some adjustment. I just saw its soruce code. I will post it in a minute)

Another advise is you can add up all the child sizes to come up with a big size that might exceed the specified size for the view group. This is ok, because the clipping will happen when we call the resolveSize() before setting the measured dimension.

satya - Fri Nov 09 2012 13:55:04 GMT-0500 (Eastern Standard Time)

getChildMeasureSpec (used by measureChild of ViewGroup)


public static int getChildMeasureSpec(int spec, int padding, int childDimension) {
        int specMode = MeasureSpec.getMode(spec);
        int specSize = MeasureSpec.getSize(spec);

        int size = Math.max(0, specSize - padding);

        int resultSize = 0;
        int resultMode = 0;

        switch (specMode) {
        // Parent has imposed an exact size on us
        case MeasureSpec.EXACTLY:
            if (childDimension >= 0) {
                resultSize = childDimension;
                resultMode = MeasureSpec.EXACTLY;
            } else if (childDimension == LayoutParams.MATCH_PARENT) {
                // Child wants to be our size. So be it.
                resultSize = size;
                resultMode = MeasureSpec.EXACTLY;
            } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                // Child wants to determine its own size. It can't be
                // bigger than us.
                resultSize = size;
                resultMode = MeasureSpec.AT_MOST;
            }
            break;

        // Parent has imposed a maximum size on us
        case MeasureSpec.AT_MOST:
            if (childDimension >= 0) {
                // Child wants a specific size... so be it
                resultSize = childDimension;
                resultMode = MeasureSpec.EXACTLY;
            } else if (childDimension == LayoutParams.MATCH_PARENT) {
                // Child wants to be our size, but our size is not fixed.
                // Constrain child to not be bigger than us.
                resultSize = size;
                resultMode = MeasureSpec.AT_MOST;
            } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                // Child wants to determine its own size. It can't be
                // bigger than us.
                resultSize = size;
                resultMode = MeasureSpec.AT_MOST;
            }
            break;

        // Parent asked to see how big we want to be
        case MeasureSpec.UNSPECIFIED:
            if (childDimension >= 0) {
                // Child wants a specific size... let him have it
                resultSize = childDimension;
                resultMode = MeasureSpec.EXACTLY;
            } else if (childDimension == LayoutParams.MATCH_PARENT) {
                // Child wants to be our size... find out how big it should
                // be
                resultSize = 0;
                resultMode = MeasureSpec.UNSPECIFIED;
            } else if (childDimension == LayoutParams.WRAP_CONTENT) {
                // Child wants to determine its own size.... find out how
                // big it should be
                resultSize = 0;
                resultMode = MeasureSpec.UNSPECIFIED;
            }
            break;
        }
        return MeasureSpec.makeMeasureSpec(resultSize, resultMode);
    }