想要实现下面的UI效果:
When you’re designing your application, you might have complex views that will show up in different activities. Imagine that
you’re creating a card game and you want to show the user’s hand in a layout similar to figure. How would you create a
layout like that?You might say that playing with margins will be enough for that type of layout. That’s true. You can do something similar to the previous figure with a RelativeLayout and add margins to its children. The XML looks like the following:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<View
android:layout_width="100dp"
android:layout_height="150dp"
android:background="#FF0000" />
<View
android:layout_width="100dp"
android:layout_height="150dp"
android:layout_marginLeft="30dp"
android:layout_marginTop="20dp"
android:background="#00FF00" />
<View
android:layout_width="100dp"
android:layout_height="150dp"
android:layout_marginLeft="60dp"
android:layout_marginTop="40dp"
android:background="#0000FF" />
</RelativeLayout>
The benefits of using a custom ViewGroup instead of adding margins by hand in an XML file are
these:
1. It’s easier to maintain if you’re using it in different activities.
2.You can use custom attributes to customize the position of the ViewGroup children.
3.The XML will be easier to understand because it’ll be more concise.
4.If you need to change the margins, you won’t need to recalculate by hand every
child’s margin.
第一步:Understanding how Android draws views
measuring pass is implemented in measure(int, int) and is a top-down traversal of the View tree. Each View pushes dimension specifications down the tree during the recursion. At the end of the measure pass, every View has stored its measurements. The second pass happens in layout(int, int, int,int) and is also top-down. During this pass each parent is responsible for positioning all of its children using the sizes computed in the measure pass.To understand the concept, let’s analyze the way to draw a ViewGroup. The first step is to measure its width and height, and we do this in the onMeasure() method. Inside that method, the ViewGroup will calculate its size by going through its children. We’ll make the final pass in the onLayout() method. Inside this second method, the ViewGroup will lay out its children using the information gathered in the onMeasure() pass.
第二步:attrs.xml文件:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="CascadeLayout">
<attr name="horizontal_spacing" format="dimension" />
<attr name="vertical_spacing" format="dimension" />
</declare-styleable>
</resources>
第三步:布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:cascade="http://schemas.android.com/apk/res/com.example.customview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<com.example.customview.CascadeLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
cascade:horizontal_spacing="30dp"
cascade:vertical_spacing="20dp" >
<View
android:layout_width="100dp"
android:layout_height="150dp"
android:background="#FF0000" />
<View
android:layout_width="100dp"
android:layout_height="150dp"
android:background="#00FF00" />
<View
android:layout_width="100dp"
android:layout_height="150dp"
android:background="#0000FF" />
</com.example.customview.CascadeLayout>
</FrameLayout>
第四步:
package com.example.customview;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
public class CascadeLayout extends ViewGroup {
private int mHorizontalSpacing;
private int mVerticalSpacing;
public CascadeLayout(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.CascadeLayout);
try {
mHorizontalSpacing = a.getDimensionPixelSize(
R.styleable.CascadeLayout_horizontal_spacing,
getResources().getDimensionPixelSize(
R.dimen.cascade_horizontal_spacing));
mVerticalSpacing = a.getDimensionPixelSize(
R.styleable.CascadeLayout_vertical_spacing,
getResources().getDimensionPixelSize(
R.dimen.cascade_vertical_spacing));
} catch (Exception e) {
e.printStackTrace();
} finally {
a.recycle();
}
}
public static class LayoutParams extends ViewGroup.LayoutParams {
int x;
int y;
public LayoutParams(int w, int h) {
super(w, h);
}
public LayoutParams(Context c, AttributeSet attrs) {
super(c, attrs);
}
}
@Override
protected boolean checkLayoutParams(android.view.ViewGroup.LayoutParams p) {
return super.checkLayoutParams(p);
}
@Override
protected android.view.ViewGroup.LayoutParams generateDefaultLayoutParams() {
return super.generateDefaultLayoutParams();
}
@Override
public android.view.ViewGroup.LayoutParams generateLayoutParams(
AttributeSet attrs) {
return super.generateLayoutParams(attrs);
}
@Override
protected android.view.ViewGroup.LayoutParams generateLayoutParams(
android.view.ViewGroup.LayoutParams p) {
return super.generateLayoutParams(p);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = 0;
int height = getPaddingTop();
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
LayoutParams lp = (LayoutParams) child.getLayoutParams();
width = getPaddingLeft() + mHorizontalSpacing * i;
lp.x = width;
lp.y = height;
width += child.getMeasuredWidth();
height += mVerticalSpacing;
}
width += getPaddingRight();
height += getChildAt(getChildCount() - 1).getMeasuredHeight()
+ getPaddingBottom();
setMeasuredDimension(resolveSize(width, widthMeasureSpec),
resolveSize(height, heightMeasureSpec));
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
LayoutParams lp = (LayoutParams) child.getLayoutParams();
/*
* l Left position, relative to parent t Top position, relative to
* parent r Right position, relative to parent b Bottom position,
* relative to parent
*/
child.layout(lp.x, lp.y, lp.x + child.getMeasuredWidth(), lp.y
+ child.getMeasuredHeight());
}
}
}